mirror of
https://github.com/mempool/mempool.git
synced 2025-01-10 07:26:46 +01:00
8208bbf0b7
* Fix blockchain-blocks skeleton. * Fix blockchain skeleton background. * Fix mempool blockchain skeleton. * Add e2e testing. Add tsconfig. Fix mempool fit to screen. * Fix wrong return. Fix e2e testing. * Fix blockchainblocks connectionstate. Add init action to websocket mock. Add e2e testing for droping websock connection. * Ref e2e code for websocket connection. Fix blockchain blocks skeleton. * Fix state connections. Remove .only e2e tests. * Fix mempool blocks skeleton. * Add fit screen to empty blocks.
52 lines
3.2 KiB
HTML
52 lines
3.2 KiB
HTML
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
|
|
<div class="mempool-blocks-container" *ngIf="(timeAvg$ | async) as timeAvg;">
|
|
<div class="flashing">
|
|
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
|
|
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
|
|
<a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink"> </a>
|
|
<div class="block-body">
|
|
<div class="fees">
|
|
~{{ projectedBlock.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
|
</div>
|
|
<div class="fee-span">
|
|
{{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
|
</div>
|
|
<div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">‎</div>
|
|
<div class="transaction-count">
|
|
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
|
|
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
|
|
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
|
|
</div>
|
|
<div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
|
|
<ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
|
|
<app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
|
|
</ng-template>
|
|
<ng-template #timeDiffMainnet>
|
|
<app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
|
|
</ng-template>
|
|
</div>
|
|
<ng-template #mergedBlock>
|
|
<div class="time-difference">
|
|
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
|
|
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
<span class="animated-border"></span>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #loadingBlocks>
|
|
<div class="mempool-blocks-container">
|
|
<div class="flashing">
|
|
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
|
|
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|