Socket Live data

server/socket/block.ts

@@ -9,8 +9,7 @@ export async function universalGetLatestBlockDetails(socket) {
     letest_block_duration = "";
 
   const BlockchainLatestBlockQuery = await getConnection().query(
-    "SELECT timestamp,height,edge_bits,hash,secondary_scaling, previous_id, total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block ORDER BY timestamp DESC LIMIT 1"
-  );
+    "SELECT bb.timestamp,bb.proof,bb.height,bb.edge_bits,bb.hash,bb.secondary_scaling, bb.previous_id, bb.total_difficulty_cuckaroo, bb.total_difficulty_cuckatoo, bb.total_difficulty_progpow, bb.total_difficulty_randomx, COUNT(DISTINCT(bi.block_id)) AS input_count, COUNT(DISTINCT(bk.block_id)) AS kernel_count, COUNT(DISTINCT(bo.block_id)) AS output_count FROM blockchain_block bb LEFT JOIN blockchain_input bi ON bi.block_id = bb.hash LEFT JOIN blockchain_kernel bk ON bk.block_id = bb.hash LEFT JOIN blockchain_output bo ON bo.block_id = bb.hash group by bb.hash, bb.timestamp ORDER BY bb.timestamp DESC LIMIT 1");
   const BlockchainPreviousBlockQuery = await getConnection().query(
     "SELECT total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block WHERE hash=" +
       "'" +
@@ -132,10 +131,58 @@ export async function universalGetLatestBlockDetails(socket) {
       BlockchainPreviousBlockQuery[0].total_difficulty_randomx;
   }
 
+  if(BlockchainLatestBlockQuery[0].proof == "RandomX"){
+   var Difficulty = targetdifficultyrandomx;
+  }else if(BlockchainLatestBlockQuery[0].proof == "ProgPow"){
+    var Difficulty = targetdifficultyprogpow;
+  }else if(BlockchainLatestBlockQuery[0].proof == "Cuckoo" ){
+    var Difficulty = targetdifficultycuckatoo;
+  }
+
   block_height = BlockchainLatestBlockQuery[0].height;
+
+  var current_date = new Date();
+  // var current_date = new Date("Sat Apr 2 2018 15:04:00 GMT+0530 (IST)");
+
+  var enddaydif =
+    Math.abs(
+      BlockchainLatestBlockQuery[0].timestamp.getTime() -
+        current_date.getTime(),
+    ) /
+    (1000 * 60 * 60 * 24);
+  var enddayrnd = Math.round(enddaydif);
+  // if(enddayrnd < 1) {
+  var millseconds = Math.abs(
+    BlockchainLatestBlockQuery[0].timestamp.getTime() -
+      current_date.getTime(),
+  );
+
+  var seconds = Math.floor(millseconds / 1000);
+  var days = Math.floor(seconds / 86400);
+  var hours = Math.floor((seconds % 86400) / 3600);
+  var minutes = Math.floor(((seconds % 86400) % 3600) / 60);
+  seconds = seconds % 60;
+  var dateTimeDurationString = '';
+
+  if (days > 0 && (hours === 0 && minutes === 0))
+    dateTimeDurationString += days > 1 ? days + 'd ' : days + 'd ';
+  if (days > 0 && (hours > 0 || minutes > 0))
+    dateTimeDurationString += days > 1 ? days + 'd ' : days + 'd ';
+  if (hours > 0 && minutes > 0)
+    dateTimeDurationString += hours > 1 ? hours + 'h ' : hours + 'h ';
+  if (hours > 0 && minutes === 0)
+    dateTimeDurationString += hours > 1 ? hours + 'h ' : hours + 'h ';
+  if (minutes > 0)
+    dateTimeDurationString += minutes > 1 ? minutes + 'm ' : minutes + 'm ';
+  if (seconds > 0)
+    dateTimeDurationString += seconds > 1 ? seconds + 's ' : seconds + 's ';
+
   var TotalCuckoo =
     parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckatoo) +
     parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo);
+    let balance = BlockchainLatestBlockQuery[0].hash.substring(2, 62);
+    let arr = balance.match(/.{1,6}/g);
+    var hasharray = arr.map(i => '#' + i);
 
   socket.emit("latestblockdetail", {
     block_height,
@@ -149,6 +196,15 @@ export async function universalGetLatestBlockDetails(socket) {
     targetdifficultyprogpow,
     targetdifficultyrandomx,
     TotalCuckoo,
+    age : dateTimeDurationString,
+    input_count: BlockchainLatestBlockQuery[0].input_count,
+    kernal_count: BlockchainLatestBlockQuery[0].kernal_count,
+    output_count: BlockchainLatestBlockQuery[0].output_count,
+    proof: BlockchainLatestBlockQuery[0].proof,
+    hasharray: hasharray,
+    Difficulty: Difficulty,
+    hashstart:BlockchainLatestBlockQuery[0].hash.slice(0, 2),
+    hashend:BlockchainLatestBlockQuery[0].hash.slice(62,64),
     TotalDifficultyCuckaroo:
       BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo,
     TotalDifficultyCuckatoo:

src/app/view/home/block-append/block-append.component.css

@@ -0,0 +1,12 @@
+@keyframes MyAnimation {
+  0% {
+    margin-top: -50px;
+  }
+  100% {
+    margin-top: 0px;
+  }
+}
+
+.my-animation {
+  animation: MyAnimation 2s;
+}

src/app/view/home/block-append/block-append.component.html

@@ -0,0 +1,37 @@
+<div [ngClass]="{'mobile_table alt_color' : true, hght_40: item.id != clickValue }"  id="hash_{{blockdetails.blockchain_block_height}}" #item >
+<div class="my-animation">
+  <div class="row">
+    <div class="col-6 col-md-3 tble_col">
+     <div class="block_div">  <span *ngIf="item.id != clickValue" (click)="onClickPlus(blockdetails.blockchain_block_height);" class="expnd_blck"><i class="fa fa-plus"></i></span>
+      <span  *ngIf="item.id == clickValue" (click)="onClickMinus(blockdetails.blockchain_block_height);" class="expnd_blck"><i class="fa fa-minus"></i></span><h6>Height</h6><span class="blck_value link_to_detail" routerLink="/blockdetail/{{ blockdetails.blockchain_block_height }}">{{ blockdetails.blockchain_block_height }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div [title]="blockdetails.blockchain_block_hash" routerLink="/blockdetail/{{ blockdetails.blockchain_block_hash }}" class="block_div link_to_detail"><h6>Hash</h6><span class="blck_value">{{ blockdetails.hashstart
+      }}<span
+        *ngFor="let color of blockdetails.hasharray"
+        class="hash"
+        [ngStyle]="{ 'background-color': color }"
+      ></span
+      >{{ blockdetails.hashend }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div"><h6 >Age</h6><span class="blck_value">{{ blockdetails.age }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div"><h6>Difficulty</h6><span class="blck_value">{{ blockdetails.target_difficulty | number }}</span></div>
+    </div>
+    <div class="col-6 col-sm-6 col-md-3 tble_col">
+      <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ blockdetails.PoWAlgo }}</span></div>
+    </div>
+    <div class="col-6 col-sm-6 col-md-3 tble_col">
+      <div class="block_div"><h6>#Inputs</h6><span class="blck_value">{{ blockdetails.input_count }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div"><h6 >#Outputs</h6><span class="blck_value">{{ blockdetails.output_count }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div" ><h6>#Kernels</h6><span class="blck_value">{{ blockdetails.kernal_count }}</span></div>
+    </div>
+  </div>
+</div>
+</div>

src/app/view/home/block-append/block-append.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockAppendComponent } from './block-append.component';
+
+describe('BlockAppendComponent', () => {
+  let component: BlockAppendComponent;
+  let fixture: ComponentFixture<BlockAppendComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BlockAppendComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockAppendComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/view/home/block-append/block-append.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-block-append',
+  templateUrl: './block-append.component.html',
+  styleUrls: ['./block-append.component.css'],
+})
+export class BlockAppendComponent implements OnInit {
+  public blockdetails: any;
+  public clickValue: any;
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log(this.blockdetails);
+  }
+
+  public onClickPlus(height) {
+    // this.beforeClick = true;
+    this.clickValue = 'hash_' + height;
+  }
+
+  public onClickMinus(height) {
+    this.clickValue = 0;
+  }
+}

src/app/view/home/home.module.ts

@@ -7,6 +7,7 @@ import { GraphListComponent } from './graph-list/graph-list.component';
 import { BlockDetailListComponent } from './block-detail-list/block-detail-list.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared/shared.module';
+import { BlockAppendComponent } from './block-append/block-append.component';
 
 import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
 import { CookieService } from 'ngx-cookie-service';
@@ -22,6 +23,7 @@ import { CustomLoader } from 'src/app/app.module';
     LatestblocksComponent,
     GraphListComponent,
     BlockDetailListComponent,
+    BlockAppendComponent
   ],
   imports: [
     CommonModule,
@@ -30,9 +32,10 @@ import { CustomLoader } from 'src/app/app.module';
     ReactiveFormsModule,
     SharedModule,
     TranslateModule.forChild({
-      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         
+      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},
   })
   ],
+  entryComponents: [BlockAppendComponent],
   providers: [TransServiceService,CookieService,ChartService],
 })
 export class HomeModule {}

src/app/view/home/latestblocks/latestblocks.component.html

@@ -45,6 +45,7 @@
       </div>
     </div>
   </div>
+  <div #block></div>
   <div [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"
     id="hash_{{hashvalue.blockchain_block_height}}" #item *ngFor="let hashvalue of hashvalues">
 
@@ -197,7 +198,7 @@
                 <h5 class="mb-0">Total Difficulty</h5>
               </div>
             </div>
-           
+
           </div>
         </div>
 
@@ -248,7 +249,7 @@
         </div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div">           
+        <div class="block_div">
             <h6>User Agent</h6>
           <span class="blck_value">{{ peer.user_agent }}</span>
         </div>
@@ -279,8 +280,8 @@
       </div>
     </div>
 
-    
+
   </div>
 
 
-</div>
+</div>

src/app/view/home/latestblocks/latestblocks.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef, ViewChild,ComponentFactoryResolver} from '@angular/core';
 import { HttpClient, HttpParams, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { ChartService } from '../../../shared/services/chart.service';
 import { FormGroup, FormControl } from '@angular/forms';
 import { TransServiceService } from '../../../shared/services/trans-service.service';
 import { map, catchError } from 'rxjs/operators';
 import { throwError} from 'rxjs';
+import { BlockAppendComponent } from '../block-append/block-append.component';
 
 @Component({
   selector: 'epic-explorer-latestblocks',
@@ -14,21 +15,28 @@ import { throwError} from 'rxjs';
 export class LatestblocksComponent implements OnInit {
   public hashvalues: any;
   public pagedata: any = [];
+  public blockAppend: any;
+  public blockdetails: any;
+  public lastblock: any;
   public clickValue: any;
   public clickPeer: any;
   public beforeClick: boolean = false;
   public clickonMobile: boolean = true;
   public peers: any;
-  
+
   paginationForm = new FormGroup({
     pagesize: new FormControl(20),
   });
 
-  constructor(private chartService: ChartService,public translate: TransServiceService,public http: HttpClient) {}
+  @ViewChild('block', { read: ViewContainerRef,static: true }) block: ViewContainerRef;
+
+
+  constructor(private chartService: ChartService,public translate: TransServiceService,public http: HttpClient, private resolver: ComponentFactoryResolver) {}
 
   ngOnInit() {
     this. getpeersList();
     this.gettinghashList(1, 20);
+    this.getLastCeatedBlock();
   }
 
   public gettinghashList(CurrentPage, PageSize) {
@@ -46,6 +54,41 @@ export class LatestblocksComponent implements OnInit {
     );
   }
 
+  getLastCeatedBlock() {
+    this.chartService.getLatestblockdetails().subscribe(response => {
+      this.blockdetails = response;
+      console.log(this.blockdetails);
+      if (this.lastblock != this.blockdetails.block_height) {
+        console.log('Create');
+        this.createBlock();
+      }
+      this.lastblock = this.blockdetails.block_height;
+    });
+  }
+
+  public createBlock() {
+    const blockFactory = this.resolver.resolveComponentFactory(
+      BlockAppendComponent,
+    );
+    const block = this.block.createComponent(blockFactory);
+    this.blockAppend = {};
+    this.blockAppend['blockchain_block_hash'] = this.blockdetails.hash;
+    this.blockAppend[
+      'blockchain_block_height'
+    ] = this.blockdetails.block_height;
+    this.blockAppend['age'] = this.blockdetails.age;
+    this.blockAppend['target_difficulty'] = this.blockdetails.Difficulty;
+    this.blockAppend['PoWAlgo'] = this.blockdetails.proof;
+    this.blockAppend['input_count'] = this.blockdetails.input_count;
+    this.blockAppend['output_count'] = this.blockdetails.output_count;
+    this.blockAppend['kernal_count'] = this.blockdetails.kernel_count;
+    this.blockAppend['hashstart'] = this.blockdetails.hashstart;
+    this.blockAppend['hashend'] = this.blockdetails.hashend;
+    this.blockAppend['hasharray'] = this.blockdetails.hasharray;
+
+    block.instance.blockdetails = this.blockAppend;
+  }
+
   public getpeersList() {
     this.chartService.apiGetRequest('','/blockchain_kernel/getpeers').subscribe(
       res => {
@@ -58,7 +101,7 @@ export class LatestblocksComponent implements OnInit {
       // this.peers = [{"id": 1,"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"54.233.177.64:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10},{"id": 2,"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"95.216.102.217:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10},{"id": 3,"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"90.190.172.177:3414","direction":"Outbound","total_difficulty":{"cuckaroo":2,"cuckatoo":2,"randomx":1024,"progpow":256},"height":0},{"id": 4,"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"67.189.82.196:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10},{"id": 5,"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"167.71.72.2:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10}];
 }
 
-  
+
 
   public onClickPlus(height) {
     // this.beforeClick = true;

src/assets/css/style.css

@@ -645,7 +645,14 @@ body.dark_theme {
 .dark_theme .view_content table{border-color: #384566;}
 .dark_theme .card-body{background-color: #1c2437;}
 .diff_margin{margin-bottom: -10px !important; margin-top: -10px !important;}
-
+@keyframes yellowfade {
+  from {
+    background: yellow;
+  }
+  to {
+    background: transparent;
+  }
+}
 .item-highlight {
   animation: yellowfade 5s ;
   -moz-animation: yellowfade 5s ;