Merge branch 'master' into nymkappa/bugfix/reindex-when-fast-forward

2024-11-20 10:21:52 +01:00 · 2022-05-23 21:08:54 -07:00 · 2022-05-23 21:08:54 -07:00 · 9fbd014df9
commit 9fbd014df9
parent 449d6b17aa b4beb29f31
61 changed files with 45317 additions and 45794 deletions
--- a/backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts
+++ b/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>;
--- a/backend/src/api/bitcoin/bitcoin-api.ts
+++ b/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,12 +193,9 @@ class BitcoinApi implements AbstractBitcoinApi {
    }

    if (addPrevout) {
-      if (transaction.confirmations) {
-        esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction);
-      } else {
-        esploraTransaction = await this.$appendMempoolFeeData(esploraTransaction);
-        esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction);
-      }
+      esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction, false, lazyPrevouts);
+    } else if (!transaction.confirmations) {
+      esploraTransaction = await this.$appendMempoolFeeData(esploraTransaction);
    }

    return esploraTransaction;
@ -271,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);
-      vin.prevout = innerTx.vout[vin.vout];
-      this.addInnerScriptsToVin(vin);
-      totalIn += innerTx.vout[vin.vout].value;
+
+    for (let i = 0; i < transaction.vin.length; i++) {
+      if (lazyPrevouts && i > 12) {
+        transaction.vin[i].lazy = true;
+        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;
  }

--- a/backend/src/api/bitcoin/esplora-api.interface.ts
+++ b/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 {
--- a/backend/src/api/mining.ts
+++ b/backend/src/api/mining.ts
@ -6,6 +6,7 @@ import bitcoinClient from './bitcoin/bitcoin-client';
 import logger from '../logger';
 import { Common } from './common';
 import loadingIndicators from './loading-indicators';
+import { escape } from 'mysql2';

 class Mining {
  constructor() {
@ -106,7 +107,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);
--- a/backend/src/api/transaction-utils.ts
+++ b/backend/src/api/transaction-utils.ts
@ -21,8 +21,8 @@ class TransactionUtils {
    };
  }

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

--- a/backend/src/repositories/BlocksRepository.ts
+++ b/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[] = [];
--- a/backend/src/repositories/HashratesRepository.ts
+++ b/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
--- a/backend/src/repositories/PoolsRepository.ts
+++ b/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;
      }

--- a/backend/src/routes.ts
+++ b/backend/src/routes.ts
@ -645,7 +645,7 @@ class Routes {
      res.header('Pragma', 'public');
      res.header('Cache-control', 'public');
      res.header('X-total-count', blockCount.toString());
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blockFees);
    } catch (e) {
      res.status(500).send(e instanceof Error ? e.message : e);
@ -659,7 +659,7 @@ class Routes {
      res.header('Pragma', 'public');
      res.header('Cache-control', 'public');
      res.header('X-total-count', blockCount.toString());
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json(blockRewards);
    } catch (e) {
      res.status(500).send(e instanceof Error ? e.message : e);
@ -672,7 +672,7 @@ class Routes {
      const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
      res.header('Pragma', 'public');
      res.header('Cache-control', 'public');
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json({
        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
        blockFeeRates: blockFeeRates,
@ -690,7 +690,7 @@ class Routes {
      res.header('Pragma', 'public');
      res.header('Cache-control', 'public');
      res.header('X-total-count', blockCount.toString());
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
      res.json({
        sizes: blockSizes,
        weights: blockWeights
@ -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));
        }
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -2,141 +2,23 @@ import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-bro
 import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { NgxEchartsModule } from 'ngx-echarts';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
-
-import { StartComponent } from './components/start/start.component';
 import { ElectrsApiService } from './services/electrs-api.service';
-import { TransactionComponent } from './components/transaction/transaction.component';
-import { TransactionsListComponent } from './components/transactions-list/transactions-list.component';
 import { StateService } from './services/state.service';
-import { BlockComponent } from './components/block/block.component';
-import { AddressComponent } from './components/address/address.component';
-import { SearchFormComponent } from './components/search-form/search-form.component';
-import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { WebsocketService } from './services/websocket.service';
-import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
-import { MasterPageComponent } from './components/master-page/master-page.component';
-import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
-import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
-import { AboutComponent } from './components/about/about.component';
-import { TelevisionComponent } from './components/television/television.component';
-import { StatisticsComponent } from './components/statistics/statistics.component';
-import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
-import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
-import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
-import { IncomingTransactionsGraphComponent } from './components/incoming-transactions-graph/incoming-transactions-graph.component';
-import { TimeSpanComponent } from './components/time-span/time-span.component';
 import { SeoService } from './services/seo.service';
-import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component';
-import { PoolRankingComponent } from './components/pool-ranking/pool-ranking.component';
-import { PoolComponent } from './components/pool/pool.component';
-import { LbtcPegsGraphComponent } from './components/lbtc-pegs-graph/lbtc-pegs-graph.component';
-import { AssetComponent } from './components/asset/asset.component';
-import { AssetsComponent } from './components/assets/assets.component';
-import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
-import { StatusViewComponent } from './components/status-view/status-view.component';
 import { SharedModule } from './shared/shared.module';
-import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
-import { FeesBoxComponent } from './components/fees-box/fees-box.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { DifficultyComponent } from './components/difficulty/difficulty.component';
-import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload } from '@fortawesome/free-solid-svg-icons';
-import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
-import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
-import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { LanguageService } from './services/language.service';
-import { SponsorComponent } from './components/sponsor/sponsor.component';
-import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
-import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
-import { AssetCirculationComponent } from './components/asset-circulation/asset-circulation.component';
-import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
-import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
-import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
-import { MiningStartComponent } from './components/mining-start/mining-start.component';
-import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
-import { GraphsComponent } from './components/graphs/graphs.component';
-import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
-import { BlocksList } from './components/blocks-list/blocks-list.component';
-import { RewardStatsComponent } from './components/reward-stats/reward-stats.component';
-import { DataCyDirective } from './data-cy.directive';
-import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
-import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
-import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
-import { LoadingIndicatorComponent } from './components/loading-indicator/loading-indicator.component';
-import { IndexingProgressComponent } from './components/indexing-progress/indexing-progress.component';
-import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weights-graph/block-sizes-weights-graph.component';

@NgModule({
  declarations: [
    AppComponent,
-    AboutComponent,
-    MasterPageComponent,
-    BisqMasterPageComponent,
-    LiquidMasterPageComponent,
-    TelevisionComponent,
-    StartComponent,
-    StatisticsComponent,
-    TransactionComponent,
-    BlockComponent,
-    TransactionsListComponent,
-    AddressComponent,
-    LatestBlocksComponent,
-    SearchFormComponent,
-    TimeSpanComponent,
-    AddressLabelsComponent,
-    FooterComponent,
-    MempoolBlockComponent,
-    FeeDistributionGraphComponent,
-    IncomingTransactionsGraphComponent,
-    MempoolGraphComponent,
-    PoolRankingComponent,
-    PoolComponent,
-    LbtcPegsGraphComponent,
-    AssetComponent,
-    AssetsComponent,
-    StatusViewComponent,
-    FeesBoxComponent,
-    DashboardComponent,
-    DifficultyComponent,
-    TermsOfServiceComponent,
-    PrivacyPolicyComponent,
-    TrademarkPolicyComponent,
-    SponsorComponent,
-    PushTransactionComponent,
-    AssetsNavComponent,
-    AssetsFeaturedComponent,
-    AssetGroupComponent,
-    AssetCirculationComponent,
-    MiningDashboardComponent,
-    HashrateChartComponent,
-    HashrateChartPoolsComponent,
-    MiningStartComponent,
-    AmountShortenerPipe,
-    GraphsComponent,
-    DifficultyAdjustmentsTable,
-    BlocksList,
-    DataCyDirective,
-    RewardStatsComponent,
-    BlockFeesGraphComponent,
-    BlockRewardsGraphComponent,
-    BlockFeeRatesGraphComponent,
-    LoadingIndicatorComponent,
-    IndexingProgressComponent,
-    BlockSizesWeightsGraphComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
@ -144,14 +26,7 @@ import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weight
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
-    InfiniteScrollModule,
-    NgbTypeaheadModule,
-    NgbModule,
-    FontAwesomeModule,
    SharedModule,
-    NgxEchartsModule.forRoot({
-      echarts: () => import('echarts')
-    })
  ],
  providers: [
    ElectrsApiService,
@ -167,41 +42,4 @@ import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weight
  ],
  bootstrap: [AppComponent]
 })
-export class AppModule {
-  constructor(library: FaIconLibrary) {
-    library.addIcons(faInfoCircle);
-    library.addIcons(faChartArea);
-    library.addIcons(faTv);
-    library.addIcons(faTachometerAlt);
-    library.addIcons(faCubes);
-    library.addIcons(faHammer);
-    library.addIcons(faCogs);
-    library.addIcons(faThList);
-    library.addIcons(faList);
-    library.addIcons(faTachometerAlt);
-    library.addIcons(faDatabase);
-    library.addIcons(faSearch);
-    library.addIcons(faLink);
-    library.addIcons(faBolt);
-    library.addIcons(faTint);
-    library.addIcons(faFilter);
-    library.addIcons(faAngleDown);
-    library.addIcons(faAngleUp);
-    library.addIcons(faExchangeAlt);
-    library.addIcons(faAngleDoubleUp);
-    library.addIcons(faAngleDoubleDown);
-    library.addIcons(faChevronDown);
-    library.addIcons(faFileAlt);
-    library.addIcons(faRedoAlt);
-    library.addIcons(faArrowAltCircleRight);
-    library.addIcons(faExternalLinkAlt);
-    library.addIcons(faSortUp);
-    library.addIcons(faCaretUp);
-    library.addIcons(faCaretDown);
-    library.addIcons(faAngleRight);
-    library.addIcons(faAngleLeft);
-    library.addIcons(faBook);
-    library.addIcons(faListUl);
-    library.addIcons(faDownload);
-  }
-}
+export class AppModule { }
--- a/frontend/src/app/bisq/bisq.module.ts
+++ b/frontend/src/app/bisq/bisq.module.ts
@ -24,6 +24,7 @@ import { BisqAddressComponent } from './bisq-address/bisq-address.component';
 import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
 import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
 import { BisqTradesComponent } from './bisq-trades/bisq-trades.component';
+import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
@ -46,6 +47,7 @@ import { BisqTradesComponent } from './bisq-trades/bisq-trades.component';
    BisqMainDashboardComponent,
  ],
  imports: [
+    CommonModule,
    BisqRoutingModule,
    SharedModule,
    NgbPaginationModule,
--- a/frontend/src/app/components/address/address.component.html
+++ b/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>
-        </div>
+
+        <ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
+          <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>
--- a/frontend/src/app/components/block/block.component.html
+++ b/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">
-          <span class="skeleton-loader"></span>
-        </div>
+        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
+          <div class="header-bg box">
+            <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>
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/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>
--- a/frontend/src/app/components/mining-start/mining-start.component.html
+++ b/frontend/src/app/components/mining-start/mining-start.component.html
@ -1 +0,0 @@
-<router-outlet></router-outlet>
--- a/frontend/src/app/components/mining-start/mining-start.component.ts
+++ b/frontend/src/app/components/mining-start/mining-start.component.ts
@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-mining-start',
-  templateUrl: './mining-start.component.html',
-})
-export class MiningStartComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
--- a/frontend/src/app/components/reward-stats/reward-stats.component.html
+++ b/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 }}
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/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
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/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">
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/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;
+}
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/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();
  }
--- a/frontend/src/app/docs/api-docs/api-docs-data.ts
+++ b/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
@ -3196,7 +3197,7 @@ export const restApiDocsData = [
    fragment: "get-mining-pool-hashrates",
    title: "GET Mining Pool Hashrates",
    description: {
-      default: "<p>Returns average hashrates (and share of total hashrate) of mining pools active in the specified trailing <code>:timePeriod</code>, in descending order of hashrate.</p><p>Leave <code>:timePeriod</code> unspecified to get all available data, or specify any of the following time periods: " + miningTimeIntervals + ".</p>"
+      default: "<p>Returns average hashrates (and share of total hashrate) of mining pools active in the specified trailing <code>:timePeriod</code>, in descending order of hashrate.</p><p>Leave <code>:timePeriod</code> unspecified to get all available data, or specify any of the following time periods: " + miningTimeIntervals.substr(52) + ".</p>"
    },
    urlString: "/v1/mining/hashrate/pools/[:timePeriod]",
    showConditions: bitcoinNetworks,
@ -3634,7 +3635,7 @@ export const restApiDocsData = [
    fragment: "get-hashrate",
    title: "GET Hashrate",
    description: {
-      default: "<p>Returns network-wide hashrate and difficulty figures over the specified trailing <code>:timePeriod</code>:</p><ul><li>Current hashrate</li><li>Current difficulty</li><li>Historical daily average hashrates</li><li>Historical difficulty</li></ul><p>Valid values for <code>:timePeriod</code> are " + miningTimeIntervals + ". If no time interval is specified, all available data is returned.</p><p>Be sure that <code>INDEXING_BLOCKS_AMOUNT</code> is set properly in your backend config so that enough blocks are indexed to properly serve your request.</p>"
+      default: "<p>Returns network-wide hashrate and difficulty figures over the specified trailing <code>:timePeriod</code>:</p><ul><li>Current (real-time) hashrate</li><li>Current (real-time) difficulty</li><li>Historical daily average hashrates</li><li>Historical difficulty</li></ul><p>Valid values for <code>:timePeriod</code> are " + miningTimeIntervals.substr(52) + ". If no time interval is specified, all available data is returned.</p><p>Be sure that <code>INDEXING_BLOCKS_AMOUNT</code> is set properly in your backend config so that enough blocks are indexed to properly serve your request.</p>"
    },
    urlString: "/v1/mining/hashrate/[:timePeriod]",
    showConditions: bitcoinNetworks,
--- a/frontend/src/app/docs/api-docs/api-docs.component.html
+++ b/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>
--- a/frontend/src/app/graphs/graphs.module.ts
+++ b/frontend/src/app/graphs/graphs.module.ts
@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { GraphsRoutingModule } from './graphs.routing.module';
+import { SharedModule } from '../shared/shared.module';
+
+import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
+import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
+import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
+import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weights-graph/block-sizes-weights-graph.component';
+import { FeeDistributionGraphComponent } from '../components/fee-distribution-graph/fee-distribution-graph.component';
+import { IncomingTransactionsGraphComponent } from '../components/incoming-transactions-graph/incoming-transactions-graph.component';
+import { MempoolGraphComponent } from '../components/mempool-graph/mempool-graph.component';
+import { LbtcPegsGraphComponent } from '../components/lbtc-pegs-graph/lbtc-pegs-graph.component';
+import { GraphsComponent } from '../components/graphs/graphs.component';
+import { StatisticsComponent } from '../components/statistics/statistics.component';
+import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
+import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
+import { PoolComponent } from '../components/pool/pool.component';
+import { TelevisionComponent } from '../components/television/television.component';
+import { DashboardComponent } from '../dashboard/dashboard.component';
+import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
+import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
+import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    DashboardComponent,
+    MempoolBlockComponent,
+
+    MiningDashboardComponent,
+    PoolComponent,
+    PoolRankingComponent,
+    TelevisionComponent,
+
+    StatisticsComponent,
+    GraphsComponent,
+    BlockFeesGraphComponent,
+    BlockRewardsGraphComponent,
+    BlockFeeRatesGraphComponent,
+    BlockSizesWeightsGraphComponent,
+    FeeDistributionGraphComponent,
+    IncomingTransactionsGraphComponent,
+    MempoolGraphComponent,
+    LbtcPegsGraphComponent,
+    HashrateChartComponent,
+    HashrateChartPoolsComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    GraphsRoutingModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    })
+  ]
+})
+export class GraphsModule { }
--- a/frontend/src/app/graphs/graphs.routing.module.ts
+++ b/frontend/src/app/graphs/graphs.routing.module.ts
@ -0,0 +1,116 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
+import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
+import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
+import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weights-graph/block-sizes-weights-graph.component';
+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';
+import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
+import { PoolComponent } from '../components/pool/pool.component';
+import { StartComponent } from '../components/start/start.component';
+import { StatisticsComponent } from '../components/statistics/statistics.component';
+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: isLiquid ? LiquidMasterPageComponent : MasterPageComponent,
+    children: [
+      {
+        path: 'mining/pool/:slug',
+        component: PoolComponent,
+      },
+      {
+        path: 'mining',
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: MiningDashboardComponent,
+          },
+        ]
+      },
+      {
+        path: 'mempool-block/:id',
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: MempoolBlockComponent,
+          },
+        ]
+      },
+      {
+        path: 'graphs',
+        component: GraphsComponent,
+        children: [
+          {
+            path: 'mempool',
+            component: StatisticsComponent,
+          },
+          {
+            path: 'mining/hashrate-difficulty',
+            component: HashrateChartComponent,
+          },
+          {
+            path: 'mining/pools-dominance',
+            component: HashrateChartPoolsComponent,
+          },
+          {
+            path: 'mining/pools',
+            component: PoolRankingComponent,
+          },
+          {
+            path: 'mining/block-fees',
+            component: BlockFeesGraphComponent,
+          },
+          {
+            path: 'mining/block-rewards',
+            component: BlockRewardsGraphComponent,
+          },
+          {
+            path: 'mining/block-fee-rates',
+            component: BlockFeeRatesGraphComponent,
+          },
+          {
+            path: 'mining/block-sizes-weights',
+            component: BlockSizesWeightsGraphComponent,
+          },
+          {
+            path: '',
+            redirectTo: 'mempool',
+          },
+        ]
+      },
+      {
+        path: '',
+        component: StartComponent,
+        children: [{
+          path: '',
+          component: DashboardComponent,
+        }]
+      },
+    ]
+  },
+  {
+    path: 'tv',
+    component: TelevisionComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class GraphsRoutingModule { }
--- a/frontend/src/app/interfaces/electrs.interface.ts
+++ b/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 {
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@ -1,5 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
+  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload } from '@fortawesome/free-solid-svg-icons';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { MasterPageComponent } from '../components/master-page/master-page.component';
+import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
+import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
+import { AboutComponent } from '../components/about/about.component';
 import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
 import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe';
 import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
@ -31,6 +42,38 @@ import { AmountComponent } from '../components/amount/amount.component';
 import { RouterModule } from '@angular/router';
 import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';

+import { StartComponent } from '../components/start/start.component';
+import { TransactionComponent } from '../components/transaction/transaction.component';
+import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
+import { BlockComponent } from '../components/block/block.component';
+import { AddressComponent } from '../components/address/address.component';
+import { SearchFormComponent } from '../components/search-form/search-form.component';
+import { LatestBlocksComponent } from '../components/latest-blocks/latest-blocks.component';
+import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
+import { FooterComponent } from '../components/footer/footer.component';
+import { TimeSpanComponent } from '../components/time-span/time-span.component';
+import { AssetComponent } from '../components/asset/asset.component';
+import { AssetsComponent } from '../components/assets/assets.component';
+import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
+import { StatusViewComponent } from '../components/status-view/status-view.component';
+import { FeesBoxComponent } from '../components/fees-box/fees-box.component';
+import { DifficultyComponent } from '../components/difficulty/difficulty.component';
+import { TermsOfServiceComponent } from '../components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from '../components/privacy-policy/privacy-policy.component';
+import { TrademarkPolicyComponent } from '../components/trademark-policy/trademark-policy.component';
+import { SponsorComponent } from '../components/sponsor/sponsor.component';
+import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
+import { AssetsFeaturedComponent } from '../components/assets/assets-featured/assets-featured.component';
+import { AssetGroupComponent } from '../components/assets/asset-group/asset-group.component';
+import { AssetCirculationComponent } from '../components/asset-circulation/asset-circulation.component';
+import { AmountShortenerPipe } from '../shared/pipes/amount-shortener.pipe';
+import { DifficultyAdjustmentsTable } from '../components/difficulty-adjustments-table/difficulty-adjustments-table.components';
+import { BlocksList } from '../components/blocks-list/blocks-list.component';
+import { RewardStatsComponent } from '../components/reward-stats/reward-stats.component';
+import { DataCyDirective } from '../data-cy.directive';
+import { LoadingIndicatorComponent } from '../components/loading-indicator/loading-indicator.component';
+import { IndexingProgressComponent } from '../components/indexing-progress/indexing-progress.component';
+
@NgModule({
  declarations: [
    ClipboardComponent,
@ -60,6 +103,42 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
    MempoolBlocksComponent,
    BlockchainBlocksComponent,
    AmountComponent,
+
+    AboutComponent,
+    MasterPageComponent,
+    BisqMasterPageComponent,
+    LiquidMasterPageComponent,
+    StartComponent,
+    TransactionComponent,
+    BlockComponent,
+    TransactionsListComponent,
+    AddressComponent,
+    LatestBlocksComponent,
+    SearchFormComponent,
+    TimeSpanComponent,
+    AddressLabelsComponent,
+    FooterComponent,
+    AssetComponent,
+    AssetsComponent,
+    StatusViewComponent,
+    FeesBoxComponent,
+    DifficultyComponent,
+    TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
+    SponsorComponent,
+    PushTransactionComponent,
+    AssetsNavComponent,
+    AssetsFeaturedComponent,
+    AssetGroupComponent,
+    AssetCirculationComponent,
+    AmountShortenerPipe,
+    DifficultyAdjustmentsTable,
+    BlocksList,
+    DataCyDirective,
+    RewardStatsComponent,
+    LoadingIndicatorComponent,
+    IndexingProgressComponent,
  ],
  imports: [
    CommonModule,
@ -71,17 +150,26 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
    NgbPaginationModule,
    NgbDropdownModule,
    NgbAccordionModule,
+    InfiniteScrollModule,
+    NgbTypeaheadModule,
+    NgbModule,
+    FontAwesomeModule,
  ],
  providers: [
    VbytesPipe,
    RelativeUrlPipe,
    NoSanitizePipe,
+    ShortenStringPipe,
+    CapAddressPipe,
  ],
  exports: [
    RouterModule,
+    InfiniteScrollModule,
+    NgbTypeaheadModule,
+    NgbModule,
+    FontAwesomeModule,
    NgbAccordionModule,
    NgbNavModule,
-    CommonModule,
    ReactiveFormsModule,
    NgbTooltipModule,
    NgbButtonsModule,
@ -114,6 +202,75 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
    MempoolBlocksComponent,
    BlockchainBlocksComponent,
    AmountComponent,
+
+    StartComponent,
+    TransactionComponent,
+    BlockComponent,
+    TransactionsListComponent,
+    AddressComponent,
+    LatestBlocksComponent,
+    SearchFormComponent,
+    TimeSpanComponent,
+    AddressLabelsComponent,
+    FooterComponent,
+    AssetComponent,
+    AssetsComponent,
+    StatusViewComponent,
+    FeesBoxComponent,
+    DifficultyComponent,
+    TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
+    SponsorComponent,
+    PushTransactionComponent,
+    AssetsNavComponent,
+    AssetsFeaturedComponent,
+    AssetGroupComponent,
+    AssetCirculationComponent,
+    AmountShortenerPipe,
+    DifficultyAdjustmentsTable,
+    BlocksList,
+    DataCyDirective,
+    RewardStatsComponent,
+    LoadingIndicatorComponent,
+    IndexingProgressComponent,
  ]
 })
-export class SharedModule {}
+export class SharedModule {
+  constructor(library: FaIconLibrary) {
+    library.addIcons(faInfoCircle);
+    library.addIcons(faChartArea);
+    library.addIcons(faTv);
+    library.addIcons(faTachometerAlt);
+    library.addIcons(faCubes);
+    library.addIcons(faHammer);
+    library.addIcons(faCogs);
+    library.addIcons(faThList);
+    library.addIcons(faList);
+    library.addIcons(faTachometerAlt);
+    library.addIcons(faDatabase);
+    library.addIcons(faSearch);
+    library.addIcons(faLink);
+    library.addIcons(faBolt);
+    library.addIcons(faTint);
+    library.addIcons(faFilter);
+    library.addIcons(faAngleDown);
+    library.addIcons(faAngleUp);
+    library.addIcons(faExchangeAlt);
+    library.addIcons(faAngleDoubleUp);
+    library.addIcons(faAngleDoubleDown);
+    library.addIcons(faChevronDown);
+    library.addIcons(faFileAlt);
+    library.addIcons(faRedoAlt);
+    library.addIcons(faArrowAltCircleRight);
+    library.addIcons(faExternalLinkAlt);
+    library.addIcons(faSortUp);
+    library.addIcons(faCaretUp);
+    library.addIcons(faCaretDown);
+    library.addIcons(faAngleRight);
+    library.addIcons(faAngleLeft);
+    library.addIcons(faBook);
+    library.addIcons(faListUl);
+    library.addIcons(faDownload);
+  }
+}
--- a/frontend/src/locale/messages.ar.xlf
+++ b/frontend/src/locale/messages.ar.xlf
--- a/frontend/src/locale/messages.ca.xlf
+++ b/frontend/src/locale/messages.ca.xlf
--- a/frontend/src/locale/messages.cs.xlf
+++ b/frontend/src/locale/messages.cs.xlf
--- a/frontend/src/locale/messages.de.xlf
+++ b/frontend/src/locale/messages.de.xlf
--- a/frontend/src/locale/messages.en_US.xlf
+++ b/frontend/src/locale/messages.en_US.xlf
--- a/frontend/src/locale/messages.es.xlf
+++ b/frontend/src/locale/messages.es.xlf
--- a/frontend/src/locale/messages.fa.xlf
+++ b/frontend/src/locale/messages.fa.xlf
--- a/frontend/src/locale/messages.fi.xlf
+++ b/frontend/src/locale/messages.fi.xlf
--- a/frontend/src/locale/messages.fr.xlf
+++ b/frontend/src/locale/messages.fr.xlf
--- a/frontend/src/locale/messages.he.xlf
+++ b/frontend/src/locale/messages.he.xlf
--- a/frontend/src/locale/messages.hi.xlf
+++ b/frontend/src/locale/messages.hi.xlf
--- a/frontend/src/locale/messages.hr.xlf
+++ b/frontend/src/locale/messages.hr.xlf
--- a/frontend/src/locale/messages.hu.xlf
+++ b/frontend/src/locale/messages.hu.xlf
--- a/frontend/src/locale/messages.it.xlf
+++ b/frontend/src/locale/messages.it.xlf
--- a/frontend/src/locale/messages.ja.xlf
+++ b/frontend/src/locale/messages.ja.xlf
--- a/frontend/src/locale/messages.ka.xlf
+++ b/frontend/src/locale/messages.ka.xlf
--- a/frontend/src/locale/messages.ko.xlf
+++ b/frontend/src/locale/messages.ko.xlf
--- a/frontend/src/locale/messages.mk.xlf
+++ b/frontend/src/locale/messages.mk.xlf
--- a/frontend/src/locale/messages.nb.xlf
+++ b/frontend/src/locale/messages.nb.xlf
--- a/frontend/src/locale/messages.nl.xlf
+++ b/frontend/src/locale/messages.nl.xlf
--- a/frontend/src/locale/messages.pl.xlf
+++ b/frontend/src/locale/messages.pl.xlf
--- a/frontend/src/locale/messages.pt.xlf
+++ b/frontend/src/locale/messages.pt.xlf
--- a/frontend/src/locale/messages.ro.xlf
+++ b/frontend/src/locale/messages.ro.xlf
--- a/frontend/src/locale/messages.ru.xlf
+++ b/frontend/src/locale/messages.ru.xlf
--- a/frontend/src/locale/messages.sl.xlf
+++ b/frontend/src/locale/messages.sl.xlf
--- a/frontend/src/locale/messages.sv.xlf
+++ b/frontend/src/locale/messages.sv.xlf
--- a/frontend/src/locale/messages.th.xlf
+++ b/frontend/src/locale/messages.th.xlf
--- a/frontend/src/locale/messages.tr.xlf
+++ b/frontend/src/locale/messages.tr.xlf
--- a/frontend/src/locale/messages.uk.xlf
+++ b/frontend/src/locale/messages.uk.xlf
--- a/frontend/src/locale/messages.vi.xlf
+++ b/frontend/src/locale/messages.vi.xlf
--- a/frontend/src/locale/messages.xlf
+++ b/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;
-      &lt;/h2&gt;"/> of <x id="INTERPOLATION_1" equiv-text="{{ txCount | number }}"/> transactions</source>
+        <source><x id="INTERPOLATION" equiv-text="{{ (transactions?.length | number) || &apos;?&apos; }}"/> 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>
--- a/frontend/src/locale/messages.zh.xlf
+++ b/frontend/src/locale/messages.zh.xlf
--- a/frontend/src/styles.scss
+++ b/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;
 }