Various fixes and design updates.

backend/src/api/blocks.ts

@@ -64,7 +64,7 @@ class Blocks {
 
         transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
         block.medianFee = transactions.length ? this.median(transactions.map((tx) => tx.feePerVsize)) : 0;
-        block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : [];
+        block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : [0, 0];
 
         this.blocks.push(block);
         if (this.blocks.length > config.KEEP_BLOCK_AMOUNT) {

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

@@ -24,7 +24,7 @@ const routes: Routes = [
         component: StatisticsComponent,
       },
       {
-        path: 'team',
+        path: 'contributors',
         component: AboutComponent,
       },
       {

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

@@ -4,7 +4,7 @@
     <img src="./assets/mempool-tube.png" width="63" height="63" />
     <br /><br />
 
-    <h1>Team</h1>
+    <h1>Contributors</h1>
 
     <p>Mempool.Space is a realtime Bitcoin blockchain explorer and mempool visualizer.</p>
     <p>Lead Developer <a href="https://twitter.com/softbtc">@softbtc</a>
@@ -39,7 +39,7 @@
     <tr>
       <td style="width: 50%;">
         <span class="text-small">
-          Upon connection, send object <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
+          Default push: <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
           to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'.
         </span>
       </td>
@@ -49,7 +49,21 @@
         </div>
       </td>
     </tr>
+    <tr>
+      <td style="width: 50%;">
+        <span class="text-small">
+          Push transactions related to address: <span class="code">{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</span>
+          to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'address-block-transactions' for new block confirmed transactions.
+        </span>
+      </td>
+      <td>
+        <div class="mx-auto">
+          <input class="form-control" type="text" value="wss://mempool.space/ws" readonly>
+        </div>
+      </td>
+    </tr>
   </table>
 
+  <br> <br>
 
 </div>

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

@@ -28,7 +28,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
 
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {

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

@@ -33,7 +33,7 @@
               </tr>
               <tr>
                 <td>Status</td>
-                <td><button *ngIf="latestBlock" class="btn btn-sm btn-success">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</button></td>
+                <td><ng-template [ngIf]="latestBlock">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</ng-template></td>
               </tr>
             </tbody>
           </table>
@@ -49,6 +49,10 @@
                 <td>Previous Block</td>
                 <td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 32 }}</a></td>
               </tr>
+              <tr>
+                <td>Block subsidy</td>
+                <td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
+              </tr>
             </tbody>
           </table>
         </div>

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

@@ -21,6 +21,8 @@ export class BlockComponent implements OnInit {
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
+  blockSubsidy = 50;
+  conversions: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -30,7 +32,7 @@ export class BlockComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
 
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
@@ -66,6 +68,17 @@ export class BlockComponent implements OnInit {
 
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);
+
+    this.stateService.conversions$
+      .subscribe((conversions) => {
+        this.conversions = conversions;
+      });
+
+    let halvenings = Math.floor(this.block.height / 210000);
+    while (halvenings > 0) {
+      this.blockSubsidy = this.blockSubsidy / 2;
+      halvenings--;
+    }
   }
 
   getBlockTransactions(hash: string) {

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

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

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

@@ -104,7 +104,7 @@
 
 #arrow-up {
   position: relative;
-  right: 30px;
+  left: 30px;
   top: 140px;
   transition: 1s;
   width: 0; 

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

@@ -10,18 +10,15 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() markHeight = 0;
-  @Input() txFeePerVSize: number;
 
   blocks: Block[] = [];
   blocksSubscription: Subscription;
   interval: any;
   trigger = 0;
 
-  blockWidth = 125;
-  blockPadding = 30;
-  arrowLeftPx = 30;
-  rightPosition = 0;
+
   arrowVisible = false;
+  arrowLeftPx = 30;
 
   constructor(
     private stateService: StateService,
@@ -56,38 +53,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
       this.arrowVisible = false;
       return;
     }
-    const block = this.blocks.find((b) => b.height === this.markHeight);
-    if (!block) {
-      return;
-    }
-    const blockindex = this.blocks.indexOf(block);
-
+    const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
+    if (blockindex !== -1) {
       this.arrowVisible = true;
-    this.rightPosition = blockindex * -(this.blockWidth + this.blockPadding) - 30;
-
-    if (!this.txFeePerVSize) {
-      return;
-    }
-
-    for (let i = 0; i < block.feeRange.length - 1; i++) {
-      if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
-        const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
-        const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
-
-        const txFee = this.txFeePerVSize - block.feeRange[i];
-        const max = block.feeRange[i + 1] - block.feeRange[i];
-        const blockLocation = txFee / max;
-
-        const chunkPositionOffset = blockLocation * feeRangeChunkSize;
-        const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
-
-        const blockedFilledPercentage = (block.weight > 4000000 ? 4000000 : block.weight) / 4000000;
-        const arrowRightPosition = blockindex * (-this.blockWidth + this.blockPadding)
-          + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
-
-        this.rightPosition = arrowRightPosition - 93;
-        break;
-      }
+      this.arrowLeftPx = blockindex * 155 + 30;
     }
   }
 
@@ -100,13 +69,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (window.innerWidth <= 768) {
       return {
         top: 155 * this.blocks.indexOf(block) + 'px',
-        background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
+        background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
           #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
       };
     } else {
       return {
         left: 155 * this.blocks.indexOf(block) + 'px',
-        background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
+        background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
           #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
       };
     }

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

@@ -1,7 +1,7 @@
 <div class="text-center" class="blockchain-wrapper">
   <div class="position-container">
     <app-mempool-blocks [txFeePerVSize]="markHeight ? 0 : txFeePerVSize"></app-mempool-blocks>
-    <app-blockchain-blocks [markHeight]="markHeight" [txFeePerVSize]="txFeePerVSize"></app-blockchain-blocks>
+    <app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
 
     <div id="divider" *ngIf="!isLoading; else loadingTmpl"></div>
 

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

@@ -1,6 +1,6 @@
 <footer class="footer">
   <div class="container">
-    <div class="row" *ngIf="memPoolInfo">
+    <div class="row text-center" *ngIf="memPoolInfo">
       <div class="col">
         <span class="txPerSecond">Tx weight per second:</span>&nbsp;
         

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

@@ -18,7 +18,7 @@
         <a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
       </li>
       <li class="nav-item" routerLinkActive="active">
-        <a class="nav-link" routerLink="/team" (click)="collapse()">Team</a>
+        <a class="nav-link" routerLink="/contributors" (click)="collapse()">Team</a>
       </li>
     </ul>
     <app-search-form location="top"></app-search-form>
@@ -30,6 +30,6 @@
 
 <router-outlet></router-outlet>
 
-<br><br>
+<br><br><br>
 
 <app-footer></app-footer>

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

@@ -143,10 +143,10 @@ export class StatisticsComponent implements OnInit {
       switchMap(() => {
         this.spinnerLoading = true;
         if (this.radioGroupForm.controls.dateSpan.value === '2h') {
-          this.websocketService.want(['blocks', 'live-2h-chart']);
+          this.websocketService.want(['blocks', 'stats', 'live-2h-chart']);
           return this.apiService.list2HStatistics$();
         }
-        this.websocketService.want(['blocks']);
+        this.websocketService.want(['blocks',  'stats']);
         if (this.radioGroupForm.controls.dateSpan.value === '24h') {
           return this.apiService.list24HStatistics$();
         }

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

@@ -31,7 +31,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
 
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {