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

refactor miner name truncation

Browse Source
This commit is contained in:
Mononaut 2024-09-24 17:28:46 +00:00
parent 1f84e1722f
commit b29c4cf228
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
9 changed files with 53 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/utils/bitcoin-script.ts
View File

@ -223,5 +223,5 @@ export function parseDATUMTemplateCreator(coinbaseRaw: string): string[] | null
let tagString = String.fromCharCode(...tags); let tagString = String.fromCharCode(...tags);
tagString = tagString.replace('\x00', ''); tagString = tagString.replace('\x00', '');
return tagString.split('\x0f'); return tagString.split('\x0f').map((name) => name.replace(/[^a-zA-Z0-9 ]/g, ''));
} }

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

@ -53,32 +53,28 @@
<td i18n="block.miner">Miner</td> <td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD"> <td *ngIf="stateService.env.MINING_DASHBOARD">
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;"> <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
<ng-container *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool"> <span class="miner-name" *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''">
{{ block.extras.pool.minerNames[1] }} @if (block.extras.pool.minerNames[1].length > 16) {
<div class="on-pool"> {{ block.extras.pool.minerNames[1].slice(0, 15) }}…
on } @else {
<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.minerNames[1] }}
{{ block.extras.pool.name}} }
</div> </span>
</ng-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'">
<ng-template #centralisedPool> {{ block.extras.pool.name }}
<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> </a>
</td> </td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'"> <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge" <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'"> [class]="!block?.extras.pool.name || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
<ng-container *ngIf="block?.extras.pool.minerNames != undefined && block?.extras.pool.minerNames.length > 1 && block?.extras.pool.minerNames[1] != ''; else centralisedPool"> <span class="miner-name" *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''">
{{ block?.extras.pool.minerNames[1] }} @if (block.extras.pool.minerNames[1].length > 16) {
<div class="on-pool"> {{ block.extras.pool.minerNames[1].slice(0, 15) }}…
on {{ block?.extras.pool.name }} } @else {
</div> {{ block.extras.pool.minerNames[1] }}
</ng-container> }
<ng-template #centralisedPool> </span>
{{ block?.extras.pool.name }} {{ block.extras.pool.name }}
</ng-template>
</span> </span>
</td> </td>
</tr> </tr>

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

@ -182,16 +182,15 @@
<td i18n="block.miner">Miner</td> <td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD"> <td *ngIf="stateService.env.MINING_DASHBOARD">
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;"> <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
<div class="on-pool-container" *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool"> <span class="miner-name" *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''">
{{ block.extras.pool.minerNames[1] }} @if (block.extras.pool.minerNames[1].length > 16) {
<div class="on-pool"> {{ block.extras.pool.minerNames[1].slice(0, 15) }}…
<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'"> } @else {
{{ block.extras.pool.name }} {{ block.extras.pool.minerNames[1] }}
</div> }
</div> </span>
<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'">
<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 }} {{ block.extras.pool.name }}
</ng-template>
</a> </a>
</td> </td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'"> <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">

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

@ -81,17 +81,9 @@ h1 {
} }
} }
.on-pool-container { .miner-name {
display: inline; margin-right: 4px;
flex-direction: row; vertical-align: top;
}
.on-pool {
background-color: var(--bg);
display: inline-block;
margin-top: 4px;
padding: .25em .4em;
border-radius: .25rem;
} }
.pool-logo { .pool-logo {

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

@ -60,11 +60,11 @@
</ng-container> </ng-container>
</div> </div>
<div class="animated" *ngIf="block.extras?.pool != undefined && showPools"> <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]"> <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [class.miner-name]="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
<div *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool"> <ng-container *ngIf="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'"> <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] }} {{ block.extras.pool.minerNames[1] }}
</div> </ng-container>
<ng-template #centralisedPool> <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 }} <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> </ng-template>

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

@ -187,9 +187,16 @@
.badge { .badge {
position: relative; position: relative;
top: 15px; top: 19px;
z-index: 101; z-index: 101;
color: #FFF; color: #FFF;
overflow: hidden;
text-overflow: ellipsis;
max-width: 145px;
&.miner-name {
max-width: 125px;
}
} }
.pool-logo { .pool-logo {

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

@ -281,15 +281,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (block?.extras) { if (block?.extras) {
block.extras.minFee = this.getMinBlockFee(block); block.extras.minFee = this.getMinBlockFee(block);
block.extras.maxFee = this.getMaxBlockFee(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 || { this.blocks.push(block || {
@ -332,14 +323,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (block?.extras) { if (block?.extras) {
block.extras.minFee = this.getMinBlockFee(block); block.extras.minFee = this.getMinBlockFee(block);
block.extras.maxFee = this.getMaxBlockFee(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.blocks[blockIndex] = block;
this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex); this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);

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

@ -684,17 +684,15 @@
@if (pool) { @if (pool) {
<td class="wrap-cell"> <td class="wrap-cell">
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: #FFF;padding:0;"> <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: #FFF;padding:0;">
<div class="on-pool-container" *ngIf="pool.minerNames != undefined && pool.minerNames.length > 1 && pool.minerNames[1] != ''; else centralisedPool"> <span class="miner-name" *ngIf="pool.minerNames?.length > 1 && pool.minerNames[1] != ''">
{{ pool.minerNames[1] }} @if (pool.minerNames[1].length > 16) {
<div class="on-pool"> {{ pool.minerNames[1].slice(0, 15) }}…
<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'"> } @else {
{{ pool.name }} {{ pool.minerNames[1] }}
</div> }
</div> </span>
<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'">
<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 }}
{{ pool.name }}
</ng-template>
</a> </a>
</td> </td>
} @else { } @else {

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

@ -60,17 +60,9 @@
top: -1px; top: -1px;
} }
.on-pool-container { .miner-name {
display: inline; margin-right: 4px;
flex-direction: row; vertical-align: top;
}
.on-pool {
background-color: var(--bg);
display: inline-block;
margin-top: 4px;
padding: .25em .4em;
border-radius: .25rem;
} }
.pool-logo { .pool-logo {