Merge branch 'master' into nymkappa/feature/update-api-case

backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts

@@ -2,7 +2,7 @@ import { IEsploraApi } from './esplora-api.interface';
 
 export interface AbstractBitcoinApi {
   $getRawMempool(): Promise<IEsploraApi.Transaction['txid'][]>;
-  $getRawTransaction(txId: string, skipConversion?: boolean, addPrevout?: boolean): Promise<IEsploraApi.Transaction>;
+  $getRawTransaction(txId: string, skipConversion?: boolean, addPrevout?: boolean, lazyPrevouts?: boolean): Promise<IEsploraApi.Transaction>;
   $getBlockHeightTip(): Promise<number>;
   $getTxIdsForBlock(hash: string): Promise<string[]>;
   $getBlockHash(height: number): Promise<string>;

backend/src/api/bitcoin/bitcoin-api.ts

@@ -31,7 +31,8 @@ class BitcoinApi implements AbstractBitcoinApi {
     };
   }
 
-  $getRawTransaction(txId: string, skipConversion = false, addPrevout = false): Promise<IEsploraApi.Transaction> {
+
+  $getRawTransaction(txId: string, skipConversion = false, addPrevout = false, lazyPrevouts = false): Promise<IEsploraApi.Transaction> {
     // If the transaction is in the mempool we already converted and fetched the fee. Only prevouts are missing
     const txInMempool = mempool.getMempool()[txId];
     if (txInMempool && addPrevout) {
@@ -46,7 +47,7 @@ class BitcoinApi implements AbstractBitcoinApi {
           });
           return transaction;
         }
-        return this.$convertTransaction(transaction, addPrevout);
+        return this.$convertTransaction(transaction, addPrevout, lazyPrevouts);
       })
       .catch((e: Error) => {
         if (e.message.startsWith('The genesis block coinbase')) {
@@ -126,7 +127,7 @@ class BitcoinApi implements AbstractBitcoinApi {
     const outSpends: IEsploraApi.Outspend[] = [];
     const tx = await this.$getRawTransaction(txId, true, false);
     for (let i = 0; i < tx.vout.length; i++) {
-      if (tx.status && tx.status.block_height == 0) {
+      if (tx.status && tx.status.block_height === 0) {
         outSpends.push({
           spent: false
         });
@@ -145,7 +146,7 @@ class BitcoinApi implements AbstractBitcoinApi {
     return this.bitcoindClient.getNetworkHashPs(120, blockHeight);
   }
 
-  protected async $convertTransaction(transaction: IBitcoinApi.Transaction, addPrevout: boolean): Promise<IEsploraApi.Transaction> {
+  protected async $convertTransaction(transaction: IBitcoinApi.Transaction, addPrevout: boolean, lazyPrevouts = false): Promise<IEsploraApi.Transaction> {
     let esploraTransaction: IEsploraApi.Transaction = {
       txid: transaction.txid,
       version: transaction.version,
@@ -192,7 +193,7 @@ class BitcoinApi implements AbstractBitcoinApi {
     }
 
     if (addPrevout) {
-      esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction);
+      esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction, false, lazyPrevouts);
     } else if (!transaction.confirmations) {
       esploraTransaction = await this.$appendMempoolFeeData(esploraTransaction);
     }
@@ -268,20 +269,30 @@ class BitcoinApi implements AbstractBitcoinApi {
     return this.bitcoindClient.getRawMemPool(true);
   }
 
-  private async $calculateFeeFromInputs(transaction: IEsploraApi.Transaction): Promise<IEsploraApi.Transaction> {
+
+  private async $calculateFeeFromInputs(transaction: IEsploraApi.Transaction, addPrevout: boolean, lazyPrevouts: boolean): Promise<IEsploraApi.Transaction> {
     if (transaction.vin[0].is_coinbase) {
       transaction.fee = 0;
       return transaction;
     }
     let totalIn = 0;
-    for (const vin of transaction.vin) {
+
-      const innerTx = await this.$getRawTransaction(vin.txid, false, false);
+    for (let i = 0; i < transaction.vin.length; i++) {
-      vin.prevout = innerTx.vout[vin.vout];
+      if (lazyPrevouts && i > 12) {
-      this.addInnerScriptsToVin(vin);
+        transaction.vin[i].lazy = true;
-      totalIn += innerTx.vout[vin.vout].value;
+        continue;
+      }
+      const innerTx = await this.$getRawTransaction(transaction.vin[i].txid, false, false);
+      transaction.vin[i].prevout = innerTx.vout[transaction.vin[i].vout];
+      this.addInnerScriptsToVin(transaction.vin[i]);
+      totalIn += innerTx.vout[transaction.vin[i].vout].value;
+    }
+    if (lazyPrevouts && transaction.vin.length > 12) {
+      transaction.fee = -1;
+    } else {
+      const totalOut = transaction.vout.reduce((p, output) => p + output.value, 0);
+      transaction.fee = parseFloat((totalIn - totalOut).toFixed(8));
     }
-    const totalOut = transaction.vout.reduce((p, output) => p + output.value, 0);
-    transaction.fee = parseFloat((totalIn - totalOut).toFixed(8));
     return transaction;
   }
 

backend/src/api/bitcoin/esplora-api.interface.ts

@@ -33,6 +33,8 @@ export namespace IEsploraApi {
     // Elements
     is_pegin?: boolean;
     issuance?: Issuance;
+    // Custom
+    lazy?: boolean;
   }
 
   interface Issuance {

backend/src/api/mining.ts

@@ -7,6 +7,7 @@ import logger from '../logger';
 import blocks from './blocks';
 import { Common } from './common';
 import loadingIndicators from './loading-indicators';
+import { escape } from 'mysql2';
 
 class Mining {
   hashrateIndexingStarted = false;
@@ -110,7 +111,7 @@ class Mining {
   public async $getPoolStat(slug: string): Promise<object> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
-      throw new Error(`This mining pool does not exist`);
+      throw new Error('This mining pool does not exist ' + escape(slug));
     }
 
     const blockCount: number = await BlocksRepository.$blockCount(pool.id);

backend/src/api/transaction-utils.ts

@@ -21,8 +21,8 @@ class TransactionUtils {
     };
   }
 
-  public async $getTransactionExtended(txId: string, addPrevouts = false): Promise<TransactionExtended> {
+  public async $getTransactionExtended(txId: string, addPrevouts = false, lazyPrevouts = false): Promise<TransactionExtended> {
-    const transaction: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(txId, false, addPrevouts);
+    const transaction: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(txId, false, addPrevouts, lazyPrevouts);
     return this.extendTransaction(transaction);
   }
 

backend/src/repositories/BlocksRepository.ts

@@ -5,6 +5,7 @@ import { Common } from '../api/common';
 import { prepareBlock } from '../utils/blocks-utils';
 import PoolsRepository from './PoolsRepository';
 import HashratesRepository from './HashratesRepository';
+import { escape } from 'mysql2';
 
 class BlocksRepository {
   /**
@@ -235,7 +236,7 @@ class BlocksRepository {
   public async $getBlocksByPool(slug: string, startHeight?: number): Promise<object[]> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
-      throw new Error(`This mining pool does not exist`);
+      throw new Error('This mining pool does not exist ' + escape(slug));
     }
 
     const params: any[] = [];

backend/src/repositories/HashratesRepository.ts

@@ -1,3 +1,4 @@
+import { escape } from 'mysql2';
 import { Common } from '../api/common';
 import DB from '../database';
 import logger from '../logger';
@@ -105,7 +106,7 @@ class HashratesRepository {
   public async $getPoolWeeklyHashrate(slug: string): Promise<any[]> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
-      throw new Error(`This mining pool does not exist`);
+      throw new Error('This mining pool does not exist ' + escape(slug));
     }
 
     // Find hashrate boundaries

backend/src/repositories/PoolsRepository.ts

@@ -78,7 +78,6 @@ class PoolsRepository {
       const [rows]: any[] = await DB.query(query, [slug]);
 
       if (rows.length < 1) {
-        logger.debug(`This slug does not match any known pool`);
         return null;
       }
 

backend/src/routes.ts

@@ -778,9 +778,9 @@ class Routes {
       const endIndex = Math.min(startingIndex + 10, txIds.length);
       for (let i = startingIndex; i < endIndex; i++) {
         try {
-          const transaction = await transactionUtils.$getTransactionExtended(txIds[i], true);
+          const transaction = await transactionUtils.$getTransactionExtended(txIds[i], true, true);
           transactions.push(transaction);
-          loadingIndicators.setProgress('blocktxs-' + req.params.hash, (i + 1) / endIndex * 100);
+          loadingIndicators.setProgress('blocktxs-' + req.params.hash, (i - startingIndex + 1) / (endIndex - startingIndex) * 100);
         } catch (e) {
           logger.debug('getBlockTransactions error: ' + (e instanceof Error ? e.message : e));
         }

frontend/src/app/app-routing.module.ts

@@ -500,7 +500,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             },
             {
               path: '**',
-              redirectTo: 'all'
+              redirectTo: 'featured'
             }
           ]
         },

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

@@ -66,9 +66,14 @@
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
-        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+
-          <span class="skeleton-loader"></span>
+        <ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
-        </div>
+          <div class="header-bg box" style="padding: 12px; margin-bottom: 10px;">
+            <div class="progress progress-dark">
+              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
+            </div>
+          </div>
+        </ng-container>
 
         <div class="header-bg box">
           <div class="row" style="height: 107px;">
@@ -81,13 +86,6 @@
           </div>
         </div>
 
-        <ng-container *ngIf="addressLoadingStatus$ | async as addressLoadingStatus">
-          <br>
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
-          </div>
-        </ng-container>
-
       </ng-template>
 
       <ng-template [ngIf]="retryLoadMore">
@@ -155,3 +153,9 @@
 <ng-template #confidentialTd>
   <td i18n="shared.confidential">Confidential</td>
 </ng-template>
+
+<ng-template #headerLoader>
+  <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+    <span class="skeleton-loader"></span>
+  </div>
+</ng-template>

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

@@ -200,9 +200,13 @@
     <ng-template [ngIf]="isLoadingTransactions">
       <div class="text-center mb-4" class="tx-skeleton">
 
-        <div class="header-bg box">
+        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
-          <span class="skeleton-loader"></span>
+          <div class="header-bg box">
-        </div>
+            <div class="progress progress-dark" style="margin: 4px; height: 14px;">
+              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
+            </div>
+          </div>
+        </ng-container>
 
         <div class="header-bg box">
           <div class="row">
@@ -215,14 +219,6 @@
             </div>
           </div>
         </div>
-
-        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus">
-          <br>
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
-          </div>
-        </ng-container>
-
       </div>
     </ng-template>
     <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
@@ -281,6 +277,12 @@
     </div>
   </ng-template>
 
+  <ng-template #headerLoader>
+    <div class="header-bg box">
+      <span class="skeleton-loader"></span>
+    </div>
+  </ng-template>
+
 </div>
 
 <br>

frontend/src/app/components/master-page/master-page.component.html

@@ -38,7 +38,7 @@
         <a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
-        <a class="nav-link" [routerLink]="['/graphs/mempool' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
       <li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
         <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>

frontend/src/app/components/reward-stats/reward-stats.component.html

@@ -8,7 +8,7 @@
           <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
         </div>
         <span class="fiat">
-          <app-fiat [value]="rewardStats.totalReward"></app-fiat>
+          <app-fiat [value]="rewardStats.totalReward" digitsInfo="1.0-0" ></app-fiat>
         </span>
       </div>
     </div>
@@ -26,7 +26,7 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Reward Per Tx</h5>
+      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
       <div class="card-text" i18n-ngbTooltip="mining.average-fee"
         ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
         <div class="fee-text">{{ rewardStats.feePerTx | amountShortener: 2 }}

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

@@ -125,7 +125,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
         }),
         switchMap(() => {
           let transactionObservable$: Observable<Transaction>;
-          if (history.state.data) {
+          if (history.state.data && history.state.data.fee !== -1) {
             transactionObservable$ = of(history.state.data);
           } else {
             transactionObservable$ = this.electrsApiService

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

@@ -60,7 +60,10 @@
                     </ng-container>
                     <ng-container *ngSwitchDefault>
                       <ng-template [ngIf]="!vin.prevout" [ngIfElse]="defaultAddress">
-                        <span>{{ vin.issuance ? 'Issuance' : 'UNKNOWN' }}</span>
+                        <span *ngIf="vin.lazy; else defaultNoPrevout" class="skeleton-loader"></span>
+                        <ng-template #defaultNoPrevout>
+                          <span>{{ vin.issuance ? 'Issuance' : 'UNKNOWN' }}</span>
+                        </ng-template>
                       </ng-template>
                       <ng-template #defaultAddress>
                         <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
@@ -87,6 +90,7 @@
                     </ng-template>
                   </ng-template>
                   <ng-template #defaultOutput>
+                    <span *ngIf="vin.lazy" class="skeleton-loader"></span>
                     <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
                   </ng-template>
                 </td>
@@ -141,7 +145,7 @@
             </ng-template>
             <tr *ngIf="tx.vin.length > 12 && tx['@vinLimit']">
               <td colspan="3" class="text-center">
-                <button class="btn btn-sm btn-primary mt-2" (click)="tx['@vinLimit'] = false;"><span i18n="show-all">Show all</span> ({{ tx.vin.length - 10 }})</button>
+                <button class="btn btn-sm btn-primary mt-2" (click)="loadMoreInputs(tx);"><span i18n="show-all">Show all</span> ({{ tx.vin.length - 10 }})</button>
               </td>
             </tr>
           </tbody>
@@ -261,9 +265,10 @@
     </div>
 
     <div class="summary">
-      <div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase">
+      <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>
       </div>
+      <div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show all inputs to reveal fee data</div>
 
       <div class="float-right">
         <ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">

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

@@ -139,4 +139,10 @@ h2 {
 
 .addr-right {
 	font-family: monospace;
-}
+}
+
+.grey-info-text {
+	color:#6c757d;
+	font-style: italic;
+	font-size: 12px;
+}

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

@@ -175,6 +175,17 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     }
   }
 
+  loadMoreInputs(tx: Transaction) {
+    tx['@vinLimit'] = false;
+
+    this.electrsApiService.getTransaction$(tx.txid)
+      .subscribe((newTx) => {
+        tx.vin = newTx.vin;
+        tx.fee = newTx.fee;
+        this.ref.markForCheck();
+      });
+  }
+
   ngOnDestroy() {
     this.outspendsSubscription.unsubscribe();
   }

frontend/src/app/docs/api-docs/api-docs-data.ts

@@ -13,6 +13,7 @@ const showJsExamplesDefault = { "": true, "testnet": true, "signet": true, "liqu
 const showJsExamplesDefaultFalse = { "": false, "testnet": false, "signet": false, "liquid": false, "liquidtestnet": false, "bisq": false };
 
 export const wsApiDocsData = {
+  showJsExamples: showJsExamplesDefault,
   codeTemplate: {
     curl: `/api/v1/ws`,
     commonJS: `
@@ -2967,7 +2968,7 @@ export const restApiDocsData = [
     "weight": 3931749,
     "previousblockhash": "00000000000000000002b5b2afc1c62e61e53f966b965a9a8ce99112e24066ae"
   },
-  ...        
+  ...
 ]`,
         },
         codeSampleTestnet: {
@@ -3047,7 +3048,7 @@ export const restApiDocsData = [
     "emptyBlocks": 0,
     "slug": "antpool"
   },
-  ...  
+  ...
   "oldestIndexedBlockTimestamp": 1231006505,
   "blockCount": 1005,
   "lastEstimatedHashrate": 230086716765559200000

frontend/src/app/docs/api-docs/api-docs.component.html

@@ -101,7 +101,7 @@
             <div class="subtitle" i18n>Description</div>
             <div i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-blocks</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</div>
           </div>
-          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" ></app-code-template>
+          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" [showCodeExample]="wsDocs.showJsExamples"></app-code-template>
         </div>
       </div>
     </div>

frontend/src/app/graphs/graphs.routing.module.ts

@@ -7,6 +7,7 @@ import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weigh
 import { GraphsComponent } from '../components/graphs/graphs.component';
 import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
 import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
+import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
 import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
 import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
@@ -17,10 +18,15 @@ import { StatisticsComponent } from '../components/statistics/statistics.compone
 import { TelevisionComponent } from '../components/television/television.component';
 import { DashboardComponent } from '../dashboard/dashboard.component';
 
+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+const isLiquid = browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid';
+
 const routes: Routes = [
   {
     path: '',
-    component: MasterPageComponent,
+    component: isLiquid ? LiquidMasterPageComponent : MasterPageComponent,
     children: [
       {
         path: 'mining/pool/:slug',
@@ -82,6 +88,10 @@ const routes: Routes = [
             path: 'mining/block-sizes-weights',
             component: BlockSizesWeightsGraphComponent,
           },
+          {
+            path: '',
+            redirectTo: 'mempool',
+          },
         ]
       },
       {

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

@@ -54,6 +54,8 @@ export interface Vin {
   // Elements
   is_pegin?: boolean;
   issuance?: Issuance;
+  // Custom
+  lazy?: boolean;
 }
 
 interface Issuance {

frontend/src/locale/messages.xlf

@@ -251,7 +251,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">3,5</context>
+          <context context-type="linenumber">3</context>
         </context-group>
         <note priority="1" from="description">shared.address</note>
       </trans-unit>
@@ -263,7 +263,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">31,32</context>
+          <context context-type="linenumber">31</context>
         </context-group>
         <note priority="1" from="description">address.total-received</note>
       </trans-unit>
@@ -279,7 +279,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">35,36</context>
+          <context context-type="linenumber">35</context>
         </context-group>
         <note priority="1" from="description">address.total-sent</note>
       </trans-unit>
@@ -291,7 +291,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">40,41</context>
+          <context context-type="linenumber">40</context>
         </context-group>
         <note priority="1" from="description">address.balance</note>
       </trans-unit>
@@ -956,7 +956,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">239,241</context>
+          <context context-type="linenumber">245,247</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8fe73a4787b8068b2ba61f54ab7e0f9af2ea1fc9" datatype="html">
@@ -1008,7 +1008,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">266,267</context>
+          <context context-type="linenumber">272,273</context>
         </context-group>
         <note priority="1" from="description">Transaction singular confirmation count</note>
         <note priority="1" from="meaning">shared.confirmation-count.singular</note>
@@ -1036,7 +1036,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">267,268</context>
+          <context context-type="linenumber">273,274</context>
         </context-group>
         <note priority="1" from="description">Transaction plural confirmation count</note>
         <note priority="1" from="meaning">shared.confirmation-count.plural</note>
@@ -1434,24 +1434,23 @@
         <source>Unconfidential</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">23,24</context>
+          <context context-type="linenumber">23</context>
         </context-group>
         <note priority="1" from="description">address.unconfidential</note>
       </trans-unit>
       <trans-unit id="714e34125b3343df73f19ec800b43be95217d5d4" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="of {{ txCount | number }} transaction&lt;/ng-template&gt;"/> of <x id="INTERPOLATION_1" equiv-text="{{ txCount | number }}"/> transaction</source>
+        <source><x id="INTERPOLATION" equiv-text="{{ (transactions?.length | number) || &apos;?&apos; }}"/> of <x id="INTERPOLATION_1" equiv-text="{{ txCount | number }}"/> transaction</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">60,61</context>
+          <context context-type="linenumber">60</context>
         </context-group>
         <note priority="1" from="description">X of X Address Transaction</note>
       </trans-unit>
       <trans-unit id="0f6ada0cfb60aefd8f77f8a22349850ce186d666" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="of {{ txCount | number }} transactions&lt;/ng-template&gt;
+        <source><x id="INTERPOLATION" equiv-text="{{ (transactions?.length | number) || &apos;?&apos; }}"/> of <x id="INTERPOLATION_1" equiv-text="{{ txCount | number }}"/> transactions</source>
-      &lt;/h2&gt;"/> of <x id="INTERPOLATION_1" equiv-text="{{ txCount | number }}"/> transactions</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">61,62</context>
+          <context context-type="linenumber">61</context>
         </context-group>
         <note priority="1" from="description">X of X Address Transactions (Plural)</note>
       </trans-unit>
@@ -1459,15 +1458,15 @@
         <source>Error loading address data.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">132,134</context>
+          <context context-type="linenumber">130</context>
         </context-group>
         <note priority="1" from="description">address.error.loading-address-data</note>
       </trans-unit>
       <trans-unit id="49cef95661d86f4341788ce40068d58801adc6e6" datatype="html">
-        <source><x id="START_ITALIC_TEXT" ctype="x-i" equiv-text="There many transactions on this address, more than your backend can handle. See more on &lt;a href=&quot;/docs/faq#a"/>There many transactions on this address, more than your backend can handle. See more on <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;/docs/faq#address-lookup-issues&quot;&gt;"/>setting up a stronger backend<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>.<x id="CLOSE_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;/i&gt;"/><x id="LINE_BREAK" ctype="lb"/><x id="LINE_BREAK" ctype="lb"/> Consider viewing this address on the official Mempool website instead: </source>
+        <source><x id="START_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;i&gt;"/>There many transactions on this address, more than your backend can handle. See more on <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;/docs/faq#address-lookup-issues&quot;&gt;"/>setting up a stronger backend<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>.<x id="CLOSE_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;/i&gt;"/><x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br&gt;"/><x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br&gt;"/> Consider viewing this address on the official Mempool website instead: </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">137,140</context>
+          <context context-type="linenumber">135,138</context>
         </context-group>
         <note priority="1" from="description">Electrum server limit exceeded error</note>
       </trans-unit>
@@ -1475,7 +1474,7 @@
         <source>Confidential</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
-          <context context-type="linenumber">156,158</context>
+          <context context-type="linenumber">154</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/amount/amount.component.html</context>
@@ -1491,7 +1490,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">274,276</context>
+          <context context-type="linenumber">280,282</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
@@ -2110,7 +2109,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">259</context>
+          <context context-type="linenumber">265</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
@@ -2262,7 +2261,7 @@
         <source>Error loading block data.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
-          <context context-type="linenumber">278,288</context>
+          <context context-type="linenumber">274,280</context>
         </context-group>
         <note priority="1" from="description">block.error.loading-block-data</note>
       </trans-unit>
@@ -2891,11 +2890,11 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">141,144</context>
+          <context context-type="linenumber">144,147</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">249,251</context>
+          <context context-type="linenumber">255,257</context>
         </context-group>
         <note priority="1" from="description">show-all</note>
       </trans-unit>
@@ -3098,10 +3097,6 @@
           <context context-type="sourcefile">src/app/components/reward-stats/reward-stats.component.html</context>
           <context context-type="linenumber">16,18</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/reward-stats/reward-stats.component.html</context>
-          <context context-type="linenumber">29,31</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/reward-stats/reward-stats.component.html</context>
           <context context-type="linenumber">53,56</context>
@@ -3133,6 +3128,14 @@
         <note priority="1" from="description">sat/vB</note>
         <note priority="1" from="meaning">shared.sat-vbyte</note>
       </trans-unit>
+      <trans-unit id="f9bc2ce34cf7fc23c09b4cea1d92cc75ef4d6e71" datatype="html">
+        <source>Average Fee</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/reward-stats/reward-stats.component.html</context>
+          <context context-type="linenumber">29,31</context>
+        </context-group>
+        <note priority="1" from="description">mining.average-fee</note>
+      </trans-unit>
       <trans-unit id="8be96dc461529381c812f64962c62f4228d01470" datatype="html">
         <source>Fee paid on average for each transaction in the past 144 blocks</source>
         <context-group purpose="location">
@@ -3442,7 +3445,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">270,273</context>
+          <context context-type="linenumber">276,279</context>
         </context-group>
         <note priority="1" from="description">Transaction unconfirmed state</note>
         <note priority="1" from="meaning">transaction.unconfirmed</note>
@@ -3559,7 +3562,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">259,260</context>
+          <context context-type="linenumber">265,266</context>
         </context-group>
         <note priority="1" from="description">sat</note>
         <note priority="1" from="meaning">shared.sat</note>
@@ -3601,7 +3604,7 @@
         <source>ScriptSig (ASM)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">97,99</context>
+          <context context-type="linenumber">100,102</context>
         </context-group>
         <note priority="1" from="description">ScriptSig (ASM)</note>
         <note priority="1" from="meaning">transactions-list.scriptsig.asm</note>
@@ -3610,7 +3613,7 @@
         <source>ScriptSig (HEX)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">101,104</context>
+          <context context-type="linenumber">104,107</context>
         </context-group>
         <note priority="1" from="description">ScriptSig (HEX)</note>
         <note priority="1" from="meaning">transactions-list.scriptsig.hex</note>
@@ -3619,7 +3622,7 @@
         <source>Witness</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">106,108</context>
+          <context context-type="linenumber">109,111</context>
         </context-group>
         <note priority="1" from="description">transactions-list.witness</note>
       </trans-unit>
@@ -3627,7 +3630,7 @@
         <source>P2SH redeem script</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">110,111</context>
+          <context context-type="linenumber">113,114</context>
         </context-group>
         <note priority="1" from="description">transactions-list.p2sh-redeem-script</note>
       </trans-unit>
@@ -3635,7 +3638,7 @@
         <source>P2TR tapscript</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">114,116</context>
+          <context context-type="linenumber">117,119</context>
         </context-group>
         <note priority="1" from="description">transactions-list.p2tr-tapscript</note>
       </trans-unit>
@@ -3643,7 +3646,7 @@
         <source>P2WSH witness script</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">116,118</context>
+          <context context-type="linenumber">119,121</context>
         </context-group>
         <note priority="1" from="description">transactions-list.p2wsh-witness-script</note>
       </trans-unit>
@@ -3651,7 +3654,7 @@
         <source>nSequence</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">121,123</context>
+          <context context-type="linenumber">124,126</context>
         </context-group>
         <note priority="1" from="description">transactions-list.nsequence</note>
       </trans-unit>
@@ -3659,7 +3662,7 @@
         <source>Previous output script</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">126,127</context>
+          <context context-type="linenumber">129,130</context>
         </context-group>
         <note priority="1" from="description">transactions-list.previous-output-script</note>
       </trans-unit>
@@ -3667,7 +3670,7 @@
         <source>Previous output type</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">130,131</context>
+          <context context-type="linenumber">133,134</context>
         </context-group>
         <note priority="1" from="description">transactions-list.previous-output-type</note>
       </trans-unit>
@@ -3675,7 +3678,7 @@
         <source>Peg-out to <x id="START_TAG_NG_CONTAINER" ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;pegOutLink&quot;&gt;"/><x id="CLOSE_TAG_NG_CONTAINER" ctype="x-ng_container" equiv-text="&lt;/ng-contain"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">166,167</context>
+          <context context-type="linenumber">172,173</context>
         </context-group>
         <note priority="1" from="description">transactions-list.peg-out-to</note>
       </trans-unit>
@@ -3683,7 +3686,7 @@
         <source>ScriptPubKey (ASM)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">227,229</context>
+          <context context-type="linenumber">233,235</context>
         </context-group>
         <note priority="1" from="description">ScriptPubKey (ASM)</note>
         <note priority="1" from="meaning">transactions-list.scriptpubkey.asm</note>
@@ -3692,7 +3695,7 @@
         <source>ScriptPubKey (HEX)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">231,234</context>
+          <context context-type="linenumber">237,240</context>
         </context-group>
         <note priority="1" from="description">ScriptPubKey (HEX)</note>
         <note priority="1" from="meaning">transactions-list.scriptpubkey.hex</note>

frontend/src/styles.scss

@@ -655,6 +655,10 @@ h1, h2, h3 {
   background-color: #24273e;
 }
 
+.progress-light {
+  background-color: #2e324e;
+}
+
 .mt-2-5, .my-2-5 {
   margin-top: 0.75rem !important;
 }