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

Merge branch 'master' into mononaut/supply-chain-check-scripts

Browse source
This commit is contained in:
Felipe Knorr Kuhn 2026-04-01 16:18:45 +09:00 • committed by GitHub
commit 3b98cc698f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
148 changed files with 1461 additions and 478 deletions
Download patch file Download diff file Expand all files Collapse all files

25
.github/dependabot.yml vendored
View file

@ -6,6 +6,11 @@ updates:
schedule:
interval: daily
open-pull-requests-limit: 10
cooldown:
default-days: 7
semver-major-days: 30
semver-minor-days: 14
semver-patch-days: 3
ignore:
- dependency-name: "*"
update-types:
@ -33,6 +38,11 @@ updates:
schedule:
interval: daily
open-pull-requests-limit: 10
cooldown:
default-days: 7
semver-major-days: 30
semver-minor-days: 14
semver-patch-days: 3
ignore:
- dependency-name: "*"
update-types:
@ -44,6 +54,11 @@ updates:
directory: "/docker/backend"
schedule:
interval: weekly
cooldown:
default-days: 3
semver-major-days: 14
semver-minor-days: 7
semver-patch-days: 3
ignore:
- dependency-name: "*"
update-types:
@ -53,6 +68,11 @@ updates:
directory: "/docker/frontend"
schedule:
interval: weekly
cooldown:
default-days: 3
semver-major-days: 14
semver-minor-days: 7
semver-patch-days: 3
ignore:
- dependency-name: "*"
update-types:
@ -62,6 +82,11 @@ updates:
directory: "/"
schedule:
interval: weekly
cooldown:
default-days: 3
semver-major-days: 14
semver-minor-days: 7
semver-patch-days: 3
ignore:
- dependency-name: "*"
update-types:

2
frontend/generate-themes.js
View file

@ -3,7 +3,7 @@ const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const THEMES = ['contrast', 'softsimon', 'bukele'];
const THEMES = ['contrast', 'softsimon', 'bukele', 'nymkappa'];
const STAGING_DIR = path.join(__dirname, '.theme-build');
const DIST_DIR = path.join(__dirname, 'dist/mempool/browser');
const MANIFEST_FILE = path.join(__dirname, 'theme-manifest.json');

42
frontend/src/app/app.constants.ts
View file

@ -82,6 +82,48 @@ export const contrastMempoolFeeColors = [
'ffb700',
];
export const lightMempoolFeeColors = [
'49c284',
'99c246',
'a0c343',
'a7c240',
'b0c13c',
'b8c03b',
'bebe3a',
'beb238',
'bcac37',
'bba336',
'b99e35',
'b79334',
'b68f33',
'b68a32',
'b48430',
'b17f30',
'b07b2f',
'ae722e',
'ad6b2d',
'ab652b',
'aa5b2a',
'a95629',
'a74c28',
'a34126',
'a13a25',
'a02d24',
'9e2423',
'9c222a',
'9c2132',
'9b203a',
'99203e',
'972043',
'951f45',
'931e48',
'921d49',
'921c4e',
'901b50',
'8e1a53',
'8b1954',
];
export const chartColors = [
'#A81524',
'#D81B60',

62
frontend/src/app/components/about/about.component.html
View file

@ -2,7 +2,11 @@
<div class="intro">
<span style="margin-left: auto; margin-right: -20px; margin-bottom: -20px">&reg;</span>
<img class="logo" src="/resources/mempool-logo-bigger.png" />
@if (isLightMode) {
<img class="logo" src="/resources/mempool-logo-bigger-light.png" />
} @else {
<img class="logo" src="/resources/mempool-logo-bigger.png" />
}
<div class="version">
<span>v{{ packetJsonVersion }} [<a href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]</span>
<span *ngIf="stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE">[{{ stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE }}]</span>
@ -126,13 +130,23 @@
<span>Blockstream</span>
</a>
<a href="https://unchained.com/" target="_blank" title="Unchained">
<svg id="Layer_1" width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.68 156.68" class="image">
@if (isLightMode) {
<svg id="Layer_1" width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.68 156.68" class="image">
<defs><style>.cls-bg{fill:#fff;}.cls-navy{fill:#002851;}.cls-cyan{fill:#0095d6;}.cls-star{fill:#fff;}</style></defs><ellipse class="cls-bg" cx="78.339596" cy="78.612736" rx="77.418334" ry="77.876421"/><path class="cls-cyan" d="M57.026351 111.292873C49.100201 123.36854 43.017302 135.026662 38.386035 145.479803C50.044884 152.548978 63.731367 156.604891 78.339435 156.604891C121.172597 156.604891 155.895792 121.676557 155.895792 78.589396C155.895792 77.175561 155.849758 75.761726 155.781109 74.347971H147.024797C118.454118 74.347971 81.726388 73.629424 57.026351 111.269452V111.292873Z"/><path class="cls-navy" d="M155.067165 67.255617H110.965783C57.671808 67.255617 27.211439 90.989083 9.976639 115.487697C4.101107 104.501522 0.78318 91.939662 0.78318 78.612575C0.78318 35.525575 35.506272 0.597046 78.339758 0.597046C117.325053 0.597046 149.605979 29.545729 155.067165 67.255617Z"/><path class="cls-star" d="M78.938938 20.552782L80.321437 24.840645C81.841879 29.49929 85.48267 33.161322 90.113614 34.691052L94.376279 36.081708C94.837435 36.243961 94.837435 36.89289 94.376279 37.031964L90.113614 38.42262C85.48267 39.95235 81.841879 43.614382 80.321437 48.273108L78.938938 52.56089C78.777654 53.024469 78.13252 53.024469 77.994254 52.56089L76.611836 48.273108C75.091071 43.614382 71.450603 39.95235 66.819336 38.42262L62.556671 37.031964C62.095838 36.869711 62.095838 36.220782 62.556671 36.081708L66.819336 34.691052C71.450603 33.161322 75.091071 29.49929 76.611836 24.840645L77.994254 20.552782C78.155538 20.089203 78.800752 20.089203 78.938938 20.552782V20.552782Z"/>
</svg>
} @else {
<svg id="Layer_1" width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.68 156.68" class="image">
<defs><style>.cls-unchained-1{fill:#fff;}</style></defs><path class="cls-unchained-1" d="m78.34,0C35.07,0,0,35.07,0,78.34s35.07,78.34,78.34,78.34,78.34-35.07,78.34-78.34S121.6,0,78.34,0ZM20.23,109.5c-4.99-9.28-7.81-19.89-7.81-31.16C12.42,41.93,41.93,12.42,78.34,12.42c33.15,0,60.58,24.46,65.23,56.32h-37.48c-45.29,0-71.19,20.05-85.85,40.76Zm58.11,34.76c-12.42,0-24.04-3.44-33.96-9.41,3.94-8.85,9.11-18.7,15.84-28.9,20.99-31.8,52.2-31.19,76.49-31.19h7.45c.06,1.18.1,2.38.1,3.58,0,36.41-29.51,65.92-65.92,65.92Z"/><path class="cls-unchained-1" d="m91.98,42.4l-3.62-1.18c-3.94-1.29-7.03-4.38-8.32-8.32l-1.18-3.63c-.13-.39-.68-.39-.81,0l-1.18,3.63c-1.29,3.94-4.38,7.03-8.32,8.32l-3.62,1.18c-.39.13-.39.68,0,.81l3.62,1.18c3.94,1.29,7.03,4.38,8.32,8.32l1.18,3.63c.13.39.68.39.81,0l1.18-3.63c1.29-3.94,4.38-7.03,8.32-8.32l3.62-1.18c.39-.13.39-.68,0-.81Z"/>
</svg>
}
<span>Unchained</span>
</a>
<a href="https://bitkey.world/" target="_blank" title="Bitkey">
<img class="image" src="/resources/profile/bitkey.svg" />
@if (isLightMode) {
<img class="image" src="/resources/profile/bitkey-light.svg" />
} @else {
<img class="image" src="/resources/profile/bitkey.svg" />
}
<span>Bitkey</span>
</a>
<a href="https://metaplanet.jp" target="_blank" title="Metaplanet">
@ -212,11 +226,19 @@
<span>Onramp Bitcoin</span>
</a>
<a href="https://cakewallet.com/" target="_blank" title="Cake Wallet">
<img class="image not-rounded" src="/resources/profile/cake-wallet.svg" />
@if (isLightMode) {
<img class="image not-rounded" src="/resources/profile/cake-wallet-light.svg" />
} @else {
<img class="image not-rounded" src="/resources/profile/cake-wallet.svg" />
}
<span>Cake Wallet</span>
</a>
<a href="https://leather.io/" target="_blank" title="Leather">
<img class="image" src="/resources/profile/leather.svg" />
@if (isLightMode) {
<img class="image" src="/resources/profile/leather-light.svg" />
} @else {
<img class="image" src="/resources/profile/leather.svg" />
}
<span>Leather</span>
</a>
@ -294,7 +316,11 @@
<span>NixOS</span>
</a>
<a href="https://github.com/Start9Labs/start-os" target="_blank" title="StartOS">
<img class="image" src="/resources/profile/start9.png" />
@if (isLightMode) {
<img class="image" src="/resources/profile/start9-light.png" />
} @else {
<img class="image" src="/resources/profile/start9.png" />
}
<span>StartOS</span>
</a>
<a href="https://github.com/btcpayserver/btcpayserver" target="_blank" title="BTCPay Server">
@ -384,13 +410,21 @@
<h3 i18n="about.alliances">Community Alliances</h3>
<div class="wrapper">
<a href="https://liquid.net/" title="Liquid Network">
<img class="liquid" src="/resources/profile/liquid.svg" />
@if (isLightMode) {
<img class="liquid" src="/resources/profile/liquid-light.svg" />
} @else {
<img class="liquid" src="/resources/profile/liquid.svg" />
}
</a>
<a href="https://opencrypto.org/" title="Copa - Crypto Open Patent Alliance">
<img class="copa" src="/resources/profile/copa.png" />
</a>
<a href="https://bitcoin.gob.sv" title="Oficina Nacional del Bitcoin">
<img class="sv" src="/resources/profile/onbtc-full.svg" />
@if (isLightMode) {
<img class="sv" src="/resources/profile/onbtc-full-light.svg" />
} @else {
<img class="sv" src="/resources/profile/onbtc-full.svg" />
}
</a>
</div>
</div>
@ -439,7 +473,11 @@
<h3 i18n="about.powered-by">Powered By</h3>
<div class="wrapper">
<a href="https://wiz.biz" target="_blank" title="wiz & associates">
<img class="wiz-logo" src="/resources/wiz.png" />
@if (isLightMode) {
<img class="wiz-logo" src="/resources/wiz-light.png" />
} @else {
<img class="wiz-logo" src="/resources/wiz.png" />
}
</a>
</div>
<br>
@ -447,7 +485,11 @@
<h3 i18n="about.managed-by">Managed By</h3>
<div class="wrapper">
<a href="https://mempool.holdings" target="_blank" title="Mempool Holdings">
<img class="wiz-logo" src="/resources/mempool-holdings.png" />
@if (isLightMode) {
<img class="wiz-logo" src="/resources/mempool-holdings-light.png" />
} @else {
<img class="wiz-logo" src="/resources/mempool-holdings.png" />
}
</a>
</div>
</div>

2
frontend/src/app/components/about/about.component.scss
View file

@ -198,7 +198,7 @@
margin: auto;
line-height: 1.8;
font-size: 87.5%;
color: #e83e8c;
color: var(--pink);
word-wrap: break-word;
font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
ul {

25
frontend/src/app/components/about/about.component.ts
View file

@ -1,9 +1,9 @@
import { ChangeDetectionStrategy, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
import { WebsocketService } from '@app/services/websocket.service';
import { SeoService } from '@app/services/seo.service';
import { OpenGraphService } from '@app/services/opengraph.service';
import { StateService } from '@app/services/state.service';
import { Observable } from 'rxjs';
import { Observable, Subscription } from 'rxjs';
import { ApiService } from '@app/services/api.service';
import { IBackendInfo } from '@interfaces/websocket.interface';
import { Router, ActivatedRoute } from '@angular/router';
@ -11,6 +11,7 @@ import { map, share, tap } from 'rxjs/operators';
import { ITranslators } from '@interfaces/node-api.interface';
import { DOCUMENT } from '@angular/common';
import { EnterpriseService } from '@app/services/enterprise.service';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-about',
@ -26,6 +27,8 @@ export class AboutComponent implements OnInit {
packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
showNavigateToSponsor = false;
themeStateSubscription: Subscription;
loadedTheme = 'default';
profiles$: Observable<any>;
translators$: Observable<ITranslators>;
@ -41,6 +44,8 @@ export class AboutComponent implements OnInit {
private apiService: ApiService,
private router: Router,
private route: ActivatedRoute,
private themeService: ThemeService,
private cd: ChangeDetectorRef,
@Inject(LOCALE_ID) public locale: string,
@Inject(DOCUMENT) private document: Document,
) { }
@ -88,6 +93,14 @@ export class AboutComponent implements OnInit {
}),
tap(() => this.goToAnchor())
);
this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => {
if (state.loading) {
return;
}
this.loadedTheme = state.theme;
this.cd.markForCheck();
});
}
ngAfterViewInit() {
@ -137,4 +150,12 @@ export class AboutComponent implements OnInit {
this.enterpriseService.goal(6);
return true;
}
get isLightMode(): boolean {
return this.loadedTheme === 'nymkappa';
}
ngOnDestroy(): void {
this.themeStateSubscription?.unsubscribe();
}
}

6
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
View file

@ -412,18 +412,18 @@
<div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
<p><ng-container i18n="transaction.pay|Pay button label">Pay</ng-container>&nbsp;<app-fiat [value]="cost"></app-fiat> with</p>
@if (canPayWithCashapp) {
<img class="paymentMethod mx-2" style="width: 200px" src="/resources/cash-app.svg" height=55 (click)="moveToStep('cashapp')">
<img class="paymentMethod mx-2" style="width: 200px" [src]="isLightMode ? '/resources/cash-app-light.svg' : '/resources/cash-app.svg'" height=55 (click)="moveToStep('cashapp')">
}
@if (canPayWithApplePay) {
@if (canPayWithCashapp) { <span class="mt-1 mb-1"></span> }
<div class="paymentMethod mx-2" style="width: 200px; height: 55px" (click)="moveToStep('applepay')">
<img src="/resources/apple-pay.png" height=37>
<img [src]="isLightMode ? '/resources/apple-pay-light.png' : '/resources/apple-pay.png'" height=37>
</div>
}
@if (canPayWithGooglePay) {
@if (canPayWithCashapp || canPayWithApplePay) { <span class="mt-1 mb-1"></span> }
<div class="paymentMethod mx-2" style="width: 200px; height: 55px" (click)="moveToStep('googlepay')">
<img src="/resources/google-pay.png" height=37>
<img [src]="isLightMode ? '/resources/google-pay-light.png' : '/resources/google-pay.png'" height=37>
</div>
}
@if (canPayWithCardOnFile) {

10
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
View file

@ -45,15 +45,15 @@
.rate {
font-size: 0.9em;
.symbol {
color: white;
color: var(--fg);
}
}
}
}
.btn-border {
border: solid 1px black;
background-color: #0c4a87;
border: solid 1px color-mix(in srgb, var(--primary) 68%, black);
background-color: color-mix(in srgb, var(--primary) 77%, black);
}
.feerate.active {
@ -172,11 +172,11 @@
}
.table-background {
background-color: var(--bg);
background-color: var(--stat-box-bg);
}
.checkout-text {
color: rgb(186, 186, 186);
color: var(--transparent-fg);
font-size: 14px;
}

22
frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
View file

@ -13,6 +13,7 @@ import { EnterpriseService } from '@app/services/enterprise.service';
import { ApiService } from '@app/services/api.service';
import { isDevMode } from '@angular/core';
import { StorageService } from '@app/services/storage.service';
import { ThemeService } from '../../services/theme.service';
export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay' | 'cardOnFile';
@ -133,6 +134,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
loadingBtcpayInvoice = false;
invoice = undefined;
themeStateSubscription: Subscription;
loadedTheme = 'default';
constructor(
public stateService: StateService,
private apiService: ApiService,
@ -142,7 +146,8 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
private cd: ChangeDetectorRef,
private authService: AuthServiceMempool,
private enterpriseService: EnterpriseService,
private storageService: StorageService
private storageService: StorageService,
private themeService: ThemeService,
) {
this.isProdDomain = this.stateService.isProdDomain;
@ -183,6 +188,14 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
this.conversions = conversions;
}
);
this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => {
if (state.loading) {
return;
}
this.loadedTheme = state.theme;
this.cd.markForCheck();
});
}
ngOnDestroy(): void {
@ -192,6 +205,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
if (this.authSubscription$) {
this.authSubscription$.unsubscribe();
}
if (this.themeStateSubscription) {
this.themeStateSubscription.unsubscribe();
}
}
ngOnChanges(changes: SimpleChanges): void {
@ -1092,6 +1108,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
return Date.now() - this.timePaid;
}
get isLightMode(): boolean {
return this.loadedTheme === 'nymkappa';
}
@HostListener('window:resize', ['$event'])
onResize(): void {
this.isMobile = window.innerWidth <= 767.98;

4
frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.scss
View file

@ -50,7 +50,7 @@
right: 0;
top: 0;
left: -4.5em;
border-top: dashed white 1.5px;
border-top: dashed var(--fg) 1.5px;
.fee-rate {
width: 100%;
@ -68,7 +68,7 @@
}
.rate .symbol {
color: white;
color: var(--fg);
}
}
}

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

@ -21,26 +21,26 @@
</tr>
<tr *ngIf="accelerationInfo.fee">
<td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
<td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
</tr>
<tr *ngIf="accelerationInfo.bidBoost >= 0 || accelerationInfo.feeDelta">
<td class="label" i18n="transaction.out-of-band-fees">Out-of-band fees</td>
@if (accelerationInfo.status === 'accelerated') {
<td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
} @else {
<td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
}
</tr>
<tr *ngIf="accelerationInfo.fee && accelerationInfo.weight">
@if (accelerationInfo.status === 'seen') {
<td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight"></app-fee-rate></td>
<td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
} @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') {
<td class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
@if (accelerationInfo.status === 'accelerated') {
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
} @else {
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
}
}
</tr>
@ -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>

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

@ -1,7 +1,7 @@
.acceleration-tooltip {
position: fixed;
z-index: 3;
background: color-mix(in srgb, var(--active-bg) 95%, transparent);
background: color-mix(in srgb, #11131f 95%, transparent);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey);
@ -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;
}

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

@ -171,7 +171,7 @@
width: 100%;
height: 100%;
border-radius: 50%;
background: white;
background: var(--fg);
z-index: 1;
}
@ -224,7 +224,7 @@
.badge.badge-waiting {
opacity: 0.5;
background-color: var(--grey);
color: white;
color: var(--nav-icon);
}
.badge.badge-accelerated {

4
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
View file

@ -225,7 +225,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
name: this.totalBidBoostLabel,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
itemStyle: {
color: '#FFB300',
@ -236,7 +236,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
name: this.acceleratedLabel,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},

2
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
View file

@ -55,7 +55,7 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
border-bottom: 1px solid var(--border-subtle);
width: fit-content;
margin: auto;
line-height: 1.45;

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 {
~

10
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 {
@ -189,7 +181,7 @@ tr, td, th {
}
.no-data {
color: rgba(255, 255, 255, 0.4);
color: var(--transparent-fg);
display: flex;
height: 280px;
width: 100%;

6
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
View file

@ -44,13 +44,13 @@
<div class="widget-toggler">
<a href="" (click)="setTimespan('24h')" class="toggler-option"
[ngClass]="{'inactive': timespan === '24h'}"><small>24h</small></a>
<span style="color: #ffffff66; font-size: 8px"> | </span>
<span style="color: var(--transparent-fg); font-size: 8px"> | </span>
<a href="" (click)="setTimespan('1m')" class="toggler-option"
[ngClass]="{'inactive': timespan === '1m'}"><small>1m</small></a>
<span style="color: #ffffff66; font-size: 8px"> | </span>
<span style="color: var(--transparent-fg); font-size: 8px"> | </span>
<a href="" (click)="setTimespan('1y')" class="toggler-option"
[ngClass]="{'inactive': timespan === '1y'}"><small>1y</small></a>
<span style="color: #ffffff66; font-size: 8px"> | </span>
<span style="color: var(--transparent-fg); font-size: 8px"> | </span>
<a href="" (click)="setTimespan('all')" class="toggler-option"
[ngClass]="{'inactive': timespan === 'all'}"><small i18n="all">all</small></a>
</div>

2
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
View file

@ -188,5 +188,5 @@
}
.inactive {
color: #ffffff66;
color: var(--transparent-fg);
}

2
frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
View file

@ -55,7 +55,7 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
border-bottom: 1px solid var(--border-subtle);
width: fit-content;
margin: auto;
line-height: 1.45;

8
frontend/src/app/components/address-graph/address-graph.component.ts
View file

@ -216,7 +216,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -224,7 +224,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
name: 'Fiat',
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
}
@ -413,7 +413,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
right: this.adjustedRight,
selectedDataBackground: {
lineStyle: {
color: '#fff',
color: 'var(--fg)',
opacity: 0.45,
},
},
@ -538,7 +538,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
top: this.image ? imgHeight + 10 : 0,
z: 100,
style: {
fill: '#fff',
fill: 'var(--fg)',
text: this.label,
font: this.isMobile() ? '18px sans-serif' : '24px sans-serif',
textAlign: 'center'

4
frontend/src/app/components/address/address.component.scss
View file

@ -2,7 +2,7 @@
position: absolute;
top: 30px;
right: 0px;
border: solid 10px var(--active-bg);
border: solid 10px var(--secondary);
border-radius: 5px;
background-color: #fff;
padding: 10px;
@ -132,4 +132,4 @@ h1 {
padding-top: 0;
padding-bottom: 0;
font-size: 0.8rem;
}
}

4
frontend/src/app/components/amount/amount.component.html
View file

@ -23,7 +23,7 @@
<ng-template #default>
@if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat' || ignoreViewMode === true) {
&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
<span class="symbol">
<span class="symbol" [style]="unitStyle">
<ng-container *ngTemplateOutlet="prefix"></ng-container>BTC
</span>
} @else {
@ -32,7 +32,7 @@
} @else {
&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : (satoshis < 1000 && satoshis > -1000 ? 0 : 1) : undefined : true }}
}
<span class="symbol">
<span class="symbol" [style]="unitStyle">
<ng-container *ngTemplateOutlet="prefix"></ng-container>sats
</span>
}

1
frontend/src/app/components/amount/amount.component.ts
View file

@ -27,6 +27,7 @@ export class AmountComponent implements OnInit, OnDestroy {
@Input() forceBtc: boolean = false;
@Input() ignoreViewMode: boolean = false;
@Input() forceBlockConversion: boolean = false; // true = displays fiat price as 0 if blockConversion is undefined instead of falling back to conversions
@Input() unitStyle: any;
constructor(
private stateService: StateService,

2
frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html
View file

@ -19,7 +19,7 @@
<form [formGroup]="paymentForm">
<div *ngIf="availableMethods.length > 1" class="mb-3">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="btn-group" data-toggle="buttons">
<!-- <label *ngIf="invoice.addresses.BTC" class="btn btn-primary" [ngClass]="{'active': paymentForm.get('method')?.value === 'chain'}">
<input type="radio" value="chain" formControlName="method"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
</label> -->

2
frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.scss
View file

@ -146,5 +146,5 @@
.input-dark {
background-color: var(--bg);
border-color: var(--active-bg);
color: white;
color: var(--fg);
}

2
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
View file

@ -156,7 +156,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
name: percentile,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
enabled: false,

4
frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
View file

@ -192,7 +192,7 @@ export class BlockFeesGraphComponent implements OnInit {
name: feesBtcLabel,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -200,7 +200,7 @@ export class BlockFeesGraphComponent implements OnInit {
name: feesFiatLabel,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},

12
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
View file

@ -245,7 +245,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
name: this.subsidyLabel,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -253,7 +253,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
name: this.feesLabel,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -261,7 +261,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
name: this.subsidyUsdLabel,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -269,7 +269,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
name: this.feesUsdLabel,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -277,7 +277,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
name: this.subsidyPercentLabel,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -285,7 +285,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
name: this.feesPercentLabel,
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},

11
frontend/src/app/components/block-filters/block-filters.component.scss
View file

@ -55,7 +55,7 @@
h5 {
font-size: 0.8rem;
color: white;
color: var(--fg);
margin: 0;
margin-top: 0.5em;
}
@ -113,6 +113,7 @@
pointer-events: all;
line-height: 1.5;
background: #181b2daf;
color: #fff;
&:first-child {
border-top-left-radius: 0.2rem;
@ -156,7 +157,7 @@
&:hover {
opacity: 1;
background: #181b2d7f;
background: var(--block-goggles-overlay);
}
}
@ -166,7 +167,7 @@
background: none;
&:hover {
background: #181b2d7f;
background: var(--block-goggles-overlay);
}
}
}
@ -178,14 +179,14 @@
background: none;
&:hover {
background: #181b2d7f;
background: var(--block-goggles-overlay);
}
}
}
&.menu-open {
pointer-events: all;
background: #181b2d7f;
background: var(--block-goggles-overlay);
}
&.small {

2
frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
View file

@ -50,7 +50,7 @@
.loader-wrapper {
position: absolute;
background: #181b2d7f;
background: var(--block-goggles-overlay);
left: 0;
right: 0;
top: 0;

12
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
View file

@ -36,32 +36,32 @@
</tr>
<tr>
<td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>
<td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td>
<td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true" [unitStyle]="{color: '#ffffff66'}"></app-amount></td>
</tr>
<tr>
<td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
<td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
<td class="value">{{ fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
</tr>
<tr>
<td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td class="value">
<app-fee-rate [fee]="feeRate"></app-fee-rate>
<app-fee-rate [fee]="feeRate" [unitStyle]="'color: #ffffff66'"></app-fee-rate>
</td>
</tr>
<tr *ngIf="hasEffectiveRate && effectiveRate != null">
<td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td *ngIf="this.acceleration" class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
<td class="value" [class.oobFees]="this.acceleration">
<app-fee-rate [fee]="effectiveRate"></app-fee-rate>
<app-fee-rate [fee]="effectiveRate" [unitStyle]="'color: #ffffff66'"></app-fee-rate>
</td>
</tr>
<tr *only-vsize>
<td class="label" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td class="value" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
<td class="value fixed-unit-color" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="label" i18n="transaction.weight|Transaction Weight">Weight</td>
<td class="value" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
<td class="value fixed-unit-color" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
</tr>
<tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
<td class="label" i18n="transaction.audit-status">Audit status</td>

8
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
View file

@ -1,6 +1,6 @@
.block-overview-tooltip {
position: absolute;
background: color-mix(in srgb, var(--active-bg) 95%, transparent);
background: color-mix(in srgb, #11131f 95%, transparent);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey);
@ -13,12 +13,18 @@
max-width: 400px;
pointer-events: none;
z-index: 11;
--link-color: #1bd8f4;
--link-hover-color: #09a3ba;
&.clickable {
pointer-events: all;
}
}
.block-overview-tooltip ::ng-deep .fixed-unit-color .symbol {
color: #ffffff66;
}
th, td {
&.label {
width: 30%;

4
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
View file

@ -188,7 +188,7 @@ export class BlockRewardsGraphComponent implements OnInit {
name: 'Rewards BTC',
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -196,7 +196,7 @@ export class BlockRewardsGraphComponent implements OnInit {
name: 'Rewards ' + this.currency,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},

8
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
View file

@ -188,7 +188,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
name: $localize`:@@7faaaa08f56427999f3be41df1093ce4089bbd75:Size`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -196,7 +196,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
name: $localize`:@@919f2fd60a898850c24b1584362bbf18a4628bcb:Weight`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -204,7 +204,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
name: $localize`Size per weight`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -262,7 +262,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
label: {
position: 'end',
show: true,
color: '#ffffff',
color: 'var(--fg)',
formatter: `1 MB`
}
}],

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 {

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

@ -65,7 +65,7 @@
}
.block-subtitle.actual fa-icon {
color: rgba(255, 255, 255, 0.4);
color: var(--transparent-fg);
font-size: 18px;
margin-left: 8px;
}
@ -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>

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

@ -26,7 +26,7 @@
}
.timestamp-info {
color: #fff;
color: var(--fg);
position: relative;
z-index: 11;
font-size: 14px;
@ -136,7 +136,7 @@
position:absolute;
top: calc(-0.192 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #232838;
background-color: var(--block-top);
transform:skew(40deg);
transform-origin:top;
}
@ -148,7 +148,7 @@
position: absolute;
top: calc(-0.096 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #191c27;
background-color: var(--block-side);
transform: skewY(50deg);
transform-origin: top;
@ -173,7 +173,7 @@
position:absolute;
top: calc(-0.096 * var(--block-size));
left: calc(-0.08 * var(--block-size));
background-color: #232838;
background-color: var(--block-top);
transform:skew(40deg);
transform-origin:top;
}
@ -185,7 +185,7 @@
position: absolute;
top: calc(-0.048 * var(--block-size));
left: calc(-0.08 * var(--block-size));
background-color: #191c27;
background-color: var(--block-side);
transform: skewY(50deg);
transform-origin: top;
@ -220,7 +220,7 @@
height: 0;
border-left: calc(var(--block-size) * 0.2) solid transparent;
border-right: calc(var(--block-size) * 0.2) solid transparent;
border-bottom: calc(var(--block-size) * 0.2) solid var(--fg);
border-bottom: calc(var(--block-size) * 0.2) solid var(--nav-icon);
}
.flashing {
@ -247,7 +247,7 @@
position: relative;
top: 19px;
z-index: 101;
color: #FFF;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
max-width: 145px;
@ -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;
@ -285,7 +273,7 @@
width: calc(0.6 * var(--block-size));
height: calc(0.25 * var(--block-size));
border-left: solid calc(0.3 * var(--block-size)) transparent;
border-bottom: solid calc(0.3 * var(--block-size)) white;
border-bottom: solid calc(0.3 * var(--block-size)) var(--fg);
border-right: solid calc(0.3 * var(--block-size)) transparent;
transform: translate(calc(0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
border-radius: 2px;

4
frontend/src/app/components/blockchain/blockchain.component.scss
View file

@ -53,7 +53,7 @@
}
.time-toggle {
color: var(--fg);
color: var(--nav-icon);
font-size: 0.8rem;
position: absolute;
bottom: -2.2em;
@ -67,7 +67,7 @@
}
.block-display-toggle {
color: var(--fg);
color: var(--nav-icon);
font-size: 0.8rem;
position: absolute;
bottom: 16.1em;

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>

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

@ -39,7 +39,7 @@ tr, td, th {
}
.clear-link {
color: white;
color: var(--fg);
}
.disabled {
@ -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/calculator/calculator.component.html
View file

@ -20,7 +20,7 @@
[maxDate]="todayDateModel"
[dayTemplate]="dayTemplate"
/>
<button class="btn btn-outline-secondary text-light" (click)="startDate.toggle()" type="button"><fa-icon [icon]="['fas', 'calendar']"></fa-icon></button>
<button class="btn btn-outline-secondary" (click)="startDate.toggle()" type="button"><fa-icon [icon]="['fas', 'calendar']"></fa-icon></button>
</div>
</div>

4
frontend/src/app/components/clipboard/clipboard.component.scss
View file

@ -8,8 +8,8 @@
}
.copied-message {
background: color-mix(in srgb, var(--active-bg) 95%, transparent);
color: var(--fg);
background: color-mix(in srgb, #11131f 95%, transparent);
color: var(--tooltip-grey);
font-family: sans-serif;
font-size: .8rem;
font-weight: 400;

2
frontend/src/app/components/clock/clock.component.html
View file

@ -40,7 +40,7 @@
<div class="stats top left">
<p class="label" i18n>Price</p>
<p>
<app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
<app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="fg-color"></app-fiat>
</p>
</div>
<div class="stats top right">

2
frontend/src/app/components/clock/clock.component.scss
View file

@ -56,7 +56,7 @@
::ng-deep .symbol {
font-size: inherit;
color: white;
color: var(--fg);
}
}

2
frontend/src/app/components/clockchain/clockchain.component.scss
View file

@ -3,7 +3,7 @@
left: -0.5px;
top: 0;
.divider-line {
stroke: white;
stroke: var(--nav-icon);
stroke-width: 4px;
stroke-linecap: butt;
stroke-dasharray: 25px 25px;

2
frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
View file

@ -327,7 +327,7 @@
<div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
<div class="card">
<div class="card-body">
<a href="" [routerLink]="['/sp/cubo' | relativeUrl]">
<a class="title-link" style="margin-bottom: 0;" href="" [routerLink]="['/sp/cubo' | relativeUrl]">
<h5 class="card-title d-inline">
<img src="/resources/cubo.svg" style="width: 1.1em; height: 1.1em; margin-right: 0.1em; transform: translateY(-0.1em);">
{{ widget.props?.label }}

2
frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
View file

@ -1,6 +1,6 @@
.difficulty-tooltip {
position: fixed;
background: color-mix(in srgb, var(--active-bg) 95%, transparent);
background: color-mix(in srgb, #11131f 95%, transparent);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey);

2
frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
View file

@ -167,7 +167,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
label: {
show: true,
position: 'top',
color: '#ffffff',
color: 'var(--fg)',
textShadowBlur: 0,
fontSize: this.smallScreen ? 10 : 12,
formatter: (label: { data: number[] }): string => {

12
frontend/src/app/components/fees-box/fees-box.component.scss
View file

@ -41,7 +41,7 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
border-bottom: 1px solid var(--border-subtle);
width: fit-content;
margin: auto;
font-size: 20px;
@ -79,7 +79,7 @@
display: flex;
flex-direction: row;
transition: background-color 1s;
color: #fff;
color: var(--fg);
&.priority {
width: 75%;
border-radius: 0px 10px 10px 0px;
@ -103,10 +103,10 @@
height: 22px;
background: repeating-linear-gradient(
90deg,
rgb(45, 51, 72),
rgb(45, 51, 72) 2px,
rgb(29, 31, 49) 2px,
rgb(29, 31, 49) 4px
var(--secondary),
var(--secondary) 2px,
var(--bg) 2px,
var(--bg) 4px
);
}
}

2
frontend/src/app/components/github-login.component/github-login.component.html
View file

@ -1,5 +1,5 @@
<a href="#" (click)="githubLogin()" [class]="(disabled ? 'disabled': '') + (customClass ? customClass : 'w-100 btn mt-1 d-flex justify-content-center align-items-center')" style="background-color: rgb(31, 35, 40)" [style]="width ? 'width: ' + width : ''">
<span class="ms-2 text-light align-middle">{{ buttonString }}</span>
<span class="ms-2 align-middle" style="color: #fff">{{ buttonString }}</span>
<svg height="32" viewBox="0 0 18 16" width="32" style="fill: white; padding-left: 5px">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>

6
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View file

@ -292,7 +292,7 @@ export class HashrateChartComponent implements OnInit {
name: $localize`:@@79a9dc5b1caca3cbeb1733a19515edacc5fc7920:Hashrate`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
itemStyle: {
@ -303,7 +303,7 @@ export class HashrateChartComponent implements OnInit {
name: $localize`:@@25148835d92465353fc5fe8897c27d5369978e5a:Difficulty`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -311,7 +311,7 @@ export class HashrateChartComponent implements OnInit {
name: $localize`Hashrate (MA)`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
itemStyle: {

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
View file

@ -174,7 +174,7 @@ export class HashrateChartPoolsComponent implements OnInit {
name: name,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
itemStyle: {

16
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View file

@ -137,7 +137,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
silent: true,
symbol: 'none',
lineStyle: {
color: '#fff',
color: 'var(--fg)',
opacity: 1,
width: 2,
},
@ -145,7 +145,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
yAxis: 1667,
label: {
show: false,
color: '#ffffff',
color: 'var(--fg)',
}
}],
}
@ -156,12 +156,19 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
name: 'MA',
data: this.MA,
type: 'line',
color: 'var(--fg)',
smooth: false,
showSymbol: false,
symbol: 'none',
lineStyle: {
width: 2,
color: 'white',
color: 'var(--fg)',
},
emphasis: {
lineStyle: {
width: 2,
color: 'var(--fg)',
},
}
});
}
@ -191,11 +198,12 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
bottom: 0,
selectedDataBackground: {
lineStyle: {
color: '#fff',
color: 'var(--fg)',
opacity: 0.45,
},
areaStyle: {
opacity: 0,
color: 'var(--fg)',
}
},
}],

6
frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
View file

@ -133,7 +133,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
name: 'LBTC',
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -141,7 +141,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
name: 'BTC',
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -149,7 +149,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
name: 'USD',
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
}

4
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
View file

@ -41,8 +41,8 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
color: #ffffff;
border-bottom: 1px solid var(--border-subtle);
color: var(--fg);
width: fit-content;
margin: auto;
line-height: 1.45;

2
frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
View file

@ -37,7 +37,7 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
border-bottom: 1px solid var(--border-subtle);
width: fit-content;
margin: auto;
line-height: 1.45;

4
frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
View file

@ -40,8 +40,8 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
color: #ffffff;
border-bottom: 1px solid var(--border-subtle);
color: var(--fg);
width: fit-content;
margin: auto;
line-height: 1.45;

8
frontend/src/app/components/master-page/master-page.component.scss
View file

@ -77,7 +77,7 @@ li.nav-item {
.navbar-nav {
background: var(--nav-bg);
bottom: 0;
box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0 0 15px 0 var(--nav-shadow);
flex-direction: row;
left: 0;
justify-content: space-between;
@ -141,7 +141,7 @@ li.nav-item {
}
nav {
box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 15px 0px var(--nav-shadow);
}
.connection-badge {
@ -302,8 +302,8 @@ nav {
align-self: center;
cursor: pointer;
.anon {
border: 1.5px solid lightgrey;
color: lightgrey;
border: 1.5px solid var(--transparent-fg);
color: var(--transparent-fg);
border-radius: 5px;
}
}

14
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View file

@ -72,7 +72,7 @@
position:absolute;
top: calc(-0.192 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #232838;
background-color: var(--block-top);
transform:skew(40deg);
transform-origin:top;
transition: transform 1s, left 1s;
@ -85,7 +85,7 @@
position: absolute;
top: calc(-0.096 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #191c27;
background-color: var(--block-side);
z-index: -1;
transform: skewY(50deg);
@ -94,11 +94,11 @@
}
.mempool-block.bitcoin-block::after {
background-color: #403834;
background-color: var(--mempool-block-top);
}
.mempool-block.bitcoin-block::before {
background-color: #2d2825;
background-color: var(--mempool-block-side);
}
.mempool-block.hide-block {
@ -119,7 +119,7 @@
height: 0;
border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
border-bottom: calc(var(--block-size) * 0.3) solid var(--nav-icon);
}
.blockLink {
@ -164,7 +164,7 @@
width: calc(0.6 * var(--block-size));
height: calc(0.25 * var(--block-size));
border-left: solid calc(0.3 * var(--block-size)) transparent;
border-bottom: solid calc(0.3 * var(--block-size)) white;
border-bottom: solid calc(0.3 * var(--block-size)) var(--fg);
border-right: solid calc(0.3 * var(--block-size)) transparent;
transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
border-radius: 2px;
@ -174,7 +174,7 @@
.blink{
width:400px;
height:400px;
border-bottom: solid calc(0.3 * var(--block-size)) #FFF;
border-bottom: solid calc(0.3 * var(--block-size)) var(--fg);
animation: blink 0.2s infinite;
}
@keyframes blink{

4
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View file

@ -399,7 +399,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
getStyleForMempoolBlock(mempoolBlock: MempoolBlock, index: number) {
const emptyBackgroundSpacePercentage = Math.max(100 - mempoolBlock.blockVSize / this.stateService.blockVSize * 100, 0);
const usedBlockSpace = 100 - emptyBackgroundSpacePercentage;
const backgroundGradients = [`repeating-linear-gradient(to right, #554b45, #554b45 ${emptyBackgroundSpacePercentage}%`];
const backgroundGradients = [`repeating-linear-gradient(to right, var(--mempool-block-loading), var(--mempool-block-loading) ${emptyBackgroundSpacePercentage}%`];
const gradientColors = [];
const trimmedFeeRange = index === 0 ? mempoolBlock.feeRange.slice(0, -1) : mempoolBlock.feeRange;
@ -426,7 +426,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
getStyleForMempoolEmptyBlock(index: number) {
return {
'right': this.containerOffset + index * this.blockOffset + 'px',
'background': '#554b45',
'background': 'var(--mempool-block-loading)',
};
}

10
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View file

@ -180,7 +180,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
yAxis: '1000000',
label: {
show: false,
color: '#ffffff',
color: 'var(--fg)',
}
}],
},
@ -281,7 +281,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
progressPercentageText = `<div class="total-parcial-active">
<span class="progress-percentage">
${formatNumber(progressPercentage, this.locale, '1.2-2')}
<span class="symbol">%</span>
<span class="symbol" style="color: #ffffffbb">%</span>
</span>
<span class="total-parcial-vbytes">
${this.vbytesPipe.transform(sum, 2, 'vB', 'MvB', false)}
@ -308,12 +308,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
</td>
<td class="total-progress-sum">
<span>
${(item.value[1] / 1_000_000).toFixed(2)} <span class="symbol">MvB</span>
${(item.value[1] / 1_000_000).toFixed(2)} <span class="symbol" style="color: #ffffffbb">MvB</span>
</span>
</td>
<td class="total-progress-sum">
<span>
${(totalValueArray[index] / 1_000_000).toFixed(2)} <span class="symbol">MvB</span>
${(totalValueArray[index] / 1_000_000).toFixed(2)} <span class="symbol" style="color: #ffffffbb">MvB</span>
</span>
</td>
<td class="total-progress-sum-bar">
@ -393,7 +393,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
bottom: 0,
selectedDataBackground: {
lineStyle: {
color: '#fff',
color: 'var(--fg)',
opacity: 0.45,
},
areaStyle: {

2
frontend/src/app/components/menu/menu.component.html
View file

@ -43,7 +43,7 @@
<a *ngIf="item.title !== 'Logout'" class="nav-link menu-click" [routerLink]="[item.link]" role="tab">
{{ item.title }}
@if (item.isExternal === true) {
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="margin-left: 5px; font-size: 13px; color: lightgray"></fa-icon>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="margin-left: 5px; font-size: 13px; color: var(--transparent-fg)"></fa-icon>
}
</a>
</li>

5
frontend/src/app/components/menu/menu.component.scss
View file

@ -47,7 +47,7 @@
.sidenav a, .sidenav button{
text-decoration: none;
color: lightgray;
color: var(--transparent-fg);
margin-left: 20px;
}
@ -72,7 +72,8 @@
}
.badge-default {
background-color: black;
background-color: var(--secondary);
color: var(--fg);
}
.badge-og {

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>

8
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View file

@ -147,7 +147,7 @@ export class PoolRankingComponent implements OnInit {
name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
label: {
overflow: 'none',
color: 'var(--tooltip-grey)',
color: 'var(--grey)',
alignTo: 'edge',
edgeDistance: edgeDistance,
},
@ -190,7 +190,7 @@ export class PoolRankingComponent implements OnInit {
name: $localize`Other (${percentage})`,
label: {
overflow: 'none',
color: 'var(--tooltip-grey)',
color: 'var(--grey)',
alignTo: 'edge',
edgeDistance: edgeDistance
},
@ -252,12 +252,12 @@ export class PoolRankingComponent implements OnInit {
itemStyle: {
borderRadius: 1,
borderWidth: 1,
borderColor: '#000',
borderColor: 'var(--bg)',
},
emphasis: {
itemStyle: {
shadowBlur: 40,
shadowColor: 'rgba(0, 0, 0, 0.75)',
shadowColor: 'var(--bg)',
},
labelLine: {
lineStyle: {

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>

8
frontend/src/app/components/pool/pool.component.ts
View file

@ -245,7 +245,7 @@ export class PoolComponent implements OnInit {
name: $localize`:@@79a9dc5b1caca3cbeb1733a19515edacc5fc7920:Hashrate`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
itemStyle: {
@ -256,7 +256,7 @@ export class PoolComponent implements OnInit {
name: $localize`:mining.pool-dominance:Pool Dominance`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
color: 'var(--fg)',
},
icon: 'roundRect',
},
@ -325,7 +325,7 @@ export class PoolComponent implements OnInit {
moveOnMouseMove: false,
}, {
fillerColor: '#aaaaff15',
borderColor: '#ffffff88',
borderColor: 'var(--transparent-fg)',
showDetail: false,
show: true,
type: 'slider',
@ -336,7 +336,7 @@ export class PoolComponent implements OnInit {
right: 15,
selectedDataBackground: {
lineStyle: {
color: '#fff',
color: 'var(--fg)',
opacity: 0.45,
},
areaStyle: {

16
frontend/src/app/components/price-chart/price-chart.component.html
View file

@ -28,27 +28,27 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="pricesObservable$ | async">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group" name="radioBasic">
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
<input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 1M
<input type="radio" class="btn-check" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 1M
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
<input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 3M
<input type="radio" class="btn-check" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 3M
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
<input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 6M
<input type="radio" class="btn-check" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 6M
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '1y'">
<input type="radio" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 1Y
<input type="radio" class="btn-check" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 1Y
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '2y'">
<input type="radio" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 2Y
<input type="radio" class="btn-check" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 2Y
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '3y'">
<input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 3Y
<input type="radio" class="btn-check" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> 3Y
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
<input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> ALL
<input type="radio" class="btn-check" [value]="'all'" fragment="all" [routerLink]="['/graphs/price' | relativeUrl]" formControlName="dateSpan"> ALL
</label>
</div>
</form>

6
frontend/src/app/components/privacy-policy/privacy-policy.component.html
View file

@ -1,7 +1,11 @@
<div class="container-xl">
<div class="text-center">
<br>
<img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger.png' : '/resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
@if (isLightMode) {
<img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger-light.png' : '/resources/mempool-logo-bigger-light.png'" style="width: 250px;height:63px;">
} @else {
<img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger.png' : '/resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
}
<br><br>
<h2>Privacy Policy</h2>

24
frontend/src/app/components/privacy-policy/privacy-policy.component.ts
View file

@ -1,7 +1,9 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { Env, StateService } from '@app/services/state.service';
import { SeoService } from '@app/services/seo.service';
import { OpenGraphService } from '@app/services/opengraph.service';
import { Subscription } from 'rxjs';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-privacy-policy',
@ -11,16 +13,36 @@ import { OpenGraphService } from '@app/services/opengraph.service';
})
export class PrivacyPolicyComponent {
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
themeStateSubscription: Subscription;
loadedTheme = 'default';
constructor(
private stateService: StateService,
private seoService: SeoService,
private ogService: OpenGraphService,
private themeService: ThemeService,
private cd: ChangeDetectorRef,
) { }
ngOnInit(): void {
this.seoService.setTitle('Privacy Policy');
this.seoService.setDescription('Trusted third parties are security holes, as are trusted first parties...you should only trust your own self-hosted instance of The Mempool Open Source Project®.');
this.ogService.setManualOgImage('privacy.jpg');
this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => {
if (state.loading) {
return;
}
this.loadedTheme = state.theme;
this.cd.markForCheck();
});
}
ngOnDestroy(): void {
this.themeStateSubscription?.unsubscribe();
}
get isLightMode(): boolean {
return this.loadedTheme === 'nymkappa';
}
}

2
frontend/src/app/components/rbf-list/rbf-list.component.html
View file

@ -4,7 +4,7 @@
<div class="mode-toggle float-end">
<form class="formRadioGroup">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group" name="radioBasic">
<label class="btn btn-primary btn-sm" [class.active]="!fullRbf">
<input type="radio" class="btn-check" [value]="'All'" fragment="" [routerLink]="[]"><span i18n="all">All</span></label>
<label class="btn btn-primary btn-sm" [class.active]="fullRbf">

6
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
View file

@ -19,15 +19,15 @@
</tr>
<tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td>{{ rbfInfo.tx.fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
</tr>
<tr *only-vsize>
<td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
<td class="fixed-unit-color" [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
<td class="fixed-unit-color" [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
</tr>
<tr>
<td class="td-width" i18n="transaction.status|Transaction Status">Status</td>

8
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
View file

@ -1,7 +1,7 @@
.rbf-tooltip {
position: fixed;
z-index: 3;
background: color-mix(in srgb, var(--active-bg) 95%, transparent);
background: color-mix(in srgb, #11131f 95%, transparent);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey);
@ -11,6 +11,8 @@
padding: 10px 15px;
text-align: left;
pointer-events: none;
--link-color: #1bd8f4;
--link-hover-color: #09a3ba;
.badge {
margin-right: 1em;
@ -20,6 +22,10 @@
}
}
.rbf-tooltip ::ng-deep .symbol {
color: #ffffff66;
}
.td-width {
padding-right: 10px;
}

2
frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
View file

@ -148,7 +148,7 @@
width: 100%;
height: 100%;
border-radius: 10%;
background: white;
background: var(--fg);
transition: background-color 300ms, border 300ms;
}

2
frontend/src/app/components/reward-stats/reward-stats.component.scss
View file

@ -55,7 +55,7 @@
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
border-bottom: 1px solid var(--border-subtle);
width: fit-content;
margin: auto;
line-height: 1.45;

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

@ -13,5 +13,5 @@
</form>
<ng-template #searchLoading>
<div class="spinner-border spinner-border-sm text-light" role="status" aria-hidden="true" (click)="searchForm.valid && search()"></div>
<div class="spinner-border spinner-border-sm" style="color: #fff" role="status" aria-hidden="true" (click)="searchForm.valid && search()"></div>
</ng-template>

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

@ -31,6 +31,7 @@ form {
.search-submit {
width: 62px;
color: #fff;
}
.search-box-container {
@ -58,5 +59,5 @@ form {
input:focus {
box-shadow: none;
border-color: #1b1f2c;
border-color: transparent;
}

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>

34
frontend/src/app/components/simpleproof-widget/simpleproof-cubo-widget.component.html
View file

@ -31,21 +31,23 @@
</div>
<table class="table table-borderless table-fixed">
<thead>
<th class="student text-start sortable" [ngClass]="{'widget': widget}" (click)="$event.stopPropagation(); sortBy('student_name')" style="cursor: pointer;">
<span i18n="simpleproof.student_name">Student Name</span>
<div class="sort-icons ms-1">
<fa-icon [icon]="['fas', 'caret-up']" [fixedWidth]="true" [class.active]="sortField === 'student_name' && sortDirection === 'asc'" (click)="$event.stopPropagation(); sortBy('student_name', 'asc')"></fa-icon>
<fa-icon [icon]="['fas', 'caret-down']" [fixedWidth]="true" [class.active]="sortField === 'student_name' && sortDirection === 'desc'" (click)="$event.stopPropagation(); sortBy('student_name', 'desc')"></fa-icon>
</div>
</th>
<th class="id text-start sortable" [ngClass]="{'widget': widget}" (click)="$event.stopPropagation(); sortBy('id_code')" style="cursor: pointer;">
<span i18n="simpleproof.id_code">ID</span>
<div class="sort-icons ms-1">
<fa-icon [icon]="['fas', 'caret-up']" [fixedWidth]="true" [class.active]="sortField === 'id_code' && sortDirection === 'asc'" (click)="$event.stopPropagation(); sortBy('id_code', 'asc')"></fa-icon>
<fa-icon [icon]="['fas', 'caret-down']" [fixedWidth]="true" [class.active]="sortField === 'id_code' && sortDirection === 'desc'" (click)="$event.stopPropagation(); sortBy('id_code', 'desc')"></fa-icon>
</div>
</th>
<th class="proof text-end" [ngClass]="{'widget': widget}" i18n="simpleproof.proof">Proof</th>
<tr>
<th class="student text-start sortable" [ngClass]="{'widget': widget}" (click)="$event.stopPropagation(); sortBy('student_name')" style="cursor: pointer;">
<span i18n="simpleproof.student_name">Student Name</span>
<div class="sort-icons ms-1">
<fa-icon [icon]="['fas', 'caret-up']" [fixedWidth]="true" [class.active]="sortField === 'student_name' && sortDirection === 'asc'" (click)="$event.stopPropagation(); sortBy('student_name', 'asc')"></fa-icon>
<fa-icon [icon]="['fas', 'caret-down']" [fixedWidth]="true" [class.active]="sortField === 'student_name' && sortDirection === 'desc'" (click)="$event.stopPropagation(); sortBy('student_name', 'desc')"></fa-icon>
</div>
</th>
<th class="id text-start sortable" [ngClass]="{'widget': widget}" (click)="$event.stopPropagation(); sortBy('id_code')" style="cursor: pointer;">
<span i18n="simpleproof.id_code">ID</span>
<div class="sort-icons ms-1">
<fa-icon [icon]="['fas', 'caret-up']" [fixedWidth]="true" [class.active]="sortField === 'id_code' && sortDirection === 'asc'" (click)="$event.stopPropagation(); sortBy('id_code', 'asc')"></fa-icon>
<fa-icon [icon]="['fas', 'caret-down']" [fixedWidth]="true" [class.active]="sortField === 'id_code' && sortDirection === 'desc'" (click)="$event.stopPropagation(); sortBy('id_code', 'desc')"></fa-icon>
</div>
</th>
<th class="proof text-end" [ngClass]="{'widget': widget}" i18n="simpleproof.proof">Proof</th>
</tr>
</thead>
<tbody *ngIf="verifiedPage; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngIf="widget" class="search-row">
@ -91,7 +93,7 @@
</td>
}
<td class="proof text-end" [class]="widget ? 'widget' : ''">
<a [href]="item.sanitized_simpleproof_url" target="_blank" class="badge bg-primary badge-verify" style="font-size: 1.035em;">
<a [href]="item.sanitized_simpleproof_url" target="_blank" class="badge badge-verify" style="font-size: 1.035em;">
<span class="icon">
<img class="icon-img" src="/resources/sp.svg">
</span>

12
frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.html
View file

@ -19,10 +19,12 @@
<div style="min-height: 295px">
<table class="table table-borderless" [class.table-fixed]="widget">
<thead>
<th class="filename text-start" [ngClass]="{'widget': widget}" i18n="simpleproof.filename">Filename</th>
<th class="hash text-start" [ngClass]="{'widget': widget}" i18n="simpleproof.hash">Hash</th>
<th class="verified text-end" [ngClass]="{'widget': widget}" i18n="simpleproof.verified">Verified</th>
<th class="proof text-end" [ngClass]="{'widget': widget}" i18n="simpleproof.proof">Proof</th>
<tr>
<th class="filename text-start" [ngClass]="{'widget': widget}" i18n="simpleproof.filename">Filename</th>
<th class="hash text-start" [ngClass]="{'widget': widget}" i18n="simpleproof.hash">Hash</th>
<th class="verified text-end" [ngClass]="{'widget': widget}" i18n="simpleproof.verified">Verified</th>
<th class="proof text-end" [ngClass]="{'widget': widget}" i18n="simpleproof.proof">Proof</th>
</tr>
</thead>
<tbody *ngIf="verifiedPage; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let item of verifiedPage">
@ -32,7 +34,7 @@
<app-timestamp [unixTime]="item.block_time" [customFormat]="'yyyy-MM-dd'" [hideTimeSince]="true"></app-timestamp>
</td>
<td class="proof text-end" [class]="widget ? 'widget' : ''">
<a [href]="item.sanitized_url" target="_blank" class="badge bg-primary badge-verify">
<a [href]="item.sanitized_url" target="_blank" class="badge badge-verify">
<span class="icon">
<img class="icon-img" src="/resources/sp.svg">
</span>

1
frontend/src/app/components/simpleproof-widget/simpleproof-widget.component.scss
View file

@ -150,6 +150,7 @@ td.verified {
font-weight: normal;
background: var(--nav-bg);
color: white;
text-decoration: none;
display: flex;
flex-direction: row;

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;

2
frontend/src/app/components/statistics/statistics.component.html
View file

@ -13,7 +13,7 @@
<form [formGroup]="radioGroupForm" class="formRadioGroup"
[class]="(stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING) ? 'mining' : 'no-menu'" (click)="saveGraphPreference()">
<div class="small-buttons">
<a class="btn btn-primary btn-sm mb-0" [routerLink]="['/clock/mempool/0' | relativeUrl]" style="color: white" id="btn-clock">
<a class="btn btn-primary btn-sm mb-0" [routerLink]="['/clock/mempool/0' | relativeUrl]" style="color: var(--fg)" id="btn-clock">
<fa-icon [icon]="['fas', 'clock']" [fixedWidth]="true" i18n-title="master-page.clockview" i18n-title="footer.clock-mempool" title="Clock (Mempool)"></fa-icon>
</a>
</div>

7
frontend/src/app/components/statistics/statistics.component.scss
View file

@ -126,13 +126,6 @@
}
}
.btn-group-toggle {
display: inline-flex;
@media (min-width: 830px) {
display: block;
}
}
.small-buttons {
width: 100%;
display: flex;

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

144
frontend/src/app/components/svg-images/svg-images.component.html
View file

File diff suppressed because one or more lines are too long

6
frontend/src/app/components/terms-of-service/terms-of-service.component.html
View file

@ -1,7 +1,11 @@
<div class="container-xl">
<div class="text-center">
<br />
<img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger.png' : '/resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
@if (isLightMode) {
<img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger-light.png' : '/resources/mempool-logo-bigger-light.png'" style="width: 250px;height:63px;">
} @else {
<img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger.png' : '/resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
}
<br /><br />
<h2>Terms of Service</h2>

24
frontend/src/app/components/terms-of-service/terms-of-service.component.ts
View file

@ -1,7 +1,9 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { Env, StateService } from '@app/services/state.service';
import { SeoService } from '@app/services/seo.service';
import { OpenGraphService } from '@app/services/opengraph.service';
import { Subscription } from 'rxjs';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-terms-of-service',
@ -10,16 +12,36 @@ import { OpenGraphService } from '@app/services/opengraph.service';
})
export class TermsOfServiceComponent {
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
themeStateSubscription: Subscription;
loadedTheme = 'default';
constructor(
private stateService: StateService,
private seoService: SeoService,
private ogService: OpenGraphService,
private themeService: ThemeService,
private cd: ChangeDetectorRef,
) { }
ngOnInit(): void {
this.seoService.setTitle('Terms of Service');
this.seoService.setDescription('Out of respect for the Bitcoin community, the mempool.space website is Bitcoin Only and does not display any advertising.');
this.ogService.setManualOgImage('tos.jpg');
this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => {
if (state.loading) {
return;
}
this.loadedTheme = state.theme;
this.cd.markForCheck();
});
}
ngOnDestroy(): void {
this.themeStateSubscription?.unsubscribe();
}
get isLightMode(): boolean {
return this.loadedTheme === 'nymkappa';
}
}

1
frontend/src/app/components/theme-selector/theme-selector.component.html
View file

@ -3,5 +3,6 @@
<option value="default">wiz</option>
<option value="contrast">BlueMatt</option>
<option value="softsimon">softsimon</option>
<option value="nymkappa">nymkappa</option>
</select>
</div>

4
frontend/src/app/components/theme-selector/theme-selector.component.ts
View file

@ -12,7 +12,7 @@ import { Subscription } from 'rxjs';
})
export class ThemeSelectorComponent implements OnInit, OnDestroy {
themeForm: UntypedFormGroup;
themes = ['default', 'contrast', 'softsimon', 'bukele'];
themes = ['default', 'contrast', 'softsimon', 'bukele', 'nymkappa'];
themeStateSubscription: Subscription;
constructor(
@ -36,7 +36,7 @@ export class ThemeSelectorComponent implements OnInit, OnDestroy {
changeTheme() {
const newTheme = this.themeForm.get('theme')?.value;
this.themeService.apply(newTheme);
this.themeService.setTheme(newTheme);
}
ngOnDestroy() {

4
frontend/src/app/components/trademark-policy/trademark-policy.component.scss
View file

@ -30,4 +30,8 @@
ol ol ol li {
font-size: 1.15rem;
}
.table {
--bs-table-border-color: var(--fg);
}
}

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

@ -169,7 +169,7 @@
}
@if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && notAcceleratedOnLoad) {
<div class="d-flex accelerate">
<a class="btn btn-sm accelerateDeepMempool btn-small-height" [class.disabled]="!eligibleForAcceleration" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
<a class="btn btn-sm accelerateDeepMempool btn-small-height btn-purple" [class.disabled]="!eligibleForAcceleration" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
<a *ngIf="!eligibleForAcceleration" href="https://mempool.space/accelerator#why-cant-accelerate" target="_blank" class="info-badges ms-1" i18n-ngbTooltip="Mempool Accelerator&reg; tooltip" ngbTooltip="This transaction cannot be accelerated">
<fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
</a>
@ -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 {

20
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;
@ -161,11 +153,7 @@
}
.accelerateDeepMempool {
background-color: var(--tertiary);
margin-left: 5px;
--bs-btn-active-bg: var(--tertiary);
--bs-btn-active-border-color: transparent;
--bs-btn-active-color: var(--fg);
}
.goggles-icon {
@ -173,14 +161,6 @@
width: 2.7em;
}
.pool-logo {
width: 15px;
height: 15px;
position: relative;
top: -1px;
margin-right: 2px;
}
.oobFees {
color: #905cf4;
}

2
frontend/src/app/components/transaction/transaction-raw.component.scss
View file

@ -202,6 +202,6 @@
}
.icon-symbol {
color: rgba(255, 255, 255, 0.4);
color: var(--transparent-fg);
margin-left: 5px;
}

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

4
frontend/src/app/components/transactions-list/transactions-list.component.html
View file

@ -521,7 +521,7 @@
<div class="float-end" [class.has-accelerate]="!tx.status?.confirmed && acceleratedTxids">
@if (!tx.status?.confirmed && acceleratedTxids) {
<button type="button" class="btn btn-sm accelerate mt-2 me-2" [class.blink]="acceleratedTxids.has(tx.txid)" [routerLink]="['/tx/' | relativeUrl, tx.txid]" [fragment]="'accelerate'">
<button type="button" class="btn btn-sm accelerate mt-2 me-2 btn-purple" [class.blink]="acceleratedTxids.has(tx.txid)" [routerLink]="['/tx/' | relativeUrl, tx.txid]" [fragment]="'accelerate'">
<img src="/resources/mempool-accelerator-sparkles-light.svg" height="15" class="me-2" />
@if (acceleratedTxids.has(tx.txid)) {
<span i18n="transaction.audit.accelerated">Accelerated</span>
@ -541,7 +541,7 @@
</button>
<ng-template #viewingAddress>
<button type="button" class="btn btn-sm mt-2 ms-2" (click)="switchCurrency()" [ngClass]="{'btn-success': tx['addressValue'] >= 0, 'btn-danger': tx['addressValue'] < 0}">
<app-amount [blockConversion]="tx.price" [satoshis]="tx['addressValue']" [addPlus]="true"></app-amount>
<app-amount [blockConversion]="tx.price" [satoshis]="tx['addressValue']" [addPlus]="true" [unitStyle]="{color: '#ffffffbb'}"></app-amount>
</button>
</ng-template>
</div>

Some files were not shown because too many files have changed in this diff Show more