Switch remaining vb fields according to unit preference

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -64,7 +64,8 @@
                     {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
                 </tr>
                 <tr>
-                  <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
+                  <td *only-vsize i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
+                  <td *only-weight i18n="transaction.fee-per-wu|Transaction fee">Fee per weight unit</td>
                   <td *ngIf="!isLoadingTx; else loadingTxFee">
                     <app-fee-rate [fee]="tx.fee" [weight]="tx.weight"></app-fee-rate>
                     &nbsp;

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
 import { EChartsOption } from 'echarts';
-import { Observable } from 'rxjs';
+import { Observable, Subscription, combineLatest } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
@@ -76,10 +76,11 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         }
       });
 
-    this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+    this.statsObservable$ = combineLatest([
-      .pipe(
+        this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)),
-        startWith(this.radioGroupForm.controls.dateSpan.value),
+        this.stateService.rateUnits$
-        switchMap((timespan) => {
+    ]).pipe(
+        switchMap(([timespan, rateUnits]) => {
           this.storageService.setValue('miningWindowPreference', timespan);
           this.timespan = timespan;
           this.isLoading = true;
@@ -135,8 +136,8 @@ export class BlockFeeRatesGraphComponent implements OnInit {
 
                 this.prepareChartOptions({
                   legends: legends,
-                  series: series,
+                  series: series
-                });
+                }, rateUnits === 'wu');
                 this.isLoading = false;
               }),
               map((response) => {
@@ -150,7 +151,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
       );
   }
 
-  prepareChartOptions(data) {
+  prepareChartOptions(data, weightMode) {
     this.chartOptions = {
       color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
       animation: false,
@@ -181,7 +182,11 @@ export class BlockFeeRatesGraphComponent implements OnInit {
           let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
 
           for (const rate of data.reverse()) {
-            tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
+            if (weightMode) {
+              tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1] / 4} sats/WU<br>`;
+            } else {
+              tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
+            }
           }
 
           if (['24h', '3d'].includes(this.timespan)) {
@@ -231,9 +236,12 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         axisLabel: {
           color: 'rgb(110, 112, 121)',
           formatter: (val) => {
+            if (weightMode) {
+              val /= 4;
+            }
             const selectedPowerOfTen: any = selectPowerOfTen(val);
             const newVal = Math.round(val / selectedPowerOfTen.divider);
-            return `${newVal}${selectedPowerOfTen.unit} s/vB`;
+            return `${newVal}${selectedPowerOfTen.unit} s/${weightMode ? 'WU': 'vB'}`;
           },
         },
         splitLine: {

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -34,10 +34,14 @@
           <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
         </td>
       </tr>
-      <tr>
+      <tr *only-vsize>
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
       </tr>
+      <tr *only-weight>
+        <td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
+        <td [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
+      </tr>
       <tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
         <td class="td-width" i18n="transaction.audit-status">Audit status</td>
         <ng-container [ngSwitch]="tx?.status">

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts

@@ -1,16 +1,17 @@
-import { OnChanges } from '@angular/core';
+import { OnChanges, OnDestroy } from '@angular/core';
 import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
 import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
 import { selectPowerOfTen } from '../../bitcoin.utils';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-fee-distribution-graph',
   templateUrl: './fee-distribution-graph.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeeDistributionGraphComponent implements OnInit, OnChanges {
+export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestroy {
   @Input() feeRange: number[];
   @Input() vsize: number;
   @Input() transactions: TransactionStripped[];
@@ -25,6 +26,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
   data: number[][];
   labelInterval: number = 50;
 
+  rateUnitSub: Subscription;
+  weightMode: boolean = false;
   mempoolVsizeFeesOptions: any;
   mempoolVsizeFeesInitOptions = {
     renderer: 'svg'
@@ -35,8 +38,13 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
     private vbytesPipe: VbytesPipe,
   ) { }
 
-  ngOnInit(): void {
+  ngOnInit() {
-    this.mountChart();
+    this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
+      this.weightMode = rateUnits === 'wu';
+      if (this.data) {
+        this.mountChart();
+      }
+    });
   }
 
   ngOnChanges(): void {
@@ -122,8 +130,9 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
         },
         axisLabel: {
           formatter: (value: number): string => {
-            const selectedPowerOfTen = selectPowerOfTen(value);
+            const unitValue = this.weightMode ? value / 4 : value;
-            const newVal = Math.round(value / selectedPowerOfTen.divider);
+            const selectedPowerOfTen = selectPowerOfTen(unitValue);
+            const newVal = Math.round(unitValue / selectedPowerOfTen.divider);
             return `${newVal}${selectedPowerOfTen.unit}`;
           },
         }
@@ -138,10 +147,11 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
           textShadowBlur: 0,
           formatter: (label: { data: number[] }): string => {
             const value = label.data[1];
-            const selectedPowerOfTen = selectPowerOfTen(value);
+            const unitValue = this.weightMode ? value / 4 : value;
-            const newVal = Math.round(value / selectedPowerOfTen.divider);
+            const selectedPowerOfTen = selectPowerOfTen(unitValue);
+            const newVal = Math.round(unitValue / selectedPowerOfTen.divider);
             return `${newVal}${selectedPowerOfTen.unit}`;
-          },
+          }
         },
         showAllSymbol: false,
         smooth: true,
@@ -162,4 +172,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
       }]
     };
   }
+
+  ngOnDestroy(): void {
+    this.rateUnitSub.unsubscribe();
+  }
 }

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

@@ -10,7 +10,8 @@
           <ng-template #inSync>
             <div class="progress inc-tx-progress-bar">
               <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
-              <div class="progress-text">&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+              <div class="progress-text" *only-vsize>&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+              <div class="progress-text" *only-weight>&lrm;{{ mempoolInfoData.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-units-per-second|vB/s">WU/s</ng-container></div>
             </div>
           </ng-template>
         </ng-template>  

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -1,9 +1,11 @@
-import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
 import { EChartsOption } from 'echarts';
 import { OnChanges } from '@angular/core';
 import { StorageService } from '../../services/storage.service';
 import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils';
 import { formatNumber } from '@angular/common';
+import { StateService } from '../../services/state.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-incoming-transactions-graph',
@@ -18,7 +20,7 @@ import { formatNumber } from '@angular/common';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
+export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, OnDestroy {
   @Input() data: any;
   @Input() theme: string;
   @Input() height: number | string = '200';
@@ -35,14 +37,24 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
   };
   windowPreference: string;
   chartInstance: any = undefined;
+  weightMode: boolean = false;
+  rateUnitSub: Subscription;
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
     private storageService: StorageService,
+    private stateService: StateService,
   ) { }
 
   ngOnInit() {
     this.isLoading = true;
+
+    this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
+      this.weightMode = rateUnits === 'wu';
+      if (this.data) {
+        this.mountChart();
+      }
+    });
   }
 
   ngOnChanges(): void {
@@ -118,7 +130,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
               itemFormatted += `<div class="item">
                 <div class="indicator-container">${colorSpan(item.color)}</div>
                 <div class="grow"></div>
-                <div class="value">${formatNumber(item.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
+                <div class="value">${formatNumber(this.weightMode ? item.value[1] * 4 : item.value[1], this.locale, '1.0-0')} <span class="symbol">${this.weightMode ? 'WU' : 'vB'}/s</span></div>
               </div>`;
             }
           });
@@ -147,6 +159,9 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         type: 'value',
         axisLabel: {
           fontSize: 11,
+          formatter: (value) => {
+            return this.weightMode ? value * 4 : value;
+          }
         },
         splitLine: {
           lineStyle: {
@@ -250,4 +265,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
     this.mempoolStatsChartOption.backgroundColor = 'none';
     this.chartInstance.setOption(this.mempoolStatsChartOption);
   }
+
+  ngOnDestroy(): void {
+    this.rateUnitSub.unsubscribe();
+  }
 }

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
 import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
+import { WuBytesPipe } from '../../shared/pipes/bytes-pipe/wubytes.pipe';
 import { formatNumber } from '@angular/common';
 import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { StateService } from '../../services/state.service';
@@ -48,9 +49,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   chartColorsOrdered = chartColors;
   inverted: boolean;
   chartInstance: any = undefined;
+  weightMode: boolean = false;
 
   constructor(
     private vbytesPipe: VbytesPipe,
+    private wubytesPipe: WuBytesPipe,
     private stateService: StateService,
     private storageService: StorageService,
     @Inject(LOCALE_ID) private locale: string,

frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html

@@ -21,10 +21,14 @@
         <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
         <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
       </tr>
-      <tr>
+      <tr *only-vsize>
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
       </tr>
+      <tr *only-weight>
+        <td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
+        <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
+      </tr>
       <tr>
         <td class="td-width" i18n="transaction.status|Transaction Status">Status</td>
         <td>

frontend/src/app/components/rbf-timeline/rbf-timeline.component.html

@@ -31,7 +31,7 @@
               >
                 <div class="shape"></div>
               </a>
-              <span class="fee-rate"><app-fee-rate [fee]="cell.replacement.tx.fee" [weight]="cell.replacement.tx.vsize * 4"></app-fee-rate></span>
+              <span class="fee-rate"><app-fee-rate [fee]="cell.replacement.tx.fee" [weight]="cell.replacement.tx.vsize * 4" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate></span>
             </div>
           </ng-container>
           <ng-template #nonNode>

frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss

@@ -126,11 +126,6 @@
         }
       }
 
-      .symbol::ng-deep {
-        display: block;
-        margin-top: -0.5em;
-      }
-
       &.selected {
         .shape-border {
           background: #9339f4;

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

@@ -137,7 +137,8 @@
             <tr>
               <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
               <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
-              <th class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
+              <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
+              <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
               <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
               <th class="d-none d-lg-table-cell"></th>
             </tr>
@@ -149,7 +150,8 @@
                 <td>
                   <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
                 </td>
-                <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
                 <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
                 <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
               </tr>
@@ -160,7 +162,8 @@
                 <td class="txids">
                   <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
                 </td>
-                <td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
+                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
+                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
                 <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
                 <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
               </tr>
@@ -171,7 +174,8 @@
                 <td class="txids">
                   <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
                 </td>
-                <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
                 <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
                 <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
               </tr>

frontend/src/app/dashboard/dashboard.component.html

@@ -229,7 +229,8 @@
     <ng-template #inSync>
       <div class="progress inc-tx-progress-bar">
         <div class="progress-bar {{ mempoolInfoData.value.progressColor }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">&nbsp;</div>
-        <div class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+        <div *only-vsize class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+        <div *only-weight class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-per-second|WU/s">WU/s</ng-container></div>
       </div>
     </ng-template>
   </ng-template>

frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts

@@ -17,7 +17,7 @@ export class WuBytesPipe implements PipeTransform {
         'TWU': {max: Number.MAX_SAFE_INTEGER, prev: 'GWU'}
     };
 
-    transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit): any {
+    transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit, plainText?: boolean): any {
 
         if (!(isNumberFinite(input) &&
                 isNumberFinite(decimal) &&
@@ -38,7 +38,7 @@ export class WuBytesPipe implements PipeTransform {
 
             const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal);
 
-            return WuBytesPipe.formatResult(result, to);
+            return WuBytesPipe.formatResult(result, to, plainText);
         }
 
         for (const key in WuBytesPipe.formats) {
@@ -47,12 +47,15 @@ export class WuBytesPipe implements PipeTransform {
 
                 const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal);
 
-                return WuBytesPipe.formatResult(result, key);
+                return WuBytesPipe.formatResult(result, key, plainText);
             }
         }
     }
 
-    static formatResult(result: number, unit: string): string {
+    static formatResult(result: number, unit: string, plainText: boolean): string {
+        if (plainText){
+            return `${result} ${unit}`;
+        }
         return `${result} <span class="symbol">${unit}</span>`;
     }
 

frontend/src/app/shared/shared.module.ts

@@ -209,6 +209,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
   ],
   providers: [
     VbytesPipe,
+    WuBytesPipe,
     RelativeUrlPipe,
     NoSanitizePipe,
     ShortenStringPipe,