Block queue implementation

src/app/pages/blockchain/blockchain.component.html

@@ -13,7 +13,53 @@
 </div>
 <div *ngIf="daemonRunning && !daemonStopping && !daemonStarting" class="tab-content" id="pills-tabContent">
   
-  <div class="tab-pane fade show active" id="pills-last-block-header" role="tabpanel" aria-labelledby="pills-last-block-header-tab" tabindex="0">
+  <div class="tab-pane fade show active" id="pills-block-queue" role="tabpanel" aria-labelledby="pills-block-queue-tab" tabindex="0">
+    <h4 class="mb-3">Overview of current block set queue</h4>
+
+    <div class="card p-1">
+      <div class="card-header bg-primary text-white d-flex">
+        <h4>Block Queue</h4>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-12">
+            <h6>Legend</h6>
+            <ul class="list-group">
+              <li class="list-group-item"><span class="block requested">.</span> Set requested but not received</li>
+              <li class="list-group-item"><span class="block received">o</span> Set received</li>
+              <li class="list-group-item"><span class="block matched">m</span> Received set that matches the next blocks needed</li>
+              <li class="list-group-item"><span class="block target">&#60;</span> Needed set in order to continue synchronization</li>
+              <li class="list-group-item"><span class="block future">_</span> Set beyond current sync height</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="row mt-4">
+          <div class="col-md-12">
+            <h6>Queue</h6>
+            <div class="card">
+              <div class="card-body">
+                <div class="block-queue">
+                  <ng-container *ngFor="let block of overviewArray; let i = index">
+                    <span [ngClass]="getBlockClass(block)" class="block">
+                      {{ block }}
+                    </span>
+                    <!-- Show connector except after the last block -->
+                    <span *ngIf="i < overviewArray.length - 1" class="connector"></span>
+                  </ng-container>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+  </div>
+
+  <div class="tab-pane fade" id="pills-last-block-header" role="tabpanel" aria-labelledby="pills-last-block-header-tab" tabindex="0">
     <div *ngIf="getLastBlockError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
       <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
       <div>

src/app/pages/blockchain/blockchain.component.scss

@@ -5,4 +5,58 @@
 
 .placeholder-glow .placeholder {
   background-color: rgba(0, 0, 0, 10%);
+}
+.block-queue {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px; /* Space between blocks and connectors */
+  align-items: center;
+  justify-content: center;
+}
+
+.block {
+  width: 35px;
+  height: 35px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-weight: bold;
+  color: #fff;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+
+.requested {
+  background-color: #6c757d; /* Gray for requested */
+}
+
+.received {
+  background-color: #007bff; /* Blue for received */
+}
+
+.matched {
+  background-color: #28a745; /* Green for matched */
+}
+
+.connector {
+  width: 15px;
+  height: 3px;
+  background-color: #888;
+  border-radius: 2px;
+  position: relative;
+  top: -5px; /* Align with the blocks */
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Block marker for current target */
+.target {
+  background-color: #ffc107; /* Yellow to highlight the target */
+  border: 1px solid #ffeb3b;
+}
+
+/* Future blocks beyond the current sync height */
+.future {
+  background-color: #e0e0e0; /* Light grey for future blocks */
+  color: #6c757d;
 }

src/app/pages/blockchain/blockchain.component.ts

@@ -1,7 +1,7 @@
 import { Component, NgZone } from '@angular/core';
 import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { DaemonService } from '../../core/services/daemon/daemon.service';
-import { Block, BlockHeader } from '../../../common';
+import { Block, BlockHeader, SyncInfo } from '../../../common';
 import { DaemonDataService } from '../../core/services';
 import { NavbarService } from '../../shared/components/navbar/navbar.service';
 import { BasePageComponent } from '../base-page/base-page.component';
@@ -36,6 +36,10 @@ export class BlockchainComponent extends BasePageComponent {
   public get getLastBlockError(): string {
     return this.daemonSynchronized ? '' : 'Last block header not available, blockchain is not synchronized';
   }
+
+  public get syncInfo(): SyncInfo | undefined {
+    return this.daemonData.syncInfo;
+  }
   
   public block?: Block;
   public getBlockByHash: boolean = false;
@@ -67,9 +71,14 @@ export class BlockchainComponent extends BasePageComponent {
   public pruneBlockchainError: string = '';
   public blockchainPruned: boolean = false;
 
+  public get overviewArray(): string[] {
+    return this.daemonData.syncInfo ? this.daemonData.syncInfo.overview.split('').filter((status: string) => status != '[' && status != ']') : [];
+  }
+
   constructor(private daemonService: DaemonService, private daemonData: DaemonDataService, navbarService: NavbarService, private ngZone: NgZone) {
     super(navbarService);
     this.setLinks([
+      new NavbarLink('pills-block-queue-tab', '#pills-block-queue', 'pills-block-queue', true, 'Block Queue'),
       new NavbarLink('pills-last-block-header-tab', '#pills-last-block-header', 'pills-last-block-header', false, 'Last Block Header'),
       new NavbarLink('pills-get-block-tab', '#pills-get-block', 'pills-get-block', false, 'Get Block'),
       new NavbarLink('pills-get-block-header-tab', '#pills-get-block-header', 'pills-get-block-header', false, 'Get Block Header'),
@@ -79,6 +88,22 @@ export class BlockchainComponent extends BasePageComponent {
     ]);
   }
 
+  public getBlockClass(block: string): string {
+    switch (block) {
+      case '.':
+        return 'requested';
+      case 'o':
+        return 'received';
+      case 'm':
+        return 'matched';
+      case '<':
+        return 'target';
+      case '_':
+        return 'future';
+      default:
+        return '';
+    }
+  }
   public async getBlock(): Promise<void> {
     this.gettingLastBlock = true;
     try {

src/common/DaemonSettings.ts

@@ -419,7 +419,7 @@ export class DaemonSettings {
     if (this.padTransactions) options.push(`--pad-transactions`);
     if (this.maxConnectionsPerIp >= 0) options.push(`--max-connections-per-ip`, `${this.maxConnectionsPerIp}`);
     if (this.rpcBindIp != '') options.push(`--rpc-bind-ip`, `${this.rpcBindIp}`);
-    if (this.rpcBindPort) options.push(`--rpc-bind-ip`, `${this.rpcBindIp}`);
+    if (this.rpcBindPort) options.push(`--rpc-bind-port`, `${this.rpcBindPort}`);
     if (this.restrictedBindPort) options.push(`--restricted-bind-port`, `${this.restrictedBindPort}`);
     if (this.restrictedRpc) options.push(`--restricted-rpc`);
     if (this.bootstrapDaemonAddress != '') options.push(`--bootstrap-daemon-address`, this.bootstrapDaemonAddress);