Add aux pow implementation

src/app/core/services/daemon/daemon.service.ts

@@ -818,7 +818,7 @@ export class DaemonService {
     return MinerData.parse(response.result);
   }
 
-  public async AddAuxPoW(blockTemplateBlob: string, auxPoW: AuxPoW[]): Promise<AddedAuxPow> {
+  public async addAuxPoW(blockTemplateBlob: string, auxPoW: AuxPoW[]): Promise<AddedAuxPow> {
     const response = await this.callRpc(new AddAuxPoWRequest(blockTemplateBlob, auxPoW));
 
     return AddedAuxPow.parse(response.result);

src/app/pages/mining/mining.component.html

@@ -283,6 +283,7 @@
         {{ addAuxPowError }}
       </div>
     </div>
+
     <div *ngIf="addAuxPowSuccess" class="alert alert-success d-flex align-items-center justify-content-center text-center" role="alert">
       <h4><i class="bi bi-check-circle m-2"></i></h4>&nbsp;&nbsp;
       <div>
@@ -290,6 +291,71 @@
       </div>
     </div>
 
+
+    <div *ngIf="addAuxPowResult" class="card">
+      <div class="card-header bg-dark text-white">
+        <h4>Result</h4>
+      </div>
+      <div class="card-body">
+        <!-- Placeholder mentre i dati sono in caricamento -->
+        <ng-container>
+          <div class="row">
+            <div class="col-md-12">
+              <h6>Block Template Blob</h6>
+              <p class="text-break bg-dark p-2">{{ addAuxPowResult.blockTemplateBlob }}</p>
+            </div>
+          </div>
+          
+          <!-- Dettagli del BlockHeader -->
+          <div class="row mt-4">
+            <div class="col-md-12">
+              <!--<h6>Block Header</h6>-->
+              <div class="card">
+                <div class="card-body">
+                  <ul class="list-group">
+                    <li class="list-group-item"><strong>Block Hashing Blob:</strong> {{ addAuxPowResult.blockHashingBlob }} bytes</li>
+                    <li class="list-group-item"><strong>Merkle Root:</strong> {{ addAuxPowResult.merkleRoot }} units</li>
+                    <li class="list-group-item"><strong>Merkle Three Depth:</strong> {{ addAuxPowResult.merkleTreeDepth }}</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Dettagli del BlockDetails -->
+          <div class="row mt-4">
+            <div class="col-md-12">
+              <h6>Aux PoW</h6>
+              <div class="card">
+                <div class="card-body">
+                  
+                <table
+                  (load)="initAuxPowTable()"
+                  id="auxPowTable"
+                  data-toggle="auxPowTable"
+                  data-toolbar="#toolbar"
+                  data-pagination="true"
+                  data-height="460"
+                  >
+                  <thead>
+                  <tr>
+                      <th data-field="id">ID</th>
+                      <th data-field="hash">Hash</th>
+                  </tr>
+                  </thead>
+                </table>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+    
+    <hr *ngIf="addAuxPowResult !== undefined" class="my-4">
+
+
     <div class="row g-5 p-2">
       <div class="cold-md-7 col-lg-12">
         <div class="row gy-3">

src/app/pages/mining/mining.component.ts

@@ -5,7 +5,7 @@ import { MinerData } from '../../../common/MinerData';
 import { NavigationEnd, Router } from '@angular/router';
 import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { Chain } from '../../../common/Chain';
-import { AuxPoW, BlockTemplate, GeneratedBlocks, MiningStatus } from '../../../common';
+import { AddedAuxPow, AuxPoW, BlockTemplate, GeneratedBlocks, MiningStatus } from '../../../common';
 import { DaemonDataService } from '../../core/services';
 
 @Component({
@@ -127,10 +127,10 @@ export class MiningComponent implements AfterViewInit {
 
   public addAuxPowAuxPowJsonString: string = '';
   public addAuxPowBlockTemplateBlob: string = '';
-  public auxPowArray: AuxPoW[] = [];
   public addingAuxPow: boolean = false;
   public addAuxPowSuccess: boolean = false;
   public addAuxPowError: string = '';
+  public addAuxPowResult?: AddedAuxPow;
 
   public get validStartMiningMinerAddress(): boolean {
     return this.startMiningMinerAddress != '';
@@ -168,16 +168,29 @@ export class MiningComponent implements AfterViewInit {
     this.navbarService.setLinks(this.navbarLinks);
 
     setTimeout(() => {
-      const $table = $('#chainsTable');
-      $table.bootstrapTable({});
-      $table.bootstrapTable('refreshOptions', {
+      const options = {
         classes: 'table table-bordered table-hover table-dark table-striped'
-      });      
+      };
+
+      const $chainsTable = $('#chainsTable');
+      $chainsTable.bootstrapTable({});
+      $chainsTable.bootstrapTable('refreshOptions', options);   
+      
       this.refresh();
 
     }, 500);
   }
 
+  public initAuxPowTable(): void {
+    const options = {
+      classes: 'table table-bordered table-hover table-dark table-striped'
+    };
+    const $auxPowTable = $('#auxPowTable');
+    $auxPowTable.bootstrapTable({});
+    $auxPowTable.bootstrapTable('refreshOptions', options);
+    $auxPowTable.bootstrapTable('load', this.addAuxPowResult?.auxPoW);
+  }
+
   private onNavigationEnd(): void {
     this.refresh();
   }
@@ -342,8 +355,52 @@ export class MiningComponent implements AfterViewInit {
     this.stoppingMining = false;
   }
 
-  public async addAuxPow(): Promise<void> {
+  public get validAuxPowArray(): boolean {
+    try {
+      const auxPowArray: any[] = JSON.parse(this.addAuxPowAuxPowJsonString);
 
+      if (!Array.isArray(auxPowArray) || auxPowArray.length == 0) {
+        return false;
+      }
+
+      auxPowArray.forEach((auxPow: any) => AuxPoW.parse(auxPow));
+
+      return true;
+    }
+    catch {
+      return false;
+    }
+  }
+
+  public get auxPowArray(): AuxPoW[] {
+    if (!this.validAuxPowArray) {
+      return [];
+    }
+    
+    const _auxPowArray: any[] = JSON.parse(this.addAuxPowAuxPowJsonString);
+
+    const auxPowArray: AuxPoW[] = [];
+
+    _auxPowArray.forEach((auxPow: any) => auxPowArray.push(AuxPoW.parse(auxPow)));
+
+    return auxPowArray;
+  }
+
+  public async addAuxPow(): Promise<void> {
+    this.addingAuxPow = true;
+    this.addAuxPowResult = undefined;
+
+    try {
+      this.addAuxPowResult = await this.daemonService.addAuxPoW(this.addAuxPowBlockTemplateBlob, this.auxPowArray);
+      this.addAuxPowError = ``;
+      this.addAuxPowSuccess = true;
+    }
+    catch (error: any) {
+      this.addAuxPowSuccess = false;
+      this.addAuxPowError = `${error}`;
+    }
+
+    this.addingAuxPow = false;
   }
 
 }

src/app/pages/transactions/transactions.component.html

@@ -209,7 +209,7 @@
       id="txPoolBacklogTable"
       data-toggle="txPoolBacklogTable"
       data-toolbar="#toolbar"
-      data-paged="true"
+      data-pagination="true"
       data-height="460"
       >
       <thead>