mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-22 22:25:34 +01:00
Code Issues Projects Releases Wiki Activity

Various fixes and design updates.

Browse source
This commit is contained in:
Simon Lindh 2020-02-24 22:51:27 +07:00 • committed by wiz
parent c5c068a8d4
commit 057bff69fc
No known key found for this signature in database
GPG key ID: A394E332255A6173
14 changed files with 55 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/api/blocks.ts
View file

@ -64,7 +64,7 @@ class Blocks {
transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
block.medianFee = transactions.length ? this.median(transactions.map((tx) => tx.feePerVsize)) : 0;
block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : [];
block.feeRange = transactions.length ? this.getFeesInRange(transactions, 8) : [0, 0];
this.blocks.push(block);
if (this.blocks.length > config.KEEP_BLOCK_AMOUNT) {

2
frontend/src/app/app-routing.module.ts
View file

@ -24,7 +24,7 @@ const routes: Routes = [
component: StatisticsComponent,
},
{
path: 'team',
path: 'contributors',
component: AboutComponent,
},
{

18
frontend/src/app/components/about/about.component.html
View file

@ -4,7 +4,7 @@
<img src="./assets/mempool-tube.png" width="63" height="63" />
<br /><br />
<h1>Team</h1>
<h1>Contributors</h1>
<p>Mempool.Space is a realtime Bitcoin blockchain explorer and mempool visualizer.</p>
<p>Lead Developer <a href="https://twitter.com/softbtc">@softbtc</a>
@ -39,7 +39,7 @@
<tr>
<td style="width: 50%;">
<span class="text-small">
Upon connection, send object <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
Default push: <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'.
</span>
</td>
@ -49,7 +49,21 @@
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<span class="text-small">
Push transactions related to address: <span class="code">{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</span>
to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'address-block-transactions' for new block confirmed transactions.
</span>
</td>
<td>
<div class="mx-auto">
<input class="form-control" type="text" value="wss://mempool.space/ws" readonly>
</div>
</td>
</tr>
</table>
<br> <br>
</div>

2
frontend/src/app/components/address/address.component.ts
View file

@ -28,7 +28,7 @@ export class AddressComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {

6
frontend/src/app/components/block/block.component.html
View file

@ -33,7 +33,7 @@
</tr>
<tr>
<td>Status</td>
<td><button *ngIf="latestBlock" class="btn btn-sm btn-success">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</button></td>
<td><ng-template [ngIf]="latestBlock">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</ng-template></td>
</tr>
</tbody>
</table>
@ -49,6 +49,10 @@
<td>Previous Block</td>
<td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 32 }}</a></td>
</tr>
<tr>
<td>Block subsidy</td>
<td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
</tr>
</tbody>
</table>
</div>

15
frontend/src/app/components/block/block.component.ts
View file

@ -21,6 +21,8 @@ export class BlockComponent implements OnInit {
transactions: Transaction[];
isLoadingTransactions = true;
error: any;
blockSubsidy = 50;
conversions: any;
constructor(
private route: ActivatedRoute,
@ -30,7 +32,7 @@ export class BlockComponent implements OnInit {
) { }
ngOnInit() {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
@ -66,6 +68,17 @@ export class BlockComponent implements OnInit {
this.stateService.blocks$
.subscribe((block) => this.latestBlock = block);
this.stateService.conversions$
.subscribe((conversions) => {
this.conversions = conversions;
});
let halvenings = Math.floor(this.block.height / 210000);
while (halvenings > 0) {
this.blockSubsidy = this.blockSubsidy / 2;
halvenings--;
}
}
getBlockTransactions(hash: string) {

2
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View file

@ -18,5 +18,5 @@
</div>
</div>
</div>
<div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 'px' }"></div>
<div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
</div>

2
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View file

@ -104,7 +104,7 @@
#arrow-up {
position: relative;
right: 30px;
left: 30px;
top: 140px;
transition: 1s;
width: 0;

47
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View file

@ -10,18 +10,15 @@ import { StateService } from 'src/app/services/state.service';
})
export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() markHeight = 0;
@Input() txFeePerVSize: number;
blocks: Block[] = [];
blocksSubscription: Subscription;
interval: any;
trigger = 0;
blockWidth = 125;
blockPadding = 30;
arrowLeftPx = 30;
rightPosition = 0;
arrowVisible = false;
arrowLeftPx = 30;
constructor(
private stateService: StateService,
@ -56,38 +53,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.arrowVisible = false;
return;
}
const block = this.blocks.find((b) => b.height === this.markHeight);
if (!block) {
return;
}
const blockindex = this.blocks.indexOf(block);
this.arrowVisible = true;
this.rightPosition = blockindex * -(this.blockWidth + this.blockPadding) - 30;
if (!this.txFeePerVSize) {
return;
}
for (let i = 0; i < block.feeRange.length - 1; i++) {
if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
const txFee = this.txFeePerVSize - block.feeRange[i];
const max = block.feeRange[i + 1] - block.feeRange[i];
const blockLocation = txFee / max;
const chunkPositionOffset = blockLocation * feeRangeChunkSize;
const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
const blockedFilledPercentage = (block.weight > 4000000 ? 4000000 : block.weight) / 4000000;
const arrowRightPosition = blockindex * (-this.blockWidth + this.blockPadding)
+ ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
this.rightPosition = arrowRightPosition - 93;
break;
}
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex !== -1) {
this.arrowVisible = true;
this.arrowLeftPx = blockindex * 155 + 30;
}
}
@ -100,13 +69,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (window.innerWidth <= 768) {
return {
top: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
} else {
return {
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}

2
frontend/src/app/components/blockchain/blockchain.component.html
View file

@ -1,7 +1,7 @@
<div class="text-center" class="blockchain-wrapper">
<div class="position-container">
<app-mempool-blocks [txFeePerVSize]="markHeight ? 0 : txFeePerVSize"></app-mempool-blocks>
<app-blockchain-blocks [markHeight]="markHeight" [txFeePerVSize]="txFeePerVSize"></app-blockchain-blocks>
<app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
<div id="divider" *ngIf="!isLoading; else loadingTmpl"></div>

2
frontend/src/app/components/footer/footer.component.html
View file

@ -1,6 +1,6 @@
<footer class="footer">
<div class="container">
<div class="row" *ngIf="memPoolInfo">
<div class="row text-center" *ngIf="memPoolInfo">
<div class="col">
<span class="txPerSecond">Tx weight per second:</span>&nbsp;

4
frontend/src/app/components/master-page/master-page.component.html
View file

@ -18,7 +18,7 @@
<a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/team" (click)="collapse()">Team</a>
<a class="nav-link" routerLink="/contributors" (click)="collapse()">Team</a>
</li>
</ul>
<app-search-form location="top"></app-search-form>
@ -30,6 +30,6 @@
<router-outlet></router-outlet>
<br><br>
<br><br><br>
<app-footer></app-footer>

4
frontend/src/app/components/statistics/statistics.component.ts
View file

@ -143,10 +143,10 @@ export class StatisticsComponent implements OnInit {
switchMap(() => {
this.spinnerLoading = true;
if (this.radioGroupForm.controls.dateSpan.value === '2h') {
this.websocketService.want(['blocks', 'live-2h-chart']);
this.websocketService.want(['blocks', 'stats', 'live-2h-chart']);
return this.apiService.list2HStatistics$();
}
this.websocketService.want(['blocks']);
this.websocketService.want(['blocks', 'stats']);
if (this.radioGroupForm.controls.dateSpan.value === '24h') {
return this.apiService.list24HStatistics$();
}

2
frontend/src/app/components/transaction/transaction.component.ts
View file

@ -31,7 +31,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {