Transaction tracking revamped.

Blockchain block arrow.

backend/src/index.ts

@@ -90,8 +90,12 @@ class Server {
             client['want-stats'] = parsedMessage.data.indexOf('stats') > -1;
           }
 
-          if (parsedMessage && parsedMessage.txId && /^[a-fA-F0-9]{64}$/.test(parsedMessage.txId)) {
+          if (parsedMessage && parsedMessage['track-tx']) {
-            client['txId'] = parsedMessage.txId;
+            if (/^[a-fA-F0-9]{64}$/.test(parsedMessage['track-tx'])) {
+              client['track-tx'] = parsedMessage['track-tx'];
+            } else {
+              client['track-tx'] = null;
+            }
           }
 
           if (parsedMessage.action === 'init') {
@@ -139,8 +143,8 @@ class Server {
           return;
         }
 
-        if (client['txId'] && txIds.indexOf(client['txId']) > -1) {
+        if (client['track-tx'] && txIds.indexOf(client['track-tx']) > -1) {
-          client['txId'] = null;
+          client['track-tx'] = null;
           client.send(JSON.stringify({
             'block': block,
             'txConfirmed': true,

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

@@ -5,6 +5,7 @@
 .qr-wrapper {
   background-color: #FFF;
   padding: 10px;
+  padding-bottom: 5px;
   display: inline-block;
   margin-right: 25px;
 }

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

@@ -1,8 +1,10 @@
 <div class="container">
 
-  <app-blockchain position="top"></app-blockchain>
+  <app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
 
+  <div class="title-block">
     <h1>Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/', blockHash]">#{{ blockHeight }}</a></ng-template></h1>
+  </div>
 
   <ng-template [ngIf]="!isLoadingBlock && !error">
 

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

@@ -0,0 +1,11 @@
+.title-block {
+  color: #FFF;
+  padding-left: 10px;
+  padding-top: 13px;
+  padding-bottom: 3px;
+  border-top: 5px solid #FFF;
+}
+
+.title-block > h1 {
+  margin: 0;
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -18,4 +18,5 @@
       </div>
     </div>
   </div>
+  <div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -101,3 +101,15 @@
   z-index: 100;
   position: relative;
 }
+
+#arrow-up {
+  position: relative;
+  left: 30px;
+  top: 140px;
+  transition: 1s;
+  width: 0; 
+  height: 0; 
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 35px solid #FFF;
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, OnChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
@@ -8,12 +8,18 @@ import { StateService } from 'src/app/services/state.service';
   templateUrl: './blockchain-blocks.component.html',
   styleUrls: ['./blockchain-blocks.component.scss']
 })
-export class BlockchainBlocksComponent implements OnInit, OnDestroy {
+export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() markHeight = 0;
+
   blocks: Block[] = [];
   blocksSubscription: Subscription;
   interval: any;
   trigger = 0;
 
+
+  arrowVisible = false;
+  arrowLeftPx = 30;
+
   constructor(
     private stateService: StateService,
   ) { }
@@ -26,16 +32,34 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         }
         this.blocks.unshift(block);
         this.blocks = this.blocks.slice(0, 8);
+
+        this.moveArrowToPosition();
       });
 
     this.interval = setInterval(() => this.trigger++, 10 * 1000);
   }
 
+  ngOnChanges() {
+    this.moveArrowToPosition();
+  }
+
   ngOnDestroy() {
     this.blocksSubscription.unsubscribe();
     clearInterval(this.interval);
   }
 
+  moveArrowToPosition() {
+    if (!this.markHeight) {
+      this.arrowVisible = false;
+      return;
+    }
+    const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
+    if (blockindex !== -1) {
+      this.arrowVisible = true;
+      this.arrowLeftPx = blockindex * 150 + 30;
+    }
+  }
+
   trackByBlocksFn(index: number, item: Block) {
     return item.height;
   }

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

@@ -4,9 +4,9 @@
   <div class="spinner-border text-light"></div>
 </div>
 <div class="text-center" class="blockchain-wrapper">
-  <div class="position-container" [ngStyle]="{'top': position === 'top' ? '100px' : 'calc(50% - 60px)'}">
+  <div class="position-container" [ngStyle]="{'top': position === 'top' ? '75px' : 'calc(50% - 60px)'}">
     <app-mempool-blocks></app-mempool-blocks>
-    <app-blockchain-blocks></app-blockchain-blocks>
+    <app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
 
     <div id="divider" *ngIf="!isLoading"></div>
   </div>

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

@@ -10,6 +10,7 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class BlockchainComponent implements OnInit, OnDestroy {
   @Input() position: 'middle' | 'top' = 'middle';
+  @Input() markHeight: number;
 
   txTrackingSubscription: Subscription;
   blocksSubscription: Subscription;

frontend/src/app/components/search-form/search-form.component.ts

@@ -15,6 +15,8 @@ export class SearchFormComponent implements OnInit {
   searchBoxPlaceholderText = 'Transaction, address, block hash...';
 
   regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,87})$/;
+  regexBlockhash = /^[0]{8}[a-fA-F0-9]{56}$/;
+  regexTransaction = /^[a-fA-F0-9]{64}$/;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -32,8 +34,12 @@ export class SearchFormComponent implements OnInit {
     if (searchText) {
       if (this.regexAddress.test(searchText)) {
         this.router.navigate(['/address/', searchText]);
-      } else {
+      } else if (this.regexBlockhash.test(searchText)) {
+        this.router.navigate(['/block/', searchText]);
+      } else if (this.regexTransaction.test(searchText)) {
         this.router.navigate(['/tx/', searchText]);
+      } else {
+        return;
       }
       this.searchForm.setValue({
         searchText: '',

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

@@ -1,10 +1,14 @@
 <div class="container">
 
-  <app-blockchain position="top"></app-blockchain>
+  <app-blockchain position="top" [markHeight]="tx?.status?.block_height"></app-blockchain>
 
-  <div class="clearfix"></div>
+  <div class="title-block">
+    <h1 style="float: left;">Transaction</h1>
+    <a [routerLink]="['/tx/', txId]" style="line-height: 55px; margin-left: 10px;">{{ txId }}</a>
+    <app-clipboard [text]="txId"></app-clipboard>
+  </div>
 
-  <h1>Transaction</h1>
+  <br>
 
   <ng-template [ngIf]="!isLoadingTx && !error">
 
@@ -51,19 +55,14 @@
         <table class="table table-borderless table-striped">
           <tbody>
             <tr>
-              <td>Transaction</td>
+              <td>Status</td>
-              <td>
-                <a [routerLink]="['/tx/', txId]">{{ txId | shortenString }}</a>
-                <app-clipboard [text]="txId"></app-clipboard>
-              </td>
               <td class="adjust-btn-padding">
                 <button type="button" class="btn btn-sm btn-danger">Unconfirmed</button>
               </td>
             </tr>
             <tr>
               <td>Fees</td>
-              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
+              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span> {{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
-              <td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
             </tr>
           </tbody>
         </table>

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

@@ -10,3 +10,15 @@
 
   width: 40px;
 }
+
+.title-block {
+  color: #FFF;
+  padding-left: 10px;
+  padding-top: 13px;
+  padding-bottom: 3px;
+  border-top: 5px solid #FFF;
+}
+
+.title-block > h1 {
+  margin: 0;
+}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap } from 'rxjs/operators';
@@ -12,7 +12,7 @@ import { WebsocketService } from '../../services/websocket.service';
   templateUrl: './transaction.component.html',
   styleUrls: ['./transaction.component.scss']
 })
-export class TransactionComponent implements OnInit {
+export class TransactionComponent implements OnInit, OnDestroy {
   tx: Transaction;
   txId: string;
   isLoadingTx = true;
@@ -51,7 +51,7 @@ export class TransactionComponent implements OnInit {
       window.scrollTo(0, 0);
 
       if (!tx.status.confirmed) {
-        this.websocketService.startTrackTx(tx.txid);
+        this.websocketService.startTrackTransaction(tx.txid);
       }
     },
     (error) => {
@@ -75,4 +75,8 @@ export class TransactionComponent implements OnInit {
         };
       });
   }
+
+  ngOnDestroy() {
+    this.websocketService.startTrackTransaction('stop');
+  }
 }

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

@@ -4,13 +4,14 @@ export interface WebsocketResponse {
   block?: Block;
   blocks?: Block[];
   conversions?: any;
-  txId?: string;
   txConfirmed?: boolean;
   historicalDate?: string;
   mempoolInfo?: MempoolInfo;
   vBytesPerSecond?: number;
   action?: string;
   data?: string[];
+  'track-tx'?: string;
+  'track-address'?: string;
 }
 
 export interface MempoolBlock {

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

@@ -16,6 +16,7 @@ export class WebsocketService {
   private goneOffline = false;
   private lastWant: string[] | null = null;
   private trackingTxId: string | null = null;
+  private trackingAddress: string | null = null;
 
   constructor(
     private stateService: StateService,
@@ -86,7 +87,10 @@ export class WebsocketService {
             this.want(this.lastWant);
           }
           if (this.trackingTxId) {
-            this.startTrackTx(this.trackingTxId);
+            this.startTrackTransaction(this.trackingTxId);
+          }
+          if (this.trackingAddress) {
+            this.startTrackTransaction(this.trackingAddress);
           }
           this.stateService.isOffline$.next(false);
         }
@@ -99,11 +103,16 @@ export class WebsocketService {
       });
   }
 
-  startTrackTx(txId: string) {
+  startTrackTransaction(txId: string) {
-    this.websocketSubject.next({ txId });
+    this.websocketSubject.next({ 'track-tx': txId });
     this.trackingTxId = txId;
   }
 
+  startTrackAddress(address: string) {
+    this.websocketSubject.next({ 'track-address': address });
+    this.trackingAddress = address;
+  }
+
   fetchStatistics(historicalDate: string) {
     this.websocketSubject.next({ historicalDate });
   }