GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-20 13:28:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Shared mining-pool component

Browse source
This commit is contained in:
natsoni 2026-03-30 12:37:35 +09:00
parent 7d5c889ff1
commit 4eab098fd6
No known key found for this signature in database
GPG key ID: 5554443C889C720E
24 changed files with 154 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
View file

@ -48,12 +48,14 @@
<td class="label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
<td class="value" *ngIf="accelerationInfo.pools">
<ng-container *ngFor="let pool of accelerationInfo.pools; let i = index;">
<img *ngIf="accelerationInfo.poolsData[pool]"
class="pool-logo"
[style.opacity]="accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1'"
[src]="'/resources/mining-pools/' + accelerationInfo.poolsData[pool].slug + '.svg'"
onError="this.src = '/resources/mining-pools/default.svg'"
[alt]="'Logo of ' + pool.name + ' mining pool'">
<app-mining-pool
*ngIf="accelerationInfo.poolsData[pool]"
[slug]="accelerationInfo.poolsData[pool].slug"
[name]="accelerationInfo.poolsData[pool].name"
[showName]="false"
[logoStyle]="'width:22px;height:22px;margin-right:4px;margin-bottom:4px;opacity:' + (accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1') + ';'"
[forceStandardLogo]="true"
></app-mining-pool>
<br *ngIf="i % 6 === 5">
</ng-container>
</td>

9
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
View file

@ -26,15 +26,6 @@
vertical-align: top;
}
.pool-logo {
width: 22px;
height: 22px;
position: relative;
top: -1px;
margin-right: 4px;
margin-bottom: 4px;
}
.oobFees {
color: #905cf4;
}

6
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
View file

@ -52,9 +52,9 @@
</td>
<td class="pool text-end" *ngIf="!this.widget">
@if (acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]) {
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pools[acceleration.minedByPoolUniqueId].slug]" class="badge" style="color: #FFF;padding:0;">
<img class="pool-logo" [src]="'/resources/mining-pools/' + pools[acceleration.minedByPoolUniqueId].slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pools[acceleration.minedByPoolUniqueId].name + ' mining pool'">
{{ pools[acceleration.minedByPoolUniqueId].name }}
<a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pools[acceleration.minedByPoolUniqueId].slug]" class="badge" style="padding:0;">
<app-mining-pool [slug]="pools[acceleration.minedByPoolUniqueId].slug" [name]="pools[acceleration.minedByPoolUniqueId].name" [logoStyle]="'width:18px;height:18px;'"
></app-mining-pool>
</a>
} @else {
~

8
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
View file

@ -83,14 +83,6 @@ tr, td, th {
@media (max-width: 700px) {
display: none;
}
.pool-logo {
width: 18px;
height: 18px;
position: relative;
top: -1px;
margin-right: 2px;
}
}
.status {

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

@ -195,8 +195,7 @@
{{ block.extras.pool.minerNames[1] }}
}
</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 }}
<app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name"></app-mining-pool>
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
@ -254,8 +253,7 @@
<h3 class="block-subtitle" *ngIf="!isMobile">
<ng-container i18n="block.stale-block">Stale Block</ng-container>
@if (block?.extras?.pool) {
<img class="pool-logo large" [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="pool-name">{{ block?.extras?.pool.name }}</span>
<app-mining-pool [slug]="block?.extras?.pool?.slug" [name]="block?.extras?.pool?.name" [logoStyle]="'width:30px;height:30px;margin: 0 .3em;'"></app-mining-pool>
}
</h3>
} @else {
@ -288,8 +286,7 @@
} @else {
<ng-container i18n="block.stale-block">Winning Block</ng-container>
@if (canonicalBlock?.extras?.pool) {
<img class="pool-logo large" [src]="'/resources/mining-pools/' + canonicalBlock?.extras?.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + canonicalBlock?.extras?.pool.name + ' mining pool'">
<span class="pool-name">{{ canonicalBlock?.extras?.pool.name }}</span>
<app-mining-pool [slug]="canonicalBlock?.extras?.pool?.slug" [name]="canonicalBlock?.extras?.pool?.name" [showName]="true" [logoStyle]="'width:30px;height:30px;margin: 0 .3em;'"></app-mining-pool>
}
}
} @else {

22
frontend/src/app/components/block/block.component.scss
View file

@ -86,20 +86,6 @@ h1 {
vertical-align: top;
}
.pool-logo {
width: 25px;
height: 25px;
position: relative;
top: -1px;
margin-right: 2px;
&.large {
width: 30px;
height: 30px;
margin: 0 0.3em;
}
}
.row {
flex-direction: column;
@media (min-width: 768px) {
@ -292,14 +278,6 @@ h1 {
}
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
}
.stale-block-alert {
border-radius: 0;
margin-bottom: 0;

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

@ -79,11 +79,11 @@
<div class="animated" *ngIf="block.extras?.pool != undefined && showPools">
<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]">
<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'">
<app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.minerNames[1]" [logoStyle]="'filter: grayscale(100%) brightness(1.5);'" [showName]="false"></app-mining-pool>
{{ block.extras.pool.minerNames[1] }}
</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 }}
<app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name"></app-mining-pool>
</ng-template>
</a>
</div>

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

@ -257,18 +257,6 @@
}
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
}
.pool-logo.faded {
filter: grayscale(100%) brightness(1.5);
}
.animated {
transition: all 0.15s ease-in-out;
white-space: nowrap;

8
frontend/src/app/components/blocks-list/blocks-list.component.html
View file

@ -35,16 +35,12 @@
<td *ngIf="isMempoolModule" class="pool text-start" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
<div *ngIf="indexingAvailable" class="tooltip-custom">
<a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
<img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
<span class="pool-name">{{ block.extras.pool.name }}</span>
<app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name" [logoStyle]="'width:22px;height:22px;'" [textClass]="'truncate'"></app-mining-pool>
</a>
<span *ngIf="!widget" class="tooltiptext badge bg-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
</div>
<div *ngIf="!indexingAvailable" class="tooltip-custom">
<img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
<span class="pool-name">{{ block.extras.pool.name }}</span>
<app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name" [logoStyle]="'width:22px;height:22px;'" [textClass]="'truncate'"></app-mining-pool>
<span *ngIf="!widget" class="tooltiptext badge bg-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
</div>
</td>

10
frontend/src/app/components/blocks-list/blocks-list.component.scss
View file

@ -73,16 +73,6 @@ tr, td, th {
width: 60%;
}
}
.pool-name {
display: inline-block;
vertical-align: text-top;
padding-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.height {
width: 8%;
}

2
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View file

@ -109,7 +109,7 @@
<tr *ngFor="let pool of miningStats.pools">
<td class="d-none d-md-table-cell">{{ pool.rank }}</td>
<td class="text-end">
<img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'">
<app-mining-pool [slug]="pool.slug" [name]="pool.name" [showName]="false"[logoStyle]="'width:25px;height:25px;'"></app-mining-pool>
</td>
<td class="pool-name"><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
<td class="" *ngIf="'24h' === this.miningWindowPreference">{{ pool.lastEstimatedHashrate | number: '1.2-2' }} {{ miningStats.miningUnits.hashrateUnit }}</td>

17
frontend/src/app/components/pool/pool.component.html
View file

@ -5,8 +5,7 @@
<!-- Pool overview -->
<div *ngIf="poolStats$ | async as poolStats; else loadingMain">
<div style="display:flex" class="mb-3">
<img width="50" height="50" src="{{ poolStats['logo'] }}" [alt]="poolStats.pool.name + ' mining pool logo'"
onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'" class="me-3">
<app-mining-pool [slug]="poolStats.pool.slug" [name]="poolStats.pool.name" [showName]="false" [logoStyle]="'width:50px;height:50px;'" [logoClass]="'me-3'"></app-mining-pool>
<h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
</div>
@ -108,6 +107,7 @@
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding: 0.1rem;"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true" [ignoreViewMode]="true"></app-amount></td>
<td class="text-center" style="padding: 0.1rem;">{{ poolStats.estimatedHashrate | amountShortener : 3 : 'H/s' : false : true }}</td>
<td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd"><span class="health-badge badge" [class.bg-success]="poolStats.avgBlockHealth >= 99"
@ -117,6 +117,7 @@
<span class="health-badge badge bg-secondary" i18n="unknown">Unknown</span>
</ng-template>
</td>
</tr>
</tbody>
</table>
</td>
@ -134,12 +135,14 @@
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
<td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
<td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
</tr>
</tbody>
</table>
</td>
@ -157,7 +160,9 @@
</tr>
</thead>
<tbody>
<tr>
<td *ngFor="let total of oob" class="text-center clip" style="padding: 0.1rem;"><app-amount [satoshis]="total.cost" [digitsInfo]="isMobile() ? '1.2-4' : '1.8-8'" [ignoreViewMode]="true"></app-amount></td>
</tr>
</tbody>
</table>
</td>
@ -491,6 +496,7 @@
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding: 0.1rem;">
<div class="skeleton-loader data"></div>
</td>
@ -500,6 +506,7 @@
<td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd">
<div class="skeleton-loader data"></div>
</td>
</tr>
</tbody>
</table>
</td>
@ -516,6 +523,7 @@
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding: 0.1rem;">
<div class="skeleton-loader data"></div>
</td>
@ -525,6 +533,7 @@
<td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd">
<div class="skeleton-loader data"></div>
</td>
</tr>
</tbody>
</table>
</td>
@ -542,6 +551,7 @@
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding: 0.1rem;">
<div class="skeleton-loader data"></div>
</td>
@ -551,6 +561,7 @@
<td class="text-center" style="padding: 0.1rem;">
<div class="skeleton-loader data"></div>
</td>
</tr>
</tbody>
</table>
</td>
@ -567,6 +578,7 @@
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding: 0.1rem;">
<div class="skeleton-loader data"></div>
</td>
@ -576,6 +588,7 @@
<td class="text-center" style="padding: 0.1rem;">
<div class="skeleton-loader data"></div>
</td>
</tr>
</tbody>
</table>
</td>

3
frontend/src/app/components/search-form/search-results/search-results.component.html
View file

@ -47,8 +47,7 @@
<div class="card-title" i18n="search.mining-pools">Mining Pools</div>
<ng-template ngFor [ngForOf]="results.pools" let-pool let-i="index">
<button (click)="clickItem(results.hashQuickMatch + results.addresses.length + i)" [class.active]="results.hashQuickMatch + results.addresses.length + i === activeIdx" [class.inactive]="!pool.active" type="button" role="option" class="dropdown-item">
<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'">
<ngb-highlight [result]="pool.name" [term]="results.searchText"></ngb-highlight>
<app-mining-pool [slug]="pool.slug" [name]="pool.name" [searchText]="results.searchText" [logoStyle]="'margin-right:10px;'"></app-mining-pool>
</button>
</ng-template>
</ng-template>

8
frontend/src/app/components/stale-list/stale-list.component.html
View file

@ -57,11 +57,11 @@
<div class="animated" *ngIf="chainTip.stale?.extras?.pool != undefined">
<a class="badge" [class.miner-name]="chainTip.stale.extras.pool.minerNames?.length > 1 && chainTip.stale.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + chainTip.stale.extras.pool.slug) | relativeUrl]">
<ng-container *ngIf="chainTip.stale.extras.pool.minerNames?.length > 1 && chainTip.stale.extras.pool.minerNames[1] != ''; else staleBlockCentralisedPool">
<img [ngbTooltip]="chainTip.stale.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + chainTip.stale.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.stale.extras.pool.name + ' mining pool'">
<app-mining-pool [slug]="chainTip.stale.extras.pool.slug" [name]="chainTip.stale.extras.pool.name" [logoStyle]="'filter: grayscale(100%) brightness(1.5);'" [showName]="false"></app-mining-pool>
{{ chainTip.stale.extras.pool.minerNames[1] }}
</ng-container>
<ng-template #staleBlockCentralisedPool>
<img class="pool-logo" [src]="'/resources/mining-pools/' + chainTip.stale.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.stale.extras.pool.name + ' mining pool'"> {{ chainTip.stale.extras.pool.name }}
<app-mining-pool [slug]="chainTip.stale.extras.pool.slug" [name]="chainTip.stale.extras.pool.name"></app-mining-pool>
</ng-template>
</a>
</div>
@ -103,11 +103,11 @@
<div class="animated" *ngIf="chainTip.canonical?.extras?.pool != undefined">
<a class="badge" [class.miner-name]="chainTip.canonical.extras.pool.minerNames?.length > 1 && chainTip.canonical.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + chainTip.canonical.extras.pool.slug) | relativeUrl]">
<ng-container *ngIf="chainTip.canonical.extras.pool.minerNames?.length > 1 && chainTip.canonical.extras.pool.minerNames[1] != ''; else canonicalBlockCentralisedPool">
<img [ngbTooltip]="chainTip.canonical.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + chainTip.canonical.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.canonical.extras.pool.name + ' mining pool'">
<app-mining-pool [slug]="chainTip.canonical.extras.pool.slug" [name]="chainTip.canonical.extras.pool.name" [logoStyle]="'filter: grayscale(100%) brightness(1.5);'" [showName]="false"></app-mining-pool>
{{ chainTip.canonical.extras.pool.minerNames[1] }}
</ng-container>
<ng-template #canonicalBlockCentralisedPool>
<img class="pool-logo" [src]="'/resources/mining-pools/' + chainTip.canonical.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.canonical.extras.pool.name + ' mining pool'"> {{ chainTip.canonical.extras.pool.name }}
<app-mining-pool [slug]="chainTip.canonical.extras.pool.slug" [name]="chainTip.canonical.extras.pool.name"></app-mining-pool>
</ng-template>
</a>
</div>

12
frontend/src/app/components/stale-list/stale-list.component.scss
View file

@ -188,18 +188,6 @@
}
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
&.faded {
filter: grayscale(100%) brightness(1.5);
}
}
.beta {
font-size: 10px;
margin: 5px;

3
frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
View file

@ -33,8 +33,7 @@
<td class="pool">
@if (pools[row.job.pool]) {
<a class="badge" [routerLink]="[('/mining/pool/' + pools[row.job.pool].slug) | relativeUrl]">
<img class="pool-logo" [src]="'/resources/mining-pools/' + pools[row.job.pool].slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pools[row.job.pool].name + ' mining pool'">
{{ pools[row.job.pool].name}}
<app-mining-pool [slug]="pools[row.job.pool].slug" [name]="pools[row.job.pool].name"></app-mining-pool>
</a>
}
</td>

8
frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
View file

@ -128,11 +128,3 @@ td {
position: relative;
color: #FFF;
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
}

5
frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
View file

@ -304,7 +304,7 @@
<td class="td-width" i18n="block.miner">Miner</td>
@if (pool) {
<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: var(--fg);padding:0;">
<span class="miner-name" *ngIf="pool.minerNames?.length > 1 && pool.minerNames[1] != ''">
@if (pool.minerNames[1].length > 16) {
{{ pool.minerNames[1].slice(0, 15) }}…
@ -312,8 +312,7 @@
{{ pool.minerNames[1] }}
}
</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 }}
<app-mining-pool [slug]="pool.slug" [name]="pool.name"></app-mining-pool>
</a>
</td>
} @else {

16
frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss
View file

@ -29,14 +29,6 @@
vertical-align: top;
}
.pool-logo {
width: 25px;
height: 25px;
position: relative;
top: -1px;
margin-right: 2px;
}
.badge.badge-accelerated {
background-color: var(--tertiary);
color: white;
@ -173,14 +165,6 @@
width: 2.7em;
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
}
.oobFees {
color: #905cf4;
}

8
frontend/src/app/components/transaction/transaction.component.scss
View file

@ -294,14 +294,6 @@
width: 2.7em;
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
}
.oobFees {
color: #905cf4;
}

9
frontend/src/app/shared/components/mining-pool/mining-pool.component.html Normal file
View file

@ -0,0 +1,9 @@
<img class="mining-pool-logo" [ngClass]="logoClass" [src]="logoSrc" [alt]="logoAlt" [style]="logoStyle" (error)="onImageError($event)">
@if (showName) {
@if (searchText) {
<ngb-highlight class="mining-pool-name" [ngClass]="textClass" [result]="name" [term]="searchText" [style]="textStyle"></ngb-highlight>
} @else {
<span class="mining-pool-name" [ngClass]="textClass" [style]="textStyle">{{ name }}</span>
}
}

22
frontend/src/app/shared/components/mining-pool/mining-pool.component.scss Normal file
View file

@ -0,0 +1,22 @@
.mining-pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 5px;
}
.mining-pool-name {
display: inline;
color: var(--fg);
&.truncate {
display: inline-block;
vertical-align: text-top;
padding-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
}

78
frontend/src/app/shared/components/mining-pool/mining-pool.component.ts Normal file
View file

@ -0,0 +1,78 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { ThemeService } from '@app/services/theme.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-mining-pool',
templateUrl: './mining-pool.component.html',
styleUrls: ['./mining-pool.component.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MiningPoolComponent implements OnInit, OnDestroy {
private static readonly missingLightLogoSlugs = new Set<string>();
private themeStateSubscription: Subscription;
private loadedTheme = 'default';
constructor(
private themeService: ThemeService,
private cd: ChangeDetectorRef,
) { }
@Input() slug: string;
@Input() name: string | null = null;
@Input() showName: boolean = true;
@Input() searchText: string | null = null;
@Input() logoStyle: string | null = null;
@Input() logoClass: string | null = null;
@Input() textStyle: string | null = null;
@Input() textClass: string | null = null;
@Input() forceStandardLogo: boolean = false;
ngOnInit(): void {
this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => {
if (state.loading) {
return;
}
this.loadedTheme = state.theme;
this.cd.markForCheck();
});
}
ngOnDestroy(): void {
this.themeStateSubscription?.unsubscribe();
}
get logoSrc(): string {
return `/resources/mining-pools/${this.slug}${this.useLightLogo ? '.light' : ''}.svg`;
}
get logoAlt(): string {
return this.name ? `Logo of ${this.name} mining pool` : 'Mining pool logo';
}
onImageError(event: Event): void {
const target = event.target as HTMLImageElement | null;
if (!target) {
return;
}
// If light logo is missing, fall back to the standard logo and don't try to load the light logo again
if (this.useLightLogo && target.src.endsWith(`${this.slug}.light.svg`)) {
MiningPoolComponent.missingLightLogoSlugs.add(this.slug);
target.src = `/resources/mining-pools/${this.slug}.svg`;
return;
}
if (target.src.endsWith('/resources/mining-pools/default.svg') || target.src.endsWith('/resources/mining-pools/default.light.svg')) {
return;
}
target.src = !this.forceStandardLogo && this.loadedTheme === 'nymkappa' ? '/resources/mining-pools/default.light.svg' : '/resources/mining-pools/default.svg';
}
get useLightLogo(): boolean {
return !this.forceStandardLogo && this.loadedTheme === 'nymkappa' && !MiningPoolComponent.missingLightLogoSlugs.has(this.slug);
}
}

3
frontend/src/app/shared/shared.module.ts
View file

@ -107,6 +107,7 @@ import { GeolocationComponent } from '@app/shared/components/geolocation/geoloca
import { TestnetAlertComponent } from '@app/shared/components/testnet-alert/testnet-alert.component';
import { GlobalFooterComponent } from '@app/shared/components/global-footer/global-footer.component';
import { MempoolErrorComponent } from '@app/shared/components/mempool-error/mempool-error.component';
import { MiningPoolComponent } from '@app/shared/components/mining-pool/mining-pool.component';
import { AccelerationsListComponent } from '@components/acceleration/accelerations-list/accelerations-list.component';
import { PendingStatsComponent } from '@components/acceleration/pending-stats/pending-stats.component';
import { AccelerationStatsComponent } from '@components/acceleration/acceleration-stats/acceleration-stats.component';
@ -231,6 +232,7 @@ import { GithubLogin } from '@components/github-login.component/github-login.com
GeolocationComponent,
TestnetAlertComponent,
GlobalFooterComponent,
MiningPoolComponent,
CalculatorComponent,
BitcoinsatoshisPipe,
BlockViewComponent,
@ -383,6 +385,7 @@ import { GithubLogin } from '@components/github-login.component/github-login.com
ToggleComponent,
GeolocationComponent,
TestnetAlertComponent,
MiningPoolComponent,
PreviewTitleComponent,
GlobalFooterComponent,
MempoolErrorComponent,