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

show miner name on block timeline

Browse Source
This commit is contained in:
BitcoinMechanic
2024-09-20 14:31:31 -07:00
parent 156bf12034
commit 25482b9a06
15 changed files with 204 additions and 14 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>

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

@@ -182,8 +182,17 @@
<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">
<span class="on-pool-text">on</span>
<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'">

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

@@ -81,6 +81,33 @@ 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;
}
.on-pool-text {
font-weight: normal;
color: gray;
padding-inline-end: 4px;
}
.pool-logo {
width: 25px;
height: 25px;
position: relative;
top: -1px;
margin-right: 2px;
}
.row {
flex-direction: column;
@media (min-width: 768px) {

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

@@ -61,8 +61,19 @@
</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 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">
<span class="on-pool-text">on</span>
<img 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'">
<span class="on-pool-name-text">{{ block.extras.pool.name }}</span>
</div>
</div>
<ng-template #centralisedPool>
<div class="pool-container">
<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-template>
</a>
</div>
</div>

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

@@ -19,6 +19,37 @@
pointer-events: none;
}
.on-pool-text {
font-weight: normal;
color: gray;
padding-inline-end: 4px;
}
.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 {
display: flex;
flex-direction: column;
}
.pool-container {
margin-top: 12px;
}
.mined-block {
position: absolute;
top: 0px;
@@ -125,7 +156,7 @@
#arrow-up {
position: relative;
left: calc(var(--block-size) * 0.6);
top: calc(var(--block-size) * 1.28);
top: calc(var(--block-size) * 1.38);
width: 0;
height: 0;
border-left: calc(var(--block-size) * 0.2) solid transparent;
@@ -155,7 +186,7 @@
.badge {
position: relative;
top: 15px;
top: 8px;
z-index: 101;
color: #FFF;
}
@@ -168,6 +199,10 @@
margin-right: 2px;
}
.pool-logo.faded {
filter: grayscale(100%) brightness(1.5);
}
.animated {
transition: all 0.15s ease-in-out;
white-space: nowrap;

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

@@ -281,6 +281,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.push(block || {
@@ -323,6 +331,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);

2
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@@ -14,7 +14,7 @@
}
.blockchain-wrapper {
height: 260px;
height: 272px;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */

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

@@ -684,8 +684,18 @@
@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">
<span class="on-pool-text">on</span>
<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 {

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

@@ -60,6 +60,33 @@
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;
}
.on-pool-text {
font-weight: normal;
color: gray;
padding-inline-end: 4px;
}
.pool-logo {
width: 25px;
height: 25px;
position: relative;
top: -1px;
margin-right: 2px;
}
.badge.badge-accelerated {
background-color: var(--tertiary);
color: white;

2
frontend/src/app/dashboard/dashboard.component.scss
View File

@@ -1,6 +1,6 @@
.dashboard-container {
text-align: center;
margin-top: 0.5rem;
margin-top: 1.0rem;
.col {
margin-bottom: 1.5rem;
}

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;
}
}