From 4eab098fd6d3f07b9bb1fc4a27d9ab4e3573cca8 Mon Sep 17 00:00:00 2001 From: natsoni Date: Mon, 30 Mar 2026 12:37:35 +0900 Subject: [PATCH] Shared mining-pool component --- ...celeration-timeline-tooltip.component.html | 14 ++-- ...celeration-timeline-tooltip.component.scss | 9 --- .../accelerations-list.component.html | 6 +- .../accelerations-list.component.scss | 8 -- .../app/components/block/block.component.html | 9 +-- .../app/components/block/block.component.scss | 22 ------ .../blockchain-blocks.component.html | 4 +- .../blockchain-blocks.component.scss | 12 --- .../blocks-list/blocks-list.component.html | 8 +- .../blocks-list/blocks-list.component.scss | 10 --- .../pool-ranking/pool-ranking.component.html | 2 +- .../app/components/pool/pool.component.html | 17 +++- .../search-results.component.html | 3 +- .../stale-list/stale-list.component.html | 8 +- .../stale-list/stale-list.component.scss | 12 --- .../stratum-list/stratum-list.component.html | 3 +- .../stratum-list/stratum-list.component.scss | 8 -- .../transaction-details.component.html | 5 +- .../transaction-details.component.scss | 16 ---- .../transaction/transaction.component.scss | 8 -- .../mining-pool/mining-pool.component.html | 9 +++ .../mining-pool/mining-pool.component.scss | 22 ++++++ .../mining-pool/mining-pool.component.ts | 78 +++++++++++++++++++ frontend/src/app/shared/shared.module.ts | 3 + 24 files changed, 154 insertions(+), 142 deletions(-) create mode 100644 frontend/src/app/shared/components/mining-pool/mining-pool.component.html create mode 100644 frontend/src/app/shared/components/mining-pool/mining-pool.component.scss create mode 100644 frontend/src/app/shared/components/mining-pool/mining-pool.component.ts diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html index fb4549c50..ed2beff80 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html @@ -48,12 +48,14 @@ Accelerated by - +
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss index a8c4cd5cf..9dcaa65b4 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss @@ -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; } diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 47d653f78..e6763a9a8 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -52,9 +52,9 @@ @if (acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]) { - - - {{ pools[acceleration.minedByPoolUniqueId].name }} + + } @else { ~ diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss index 9d695ce38..e3f235452 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss @@ -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 { diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index b18db6584..be0a094ac 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -195,8 +195,7 @@ {{ block.extras.pool.minerNames[1] }} } - - {{ block.extras.pool.name }} + @@ -254,8 +253,7 @@

Stale Block @if (block?.extras?.pool) { - - {{ block?.extras?.pool.name }} + }

} @else { @@ -288,8 +286,7 @@ } @else { Winning Block @if (canonicalBlock?.extras?.pool) { - - {{ canonicalBlock?.extras?.pool.name }} + } } } @else { diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 2e9bfc575..99be290b2 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -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; diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index d97ece4ff..fee6516aa 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -79,11 +79,11 @@
- + {{ block.extras.pool.minerNames[1] }} - {{ block.extras.pool.name }} +
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index e53d2e7ae..38d7e5d51 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -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; diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html index 56a68692a..737e636c0 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.html +++ b/frontend/src/app/components/blocks-list/blocks-list.component.html @@ -35,16 +35,12 @@
- - {{ block.extras.pool.name }} + {{ block.extras.coinbaseRaw | hex2ascii }}
- - {{ block.extras.pool.name }} + {{ block.extras.coinbaseRaw | hex2ascii }}
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss index 6c47eb0bf..6c4ccb426 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.scss +++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss @@ -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%; } diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html index 84bd949bb..69682b560 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html @@ -109,7 +109,7 @@ {{ pool.rank }} - + {{ pool.name }} {{ pool.lastEstimatedHashrate | number: '1.2-2' }} {{ miningStats.miningUnits.hashrateUnit }} diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html index 85105a058..7135e5a21 100644 --- a/frontend/src/app/components/pool/pool.component.html +++ b/frontend/src/app/components/pool/pool.component.html @@ -5,8 +5,7 @@
- +

{{ poolStats.pool.name }}

@@ -108,6 +107,7 @@ + {{ poolStats.estimatedHashrate | amountShortener : 3 : 'H/s' : false : true }} Unknown + @@ -134,12 +135,14 @@ + {{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) {{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) {{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%) + @@ -157,7 +160,9 @@ + + @@ -491,6 +496,7 @@ +
@@ -500,6 +506,7 @@
+ @@ -516,6 +523,7 @@ +
@@ -525,6 +533,7 @@
+ @@ -542,6 +551,7 @@ +
@@ -551,6 +561,7 @@
+ @@ -567,6 +578,7 @@ +
@@ -576,6 +588,7 @@
+ diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.html b/frontend/src/app/components/search-form/search-results/search-results.component.html index 400b9a1c3..22e823265 100644 --- a/frontend/src/app/components/search-form/search-results/search-results.component.html +++ b/frontend/src/app/components/search-form/search-results/search-results.component.html @@ -47,8 +47,7 @@
Mining Pools
diff --git a/frontend/src/app/components/stale-list/stale-list.component.html b/frontend/src/app/components/stale-list/stale-list.component.html index eb5e754d2..6002176b7 100644 --- a/frontend/src/app/components/stale-list/stale-list.component.html +++ b/frontend/src/app/components/stale-list/stale-list.component.html @@ -57,11 +57,11 @@
- + {{ chainTip.stale.extras.pool.minerNames[1] }} - {{ chainTip.stale.extras.pool.name }} +
@@ -103,11 +103,11 @@
- + {{ chainTip.canonical.extras.pool.minerNames[1] }} - {{ chainTip.canonical.extras.pool.name }} +
diff --git a/frontend/src/app/components/stale-list/stale-list.component.scss b/frontend/src/app/components/stale-list/stale-list.component.scss index 148ce7c40..d1c910476 100644 --- a/frontend/src/app/components/stale-list/stale-list.component.scss +++ b/frontend/src/app/components/stale-list/stale-list.component.scss @@ -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; diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html index c13c885d0..644916fec 100644 --- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html +++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html @@ -33,8 +33,7 @@ @if (pools[row.job.pool]) { - - {{ pools[row.job.pool].name}} + } diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss index 3d274ef2a..0d2a9819d 100644 --- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss +++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss @@ -128,11 +128,3 @@ td { position: relative; color: #FFF; } - -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} \ No newline at end of file diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html index 2dfd124c2..1bfbef4c1 100644 --- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html +++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html @@ -304,7 +304,7 @@ Miner @if (pool) { - + @if (pool.minerNames[1].length > 16) { {{ pool.minerNames[1].slice(0, 15) }}… @@ -312,8 +312,7 @@ {{ pool.minerNames[1] }} } - - {{ pool.name }} + } @else { diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss index af2255427..2666fce87 100644 --- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss +++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss @@ -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; } diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index e1be2890c..942a68076 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/frontend/src/app/components/transaction/transaction.component.scss @@ -294,14 +294,6 @@ width: 2.7em; } -.pool-logo { - width: 15px; - height: 15px; - position: relative; - top: -1px; - margin-right: 2px; -} - .oobFees { color: #905cf4; } diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.html b/frontend/src/app/shared/components/mining-pool/mining-pool.component.html new file mode 100644 index 000000000..dddd19a9a --- /dev/null +++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.html @@ -0,0 +1,9 @@ + + +@if (showName) { + @if (searchText) { + + } @else { + {{ name }} + } +} diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss b/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss new file mode 100644 index 000000000..b32cb34fd --- /dev/null +++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss @@ -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; + } +} diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts b/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts new file mode 100644 index 000000000..b18bea2e4 --- /dev/null +++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts @@ -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(); + 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); + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index eabb7bbd3..457f0a945 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -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,