Merge branch 'master' into simon/load-more-mempool-txs

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

@@ -22,6 +22,7 @@ import { AssetsFeaturedComponent } from './components/assets/assets-featured/ass
 import { AssetsComponent } from './components/assets/assets.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
+import { CalculatorComponent } from './components/calculator/calculator.component';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -278,6 +279,10 @@ let routes: Routes = [
         path: 'rbf',
         component: RbfList,
       },
+      {
+        path: 'tools/calculator',
+        component: CalculatorComponent
+      },
       {
         path: 'terms-of-service',
         component: TermsOfServiceComponent

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -38,7 +38,7 @@ export default class TxView implements TransactionStripped {
   value: number;
   feerate: number;
   rate?: number;
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'added' | 'censored' | 'selected' | 'fullrbf';
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'fullrbf';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
 
@@ -210,6 +210,7 @@ export default class TxView implements TransactionStripped {
       case 'fullrbf':
         return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
       case 'fresh':
+      case 'freshcpfp':
         return auditColors.missing;
       case 'added':
         return auditColors.added;

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

@@ -50,6 +50,7 @@
           <td *ngSwitchCase="'missing'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
           <td *ngSwitchCase="'sigop'"><span class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span></td>
           <td *ngSwitchCase="'fresh'"><span class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span></td>
+          <td *ngSwitchCase="'freshcpfp'"><span class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span></td>
           <td *ngSwitchCase="'added'"><span class="badge badge-warning" i18n="transaction.audit.added">Added</span></td>
           <td *ngSwitchCase="'selected'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
           <td *ngSwitchCase="'fullrbf'"><span class="badge badge-warning" i18n="transaction.audit.fullrbf">Full RBF</span></td>

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

@@ -370,7 +370,11 @@ export class BlockComponent implements OnInit, OnDestroy {
               tx.status = 'found';
             } else {
               if (isFresh[tx.txid]) {
-                tx.status = 'fresh';
+                if (tx.rate - (tx.fee / tx.vsize) >= 0.1) {
+                  tx.status = 'freshcpfp';
+                } else {
+                  tx.status = 'fresh';
+                }
               } else if (isSigop[tx.txid]) {
                 tx.status = 'sigop';
               } else if (isFullRbf[tx.txid]) {

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

@@ -0,0 +1,69 @@
+<div class="container-xl">
+  <div class="text-center">
+    <h2>Calculator</h2>
+  </div>
+
+  <ng-container *ngIf="price$ | async; else loading">
+
+    <div class="row justify-content-center">
+
+      <form [formGroup]="form">
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">{{ currency$ | async }}</span>
+          </div>
+          <input type="text" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
+          <app-clipboard [button]="true" [text]="form.get('fiat').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">BTC</span>
+          </div>
+          <input type="text" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')" (click)="selectAll($event)">
+          <app-clipboard [button]="true" [text]="form.get('bitcoin').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">sats</span>
+          </div>
+          <input type="text" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
+          <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+      </form>
+
+    </div>
+
+    <br>
+
+    <div class="row justify-content-center">
+      <div class="bitcoin-satoshis-text">
+        ₿
+         <span [innerHTML]="form.get('bitcoin').value | bitcoinsatoshis"></span> 
+        <span class="sats"> sats</span>
+      </div>
+    </div>
+
+    <div class="row justify-content-center">
+      <div class="fiat-text">
+        <app-fiat [value]="form.get('satoshis').value" digitsInfo="1.0-0"></app-fiat>
+      </div>
+    </div>
+
+    <div class="row justify-content-center mt-3">
+      <div class="symbol">
+        Fiat price last updated <app-time kind="since" [time]="lastFiatPrice$ | async" [fastRender]="true"></app-time>
+      </div>
+    </div>
+
+
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center">
+      Waiting for price feed...
+    </div>
+  </ng-template>
+
+</div>

frontend/src/app/components/calculator/calculator.component.scss

@@ -0,0 +1,30 @@
+.input-group-text {
+  width: 75px;
+}
+
+.bitcoin-satoshis-text {
+  font-size: 40px;
+}
+
+.fiat-text {
+  font-size: 24px;
+}
+
+.symbol {
+  font-style: italic;
+}
+
+@media (max-width: 767.98px) {
+  .bitcoin-satoshis-text {
+    font-size: 30px;
+  }
+}
+
+.sats {
+  font-size: 20px;
+  margin-left: 5px;
+}
+
+.row {
+  margin: auto;
+}

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

@@ -0,0 +1,137 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { combineLatest, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-calculator',
+  templateUrl: './calculator.component.html',
+  styleUrls: ['./calculator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CalculatorComponent implements OnInit {
+  satoshis = 10000;
+  form: FormGroup;
+
+  currency$ = this.stateService.fiatCurrency$;
+  price$: Observable<number>;
+  lastFiatPrice$: Observable<number>;
+
+  constructor(
+    private stateService: StateService,
+    private formBuilder: FormBuilder,
+    private websocketService: WebsocketService,
+  ) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      fiat: [0],
+      bitcoin: [0],
+      satoshis: [0],
+    });
+
+    this.lastFiatPrice$ = this.stateService.conversions$.asObservable()
+      .pipe(
+        map((conversions) => conversions.time)
+      );
+
+    let currency;
+    this.price$ = this.currency$.pipe(
+      switchMap((result) => {
+        currency = result; 
+        return this.stateService.conversions$.asObservable();
+      }),
+      map((conversions) => {
+        return conversions[currency];
+      })
+    );
+
+    combineLatest([
+      this.price$,
+      this.form.get('fiat').valueChanges
+    ]).subscribe(([price, value]) => {
+      const rate = (value / price).toFixed(8);
+      const satsRate = Math.round(value / price * 100_000_000);
+      if (isNaN(value)) {
+        return;
+      }
+      this.form.get('bitcoin').setValue(rate, { emitEvent: false });
+      this.form.get('satoshis').setValue(satsRate, { emitEvent: false } );
+    });
+
+    combineLatest([
+      this.price$,
+      this.form.get('bitcoin').valueChanges
+    ]).subscribe(([price, value]) => {
+      const rate = parseFloat((value * price).toFixed(8));
+      if (isNaN(value)) {
+        return;
+      }
+      this.form.get('fiat').setValue(rate, { emitEvent: false } );
+      this.form.get('satoshis').setValue(Math.round(value * 100_000_000), { emitEvent: false } );
+    });
+
+    combineLatest([
+      this.price$,
+      this.form.get('satoshis').valueChanges
+    ]).subscribe(([price, value]) => {
+      const rate = parseFloat((value / 100_000_000 * price).toFixed(8));
+      const bitcoinRate = (value / 100_000_000).toFixed(8);
+      if (isNaN(value)) {
+        return;
+      }
+      this.form.get('fiat').setValue(rate, { emitEvent: false } );
+      this.form.get('bitcoin').setValue(bitcoinRate, { emitEvent: false });
+    });
+
+  }
+
+  transformInput(name: string): void {
+    const formControl = this.form.get(name);
+    if (!formControl.value) {
+      return formControl.setValue('', {emitEvent: false});
+    }
+    let value = formControl.value.replace(',', '.').replace(/[^0-9.]/g, '');
+    if (value === '.') {
+      value = '0';
+    }
+    let sanitizedValue = this.removeExtraDots(value);
+    if (name === 'bitcoin' && this.countDecimals(sanitizedValue) > 8) {
+      sanitizedValue = this.toFixedWithoutRounding(sanitizedValue, 8);
+    }
+    if (sanitizedValue === '') {
+      sanitizedValue = '0';
+    }
+    if (name === 'satoshis') {
+      sanitizedValue = parseFloat(sanitizedValue).toFixed(0);
+    }
+    formControl.setValue(sanitizedValue, {emitEvent: true});
+  }
+
+  removeExtraDots(str: string): string {
+    const [beforeDot, afterDot] = str.split('.', 2);
+    if (afterDot === undefined) {
+      return str;
+    }
+    const afterDotReplaced = afterDot.replace(/\./g, '');
+    return `${beforeDot}.${afterDotReplaced}`;
+  }
+
+  countDecimals(numberString: string): number {
+    const decimalPos = numberString.indexOf('.');
+    if (decimalPos === -1) return 0;
+    return numberString.length - decimalPos - 1;
+  }
+
+  toFixedWithoutRounding(numStr: string, fixed: number): string {
+    const re = new RegExp(`^-?\\d+(?:.\\d{0,${(fixed || -1)}})?`);
+    const result = numStr.match(re);
+    return result ? result[0] : numStr;
+  }
+
+  selectAll(event): void {
+    event.target.select();
+  }
+}

frontend/src/app/interfaces/node-api.interface.ts

@@ -173,7 +173,8 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'added' | 'censored' | 'selected' | 'fullrbf';
+  rate?: number; // effective fee rate
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'fullrbf';
   context?: 'projected' | 'actual';
 }
 

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

@@ -89,7 +89,7 @@ export interface TransactionStripped {
   vsize: number;
   value: number;
   rate?: number; // effective fee rate
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'added' | 'censored' | 'selected' | 'fullrbf';
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'fullrbf';
   context?: 'projected' | 'actual';
 }
 

frontend/src/app/shared/pipes/bitcoinsatoshis.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'bitcoinsatoshis'
+})
+export class BitcoinsatoshisPipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  transform(value: string): SafeHtml {
+    const newValue = this.insertSpaces(parseFloat(value || '0').toFixed(8));
+    const position = (newValue || '0').search(/[1-9]/);
+
+    const firstPart = newValue.slice(0, position);
+    const secondPart = newValue.slice(position);
+
+    return this.sanitizer.bypassSecurityTrustHtml(
+      `<span class="text-secondary">${firstPart}</span>${secondPart}`
+    );
+  }
+
+  insertSpaces(str: string): string {
+    const length = str.length;
+    return str.slice(0, length - 6) + ' ' + str.slice(length - 6, length - 3) + ' ' + str.slice(length - 3);
+  }
+
+}

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

@@ -97,6 +97,8 @@ import { MempoolBlockOverviewComponent } from '../components/mempool-block-overv
 import { ClockchainComponent } from '../components/clockchain/clockchain.component';
 import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
 import { ClockComponent } from '../components/clock/clock.component';
+import { CalculatorComponent } from '../components/calculator/calculator.component';
+import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe';
 
 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';
 
@@ -185,12 +187,12 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     GeolocationComponent,
     TestnetAlertComponent,
     GlobalFooterComponent,
-
+    CalculatorComponent,
+    BitcoinsatoshisPipe,
     MempoolBlockOverviewComponent,
     ClockchainComponent,
     ClockComponent,
     ClockFaceComponent,
-
     OnlyVsizeDirective,
     OnlyWeightDirective
   ],