machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add open graph block preview page

Browse Source
This commit is contained in:
Mononaut 2022-07-12 22:04:20 +00:00
parent 7954bdfa94
commit a6535277ef
8 changed files with 209 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/app/app-routing.module.ts
View File

@ -4,8 +4,10 @@ import { StartComponent } from './components/start/start.component';
import { TransactionComponent } from './components/transaction/transaction.component';
import { BlockComponent } from './components/block/block.component';
import { BlockAuditComponent } from './components/block-audit/block-audit.component';
import { BlockPreviewComponent } from './components/block/block-preview.component';
import { AddressComponent } from './components/address/address.component';
import { MasterPageComponent } from './components/master-page/master-page.component';
import { MasterPagePreviewComponent } from './components/master-page-preview/master-page-preview.component';
import { AboutComponent } from './components/about/about.component';
import { StatusViewComponent } from './components/status-view/status-view.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@ -23,7 +25,7 @@ import { AssetComponent } from './components/asset/asset.component';
import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
let routes: Routes = [
{
{
path: 'testnet',
children: [
{
@ -315,6 +317,16 @@ let routes: Routes = [
},
],
},
{
path: 'preview',
component: MasterPagePreviewComponent,
children: [
{
path: 'block/:id',
component: BlockPreviewComponent
},
],
},
{
path: 'status',
component: StatusViewComponent
@ -576,4 +588,3 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
})],
})
export class AppRoutingModule { }

92
frontend/src/app/components/block/block-preview.component.html Normal file
View File

@ -0,0 +1,92 @@
<div class="box preview-box" *ngIf="!error">
<div class="row">
<div class="col-sm">
<h1 class="block-title">
<ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container>
<span class="next-previous-blocks">
<a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
</span>
</ng-template>
<ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template>
<ng-template #blockTemplateContent>
<span class="next-previous-blocks">
<a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
</span>
</ng-template>
</h1>
<table class="table table-borderless table-striped">
<tbody>
<!-- <tr>
<td class="td-width" i18n="block.hash">Hash</td>
<td>&lrm;<a [routerLink]="['/block/' | relativeUrl, block?.id]" title="{{ block?.id }}">{{ block?.id | shortenString : 13 }}</a></td>
</tr> -->
<tr>
<td i18n="block.timestamp">Timestamp</td>
<td>
{{ block?.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
</tr>
<tr>
<td i18n="block.size">Size</td>
<td [innerHTML]="'&lrm;' + (block?.size | bytes: 2)"></td>
</tr>
<tr>
<td i18n="block.weight">Weight</td>
<td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
</tr>
<ng-template [ngIf]="webGlEnabled">
<tr *ngIf="block?.extras?.medianFee != undefined">
<td class="td-width" i18n="block.median-fee">Median fee</td>
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr>
<ng-template [ngIf]="fees !== undefined">
<tr>
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</td>
<ng-template #liquidTotalFees>
<td>
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</td>
</ng-template>
</tr>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
<td>
<app-amount [satoshis]="block?.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</td>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
<div class="col-sm chart-container" *ngIf="webGlEnabled">
<app-block-overview-graph
#blockGraph
[isLoading]="false"
[resolution]="75"
[blockLimit]="stateService.blockVSize"
[orientation]="'top'"
[flip]="false"
(txClickEvent)="onTxClick($event)"
></app-block-overview-graph>
</div>
</div>
</div>

7
frontend/src/app/components/block/block-preview.component.scss Normal file
View File

@ -0,0 +1,7 @@
.box {
padding: 2rem 6rem;
}
.block-title {
margin-bottom: 0.5em;
}

11
frontend/src/app/components/block/block-preview.component.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
import { BlockComponent } from './block.component';
@Component({
selector: 'app-block-preview',
templateUrl: './block-preview.component.html',
styleUrls: ['./block.component.scss', './block-preview.component.scss']
})
export class BlockPreviewComponent extends BlockComponent {
}

21
frontend/src/app/components/master-page-preview/master-page-preview.component.html Normal file
View File

@ -0,0 +1,21 @@
<ng-container *ngIf="{ val: network$ | async } as network">
<div class="preview-wrapper">
<router-outlet></router-outlet>
<footer>
<span class="footer-brand" style="position: relative;">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
</span>
<div [ngSwitch]="network.val">
<span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</span>
<span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</span>
<span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</span>
<span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
<span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
</div>
</footer>
</div>
</ng-container>

35
frontend/src/app/components/master-page-preview/master-page-preview.component.scss Normal file
View File

@ -0,0 +1,35 @@
.preview-wrapper {
position: relative;
display: block;
margin: auto;
max-width: 1024px;
max-height: 512px;
padding-bottom: 64px;
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
min-height: 64px;
padding: 0rem 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #11131f;
text-align: start;
}
.footer-brand {
width: 60%;
}
.network {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}

25
frontend/src/app/components/master-page-preview/master-page-preview.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { Component, OnInit } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
@Component({
selector: 'app-master-page-preview',
templateUrl: './master-page-preview.component.html',
styleUrls: ['./master-page-preview.component.scss'],
})
export class MasterPagePreviewComponent implements OnInit {
network$: Observable<string>;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
urlLanguage: string;
constructor(
public stateService: StateService,
private languageService: LanguageService,
) { }
ngOnInit() {
this.network$ = merge(of(''), this.stateService.networkChanged$);
this.urlLanguage = this.languageService.getLanguageForUrl();
}
}

5
frontend/src/app/shared/shared.module.ts
View File

@ -7,6 +7,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode } from '@fortawesome/free-solid-svg-icons';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MasterPageComponent } from '../components/master-page/master-page.component';
import { MasterPagePreviewComponent } from '../components/master-page-preview/master-page-preview.component';
import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
import { AboutComponent } from '../components/about/about.component';
@ -44,6 +45,7 @@ import { StartComponent } from '../components/start/start.component';
import { TransactionComponent } from '../components/transaction/transaction.component';
import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
import { BlockComponent } from '../components/block/block.component';
import { BlockPreviewComponent } from '../components/block/block-preview.component';
import { BlockAuditComponent } from '../components/block-audit/block-audit.component';
import { BlockOverviewGraphComponent } from '../components/block-overview-graph/block-overview-graph.component';
import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
@ -110,11 +112,13 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
AmountComponent,
AboutComponent,
MasterPageComponent,
MasterPagePreviewComponent,
BisqMasterPageComponent,
LiquidMasterPageComponent,
StartComponent,
TransactionComponent,
BlockComponent,
BlockPreviewComponent,
BlockAuditComponent,
BlockOverviewGraphComponent,
BlockOverviewTooltipComponent,
@ -215,6 +219,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
StartComponent,
TransactionComponent,
BlockComponent,
BlockPreviewComponent,
BlockAuditComponent,
BlockOverviewGraphComponent,
BlockOverviewTooltipComponent,