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

Merge pull request #5539 from BitcoinMechanic/add-miner-name

Browse Source 
Show miner name on block timeline
This commit is contained in:
softsimon
2024-09-26 21:11:18 +04:00
committed by GitHub
parent 758122db5e 81ddce27df
commit 1f84e1722f
14 changed files with 184 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/components/block/block-preview.component.html
View File

@@ -53,15 +53,33 @@
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name }}
<ng-container *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
{{ block.extras.pool.minerNames[1] }}
<div class="on-pool">
on
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name}}
</div>
</ng-container>
<ng-template #centralisedPool>
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name }}
</ng-template>
</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 || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
<ng-container *ngIf="block?.extras.pool.minerNames != undefined && block?.extras.pool.minerNames.length > 1 && block?.extras.pool.minerNames[1] != ''; else centralisedPool">
{{ block?.extras.pool.minerNames[1] }}
<div class="on-pool">
on {{ block?.extras.pool.name }}
</div>
</ng-container>
<ng-template #centralisedPool>
{{ block?.extras.pool.name }}
</ng-template>
</span>
</td>
</tr>
</tbody>

12
frontend/src/app/components/block/block.component.html
View File

@@ -182,8 +182,16 @@
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name }}
<div class="on-pool-container" *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
{{ block.extras.pool.minerNames[1] }}
<div class="on-pool">
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name }}
</div>
</div>
<ng-template #centralisedPool>
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> {{ block.extras.pool.name }}
</ng-template>
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">

21
frontend/src/app/components/block/block.component.scss
View File

@@ -81,6 +81,27 @@ h1 {
}
}
.on-pool-container {
display: inline;
flex-direction: row;
}
.on-pool {
background-color: var(--bg);
display: inline-block;
margin-top: 4px;
padding: .25em .4em;
border-radius: .25rem;
}
.pool-logo {
width: 25px;
height: 25px;
position: relative;
top: -1px;
margin-right: 2px;
}
.row {
flex-direction: column;
@media (min-width: 768px) {

9
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@@ -61,8 +61,13 @@
</div>
<div class="animated" *ngIf="block.extras?.pool != undefined && showPools">
<a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name}}
<div *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
<img [ngbTooltip]="block.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.minerNames[1] }}
</div>
<ng-template #centralisedPool>
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> {{ block.extras.pool.name }}
</ng-template>
</a>
</div>
</div>

36
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@@ -19,6 +19,38 @@
pointer-events: none;
}
.on-pool-name-text {
display: inline-block;
padding-top: 2px;
font-weight: normal;
}
.on-pool {
align-items: center;
background-color: var(--bg);
display: inline-block;
margin-top: 4px;
padding: .25em .4em;
border-radius: .25rem;
}
.on-pool-container {
align-items: center;
position: relative;
top: -8px;
display: flex;
flex-direction: column;
}
.on-pool-container.selected {
top: 0px;
}
.pool-container {
margin-top: 12px;
}
.mined-block {
position: absolute;
top: 0px;
@@ -168,6 +200,10 @@
margin-right: 2px;
}
.pool-logo.faded {
filter: grayscale(100%) brightness(1.5);
}
.animated {
transition: all 0.15s ease-in-out;
white-space: nowrap;

17
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -281,6 +281,15 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (block?.extras) {
block.extras.minFee = this.getMinBlockFee(block);
block.extras.maxFee = this.getMaxBlockFee(block);
if (block.extras.pool?.minerNames) {
block.extras.pool.minerNames = block.extras.pool.minerNames.map((name) => {
name = name.replace(/[^a-zA-Z0-9 ]/g, '');
if (name.length > 16) {
return name.slice(0, 16) + '…';
}
return name;
});
}
}
}
this.blocks.push(block || {
@@ -323,6 +332,14 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (block?.extras) {
block.extras.minFee = this.getMinBlockFee(block);
block.extras.maxFee = this.getMaxBlockFee(block);
if (block.extras.pool?.minerNames) {
block.extras.pool.minerNames = block.extras.pool.minerNames.map((name) => {
if (name.length > 16) {
return name.slice(0, 16) + '…';
}
return name;
});
}
}
this.blocks[blockIndex] = block;
this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);

13
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -684,8 +684,17 @@
@if (pool) {
<td class="wrap-cell">
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: #FFF;padding:0;">
<img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
{{ pool.name }}
<div class="on-pool-container" *ngIf="pool.minerNames != undefined && pool.minerNames.length > 1 && pool.minerNames[1] != ''; else centralisedPool">
{{ pool.minerNames[1] }}
<div class="on-pool">
<img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
{{ pool.name }}
</div>
</div>
<ng-template #centralisedPool>
<img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
{{ pool.name }}
</ng-template>
</a>
</td>
} @else {

21
frontend/src/app/components/transaction/transaction.component.scss
View File

@@ -60,6 +60,27 @@
top: -1px;
}
.on-pool-container {
display: inline;
flex-direction: row;
}
.on-pool {
background-color: var(--bg);
display: inline-block;
margin-top: 4px;
padding: .25em .4em;
border-radius: .25rem;
}
.pool-logo {
width: 25px;
height: 25px;
position: relative;
top: -1px;
margin-right: 2px;
}
.badge.badge-accelerated {
background-color: var(--tertiary);
color: white;

1
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -42,6 +42,7 @@ interface Pool {
id: number;
name: string;
slug: string;
minerNames: string[] | null;
}
export interface TxAuditStatus {

1
frontend/src/app/interfaces/node-api.interface.ts
View File

@@ -203,6 +203,7 @@ export interface BlockExtension {
id: number;
name: string;
slug: string;
minerNames: string[] | null;
}
}