lukechilds
/
block-explorer
mirror of https://github.com/lukechilds/block-explorer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

web-ui: Complete details on the BlockDetails view

scalafmt-draft
Alexis Hernandez 7 years ago
parent
a9da5951b5
commit
9c42a9e3f7
3 changed files with 211 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      web-ui/src/app/app.component.ts
  2. 152
      web-ui/src/app/components/block-details/block-details.component.html
  3. 44
      web-ui/src/app/components/block-details/block-details.component.ts

20
web-ui/src/app/app.component.ts
View File

@ -48,6 +48,7 @@ export class AppComponent {
'label.confirmations': 'Confirmations',
'label.blockhash': 'Block Hash',
'label.blocktime': 'Block Time',
'label.medianTime': 'Median Time',
'label.noInput': 'No input',
'label.coinbase': 'Coinbase',
'label.output': 'Receivers',
@ -60,7 +61,24 @@ export class AppComponent {
'label.balance': 'Balance',
'label.received': 'Received',
'label.spent': 'Spent',
'label.transactionCount': 'Transactions'
'label.transactionCount': 'Transactions',
'label.blockType': 'Block type',
'label.next': 'Next',
'label.previous': 'Previous',
'label.merkleRoot': 'Merkle root',
'label.size': 'Size',
'label.version': 'Version',
'label.nonce': 'Nonce',
'label.bits': 'Bits',
'label.chainwork': 'Chainwork',
'label.difficulty': 'Difficulty',
'label.transactions': 'Transactions',
'label.rewards': 'Rewards',
'label.coinstake': 'Coinstake',
'label.masternode': 'Master node',
'label.amount': 'Amount',
'label.blockReward': 'Block reward'
};
}
}

152
web-ui/src/app/components/block-details/block-details.component.html
View File

@ -1,3 +1,149 @@
<p>
block-details works!
</p>
<div>
<div [hidden]="blockDetails != null">
<alert>{{'message.blockNotFound' | translate}}</alert>
</div>
<div *ngIf="blockDetails != null">
<!-- TODO: probably it would be better to just get the block type from the server-->
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blockType' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{getBlockType(blockDetails)}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blockhash' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.hash}} ({{blockDetails.block.height}})</label>
</div>
<div class="row" *ngIf="blockDetails.block.nextBlockhash != null">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.next' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">
<a routerLink="/blocks/{{blockDetails.block.nextBlockhash}}">{{blockDetails.block.height + 1}}</a>
</label>
</div>
<div class="row" *ngIf="blockDetails.block.previousBlockhash != null">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.previous' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">
<a routerLink="/blocks/{{blockDetails.block.previousBlockhash}}">{{blockDetails.block.height - 1}}</a>
</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.merkleRoot' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.merkleRoot}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.confirmations' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.confirmations}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.size' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.size}} bytes</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.version' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.version}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.nonce' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.nonce}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.bits' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.bits}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.chainwork' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.chainwork}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.difficulty' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{blockDetails.block.difficulty}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blocktime' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{blockDetails.block.time * 1000 | date:'MMMM d, y, h:mm:ss a'}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.medianTime' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{blockDetails.block.medianTime * 1000 | date:'MMMM d, y, h:mm:ss a'}}</label>
</div>
<hr>
<!-- rewards -->
<div>
<div *ngIf="isPoW(blockDetails)">
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.rewards' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blockReward' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{blockDetails.rewards.reward.value}} {{'label.coinName' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.address' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">
<a routerLink="/addresses/{{blockDetails.rewards.reward.address}}">{{blockDetails.rewards.reward.address}}</a>
</label>
</div>
</div>
<div *ngIf="!isPoW(blockDetails)">
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.rewards' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-offset-1 col-md-offset-1 col-offset-xs-1 col-offset-lg-1">{{'label.coinstake' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.amount' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{blockDetails.rewards.coinstake.value}} {{'label.coinName' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.address' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">
<a routerLink="/addresses/{{blockDetails.rewards.coinstake.address}}">{{blockDetails.rewards.coinstake.address}}</a>
</label>
</div>
<div *ngIf="blockDetails.rewards.masternode != null">
<div class="row">
<label class="col-sm-offset-1 col-md-offset-1 col-offset-xs-1 col-offset-lg-1">{{'label.masternode' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.amount' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{blockDetails.rewards.masternode.value}} {{'label.coinName' | translate}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.address' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">
<a routerLink="/addresses/{{blockDetails.rewards.masternode.address}}">{{blockDetails.rewards.masternode.address}}</a>
</label>
</div>
</div>
</div>
</div>
<hr>
<!-- transactions -->
<div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactions' | translate}}</label>
</div>
<div class="row" *ngFor="let item of blockDetails.block.transactions">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">
<a routerLink="/transactions/{{item}}">{{item}}</a>
</label>
</div>
</div>
</div>
</div>

44
web-ui/src/app/components/block-details/block-details.component.ts
View File

@ -1,4 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { BlockDetails } from '../../models/block';
import { BlocksService } from '../../services/blocks.service';
import { ErrorService } from '../../services/error.service';
import { NavigatorService } from '../../services/navigator.service';
@Component({
selector: 'app-block-details',
@ -7,9 +16,42 @@ import { Component, OnInit } from '@angular/core';
})
export class BlockDetailsComponent implements OnInit {
constructor() { }
blockDetails: BlockDetails;
constructor(
private route: ActivatedRoute,
private router: Router,
private navigatorService: NavigatorService,
private blocksService: BlocksService,
private errorService: ErrorService) { }
ngOnInit() {
const blockhash = this.route.snapshot.paramMap.get('blockhash');
this.blocksService.get(blockhash).subscribe(
response => this.onBlockRetrieved(response),
response => this.onError(response)
);
}
private onBlockRetrieved(response: BlockDetails) {
this.blockDetails = response;
}
private onError(response: any) {
this.errorService.renderServerErrors(null, response);
}
getBlockType(details: BlockDetails): string {
if (details.block.tposContract != null) {
return 'Trustless Proof of Stake';
} else if (details.block.height > 75) {
return 'Proof of Stake';
} else {
return 'Proof of Work';
}
}
isPoW(details: BlockDetails): boolean {
return details.block.height <= 75;
}
}

Write Preview
Loading…
Cancel
Save