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

Merge branch 'master' into simon/svg-logos

Browse Source
This commit is contained in:
wiz
2022-08-30 22:07:02 +02:00
committed by GitHub
parent 004c6bdcdb 08d73e24c5
commit 20f0b08b3e
63 changed files with 946 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
View File

@@ -61,7 +61,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
View File

@@ -61,7 +61,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
View File

@@ -61,7 +61,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
View File

@@ -61,7 +61,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
View File

@@ -61,7 +61,7 @@
flex-direction: column;
@media (min-width: 1130px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 1130px) {
position: relative;

2
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@@ -61,7 +61,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@@ -55,7 +55,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@@ -39,7 +39,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

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

@@ -11,7 +11,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup"
[class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
[class]="(stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING) ? 'mining' : 'no-menu'" (click)="saveGraphPreference()">
<div *ngIf="!isMobile()" class="btn-group btn-group-toggle">
<label ngbButtonLabel class="btn-primary btn-sm mr-2">
<a [routerLink]="['/tv' | relativeUrl]" style="color: white" id="btn-tv">

8
frontend/src/app/components/statistics/statistics.component.scss
View File

@@ -55,13 +55,19 @@
.formRadioGroup.mining {
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
}
.formRadioGroup.no-menu {
@media (min-width: 991px) {
position: relative;
top: -33px;
}
}
.loading{
display: flex;

60
frontend/src/app/lightning/channel/channel.component.html
View File

@@ -1,4 +1,4 @@
<div class="container-xl" *ngIf="(channel$ | async) as channel">
<div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<div class="title-container">
<h1 class="mb-0">{{ channel.short_id }}</h1>
@@ -86,4 +86,62 @@
<br><br>
<i>{{ error.status }}: {{ error.error }}</i>
</div>
</ng-template>
<ng-template #skeletonLoader>
<div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<div class="title-container">
<h1 class="mb-0"><span class="skeleton-loader" style="width: 275px; height: 25px;"></span></h1>
<span class="tx-link">
<span class="skeleton-loader" style="margin-bottom: 5px; width: 210px;"></span>
</span>
</div>
<div class="badges mb-2">
<span class="skeleton-loader" style="width: 50px; height: 22px; margin-top: 5px;"></span>
</div>
<div class="clearfix"></div>
<div style="height: 413px; padding: 15px;">
<div class="text-center loading-spinner">
<div class="spinner-border text-light"></div>
</div>
</div>
<br>
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</ng-template>

12
frontend/src/app/lightning/channel/channel.component.scss
View File

@@ -56,3 +56,15 @@ app-fiat {
font-size: 1.4rem;
}
}
.loading-spinner {
position: absolute;
top: 400px;
z-index: 100;
width: 100%;
left: 0;
@media (max-width: 767.98px) {
top: 450px;
}
}

5
frontend/src/app/lightning/channel/channel.component.ts
View File

@@ -1,9 +1,8 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { forkJoin, Observable, of, share, zip } from 'rxjs';
import { catchError, map, shareReplay, switchMap, tap } from 'rxjs/operators';
import { Observable, of, zip } from 'rxjs';
import { catchError, map, shareReplay, switchMap } from 'rxjs/operators';
import { IChannel } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
import { ElectrsApiService } from 'src/app/services/electrs-api.service';
import { SeoService } from 'src/app/services/seo.service';
import { LightningApiService } from '../lightning-api.service';

6
frontend/src/app/lightning/channels-list/channels-list.component.html
View File

@@ -1,5 +1,5 @@
<div *ngIf="channels$ | async as response; else skeleton">
<form [formGroup]="channelStatusForm" class="formRadioGroup float-right">
<div *ngIf="channels$ | async as response; else skeleton" style="position: relative;">
<form [formGroup]="channelStatusForm" class="formRadioGroup">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="status">
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'open'" fragment="open" i18n="open">Open
@@ -10,7 +10,7 @@
</div>
</form>
<table class="table table-borderless" *ngIf="response.channels.length > 0">
<table class="table table-borderless" *ngIf="response.channels.length > 0" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngTemplateOutlet="tableHeader"></ng-container>
<tbody>
<tr *ngFor="let channel of response.channels; let i = index;">

17
frontend/src/app/lightning/channels-list/channels-list.component.scss
View File

@@ -7,3 +7,20 @@
font-size: 12px;
top: 0px;
}
.formRadioGroup {
@media (min-width: 435px) {
position: absolute;
right: 0;
top: -46px;
}
@media (max-width: 435px) {
display: flex;
}
}
.btn-group {
@media (max-width: 435px) {
flex-grow: 1;
}
}

10
frontend/src/app/lightning/channels-list/channels-list.component.ts
View File

@@ -14,6 +14,7 @@ import { LightningApiService } from '../lightning-api.service';
export class ChannelsListComponent implements OnInit, OnChanges {
@Input() publicKey: string;
@Output() channelsStatusChangedEvent = new EventEmitter<string>();
@Output() loadingEvent = new EventEmitter<boolean>(false);
channels$: Observable<any>;
// @ts-ignore
@@ -26,6 +27,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
defaultStatus = 'open';
status = 'open';
publicKeySize = 25;
isLoading = false;
constructor(
private lightningApiService: LightningApiService,
@@ -56,6 +58,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
)
.pipe(
tap((val) => {
this.isLoading = true;
this.loadingEvent.emit(true);
if (typeof val === 'string') {
this.status = val;
this.page = 1;
@@ -64,10 +68,12 @@ export class ChannelsListComponent implements OnInit, OnChanges {
}
}),
switchMap(() => {
this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
}),
map((response) => {
this.isLoading = false;
this.loadingEvent.emit(false);
return {
channels: response.body,
totalItems: parseInt(response.headers.get('x-total-count'), 10)

46
frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
View File

@@ -9,44 +9,44 @@
<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
<div class="fee-estimation-container" *ngIf="mode === 'avg'">
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">sats</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_capacity" [previous]="statistics.previous?.avg_capacity"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
<div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc"
ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
placement="bottom">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">ppm</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
<div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc"
ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">msats</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change>
</span>
</div>
@@ -55,43 +55,45 @@
</div>
<div class="fee-estimation-container" *ngIf="mode === 'med'">
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5>
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">sats</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_capacity" [previous]="statistics.previous?.med_capacity"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5>
<div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc"
ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
ngbTooltip="The median fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
placement="bottom">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">ppm</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5>
<div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc"
ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">msats</span>
</div>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change>
</span>
</div>
@@ -102,21 +104,21 @@
<ng-template #loadingReward>
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5>
<h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
<h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
<h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>

12
frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
View File

@@ -18,6 +18,10 @@
}
}
.fee-estimation-wrapper {
min-height: 77px;
}
.fee-estimation-container {
display: flex;
justify-content: space-between;
@@ -30,7 +34,10 @@
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
}
&.more-padding {
padding-top: 10px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
@@ -57,6 +64,9 @@
margin: auto;
line-height: 1.45;
padding: 0px 2px;
&.no-border {
border-bottom: none;
}
}
.fiat {
display: block;

54
frontend/src/app/lightning/node-statistics/node-statistics.component.html
View File

@@ -1,76 +1,64 @@
<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Capacity</h5>
<div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Percentage change past week"
placement="bottom">
<div class="fee-text">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="lightning.capacity">Capacity</h5>
<div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
[disableTooltip]="!statistics.previous" placement="bottom">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
<app-amount [satoshis]="statistics.latest?.total_capacity" digitsInfo="1.2-2"></app-amount>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.total_capacity" [previous]="statistics.previous?.total_capacity">
</app-change>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5>
<div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Percentage change past week"
placement="bottom">
<div class="fee-text">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
<div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
[disableTooltip]="!statistics.previous">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.node_count || 0 | number }}
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.node_count" [previous]="statistics.previous?.node_count"></app-change>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
<div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Percentage change past week"
placement="bottom">
<div class="fee-text">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="lightning.channels">Channels</h5>
<div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
[disableTooltip]="!statistics.previous">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.channel_count || 0 | number }}
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.channel_count" [previous]="statistics.previous?.channel_count">
</app-change>
</span>
</div>
</div>
<!--
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
<div class="card-text" i18n-ngbTooltip="mining.average-fee"
ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
<app-amount [satoshis]="statistics.latest.average_channel_size" digitsInfo="1.2-3"></app-amount>
<span class="fiat">
<app-change [current]="statistics.latest.average_channel_size" [previous]="statistics.previous.average_channel_size"></app-change>
</span>
</div>
</div>
-->
</div>
</div>
<ng-template #loadingReward>
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5>
<h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
<h5 class="card-title" i18n="lightning.channels">Channels</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
<h5 class="card-title" i18n="lightning.average-channels">Average Channel</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>

12
frontend/src/app/lightning/node-statistics/node-statistics.component.scss
View File

@@ -18,6 +18,10 @@
}
}
.fee-estimation-wrapper {
min-height: 77px;
}
.fee-estimation-container {
display: flex;
justify-content: space-between;
@@ -30,7 +34,10 @@
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
}
&.more-padding {
padding-top: 10px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
@@ -57,6 +64,9 @@
margin: auto;
line-height: 1.45;
padding: 0px 2px;
&.no-border {
border-bottom: none;
}
}
.fiat {
display: block;

109
frontend/src/app/lightning/node/node.component.html
View File

@@ -1,10 +1,11 @@
<div class="container-xl" *ngIf="(node$ | async) as node">
<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2" *ngIf="!error">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<span class="tx-link">
<a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
{{ node.public_key | shortenString : publicKeySize }}
<span class="d-inline d-lg-none">{{ node.public_key | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ node.public_key }}</span>
</a>
<app-clipboard [text]="node.public_key"></app-clipboard>
</span>
@@ -133,7 +134,7 @@
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
<div class="d-flex justify-content-between">
<div class="d-flex">
<h2 *ngIf="channelsListStatus === 'open'">
<span i18n="lightning.open-channels">Open channels</span>
<span> ({{ node.opened_channel_count }})</span>
@@ -142,12 +143,112 @@
<span i18n="lightning.open-channels">Closed channels</span>
<span> ({{ node.closed_channel_count }})</span>
</h2>
<div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
</div>
<app-channels-list [publicKey]="node.public_key"
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
(loadingEvent)="onLoadingEvent($event)"
></app-channels-list>
</div>
</div>
<ng-template #skeletonLoader>
<div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2">
<h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px;"></span></h1>
<span class="tx-link">
<span class="skeleton-loader" style="margin-bottom: 5px; width: 80%;"></span>
</span>
</div>
<div class="clearfix"></div>
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="input-group mt-3" >
<span class="input-group-text" id="basic-addon3"><span class="skeleton-loader" style="width: 75px;"></span></span>
<input type="text" class="form-control" disabled style="opacity: 0.3;">
<button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
<fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
</button>
<button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
<app-clipboard [text]="''"></app-clipboard>
</button>
</div>
<br>
<div class="row">
<div class="col-sm">
<div style="height: 400px;">
<div class="text-center loadingGraphs">
<div class="spinner-border text-light"></div>
</div>
</div>
</div>
<div class="col-sm">
<div style="height: 400px;">
<div class="text-center loadingGraphs">
<div class="spinner-border text-light"></div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<br>

22
frontend/src/app/lightning/node/node.component.scss
View File

@@ -56,4 +56,24 @@ app-fiat {
display: inline-block;
margin-left: 10px;
}
}
}
.spinner-border {
@media (min-width: 768px) {
margin-top: 6.5px;
width: 1.75rem;
height: 1.75rem;
}
@media (max-width: 768px) {
margin-top: 2.3px;
width: 1.5rem;
height: 1.5rem;
}
}
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}

14
frontend/src/app/lightning/node/node.component.ts
View File

@@ -4,7 +4,6 @@ import { Observable } from 'rxjs';
import { catchError, map, switchMap } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { LightningApiService } from '../lightning-api.service';
import { isMobile } from '../../shared/common.utils';
import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
@Component({
@@ -22,18 +21,13 @@ export class NodeComponent implements OnInit {
channelsListStatus: string;
error: Error;
publicKey: string;
publicKeySize = 99;
channelListLoading = false;
constructor(
private lightningApiService: LightningApiService,
private activatedRoute: ActivatedRoute,
private seoService: SeoService,
) {
if (isMobile()) {
this.publicKeySize = 12;
}
}
) { }
ngOnInit(): void {
this.node$ = this.activatedRoute.paramMap
@@ -97,4 +91,8 @@ export class NodeComponent implements OnInit {
onChannelsListStatusChanged(e) {
this.channelsListStatus = e;
}
onLoadingEvent(e) {
this.channelListLoading = e;
}
}

2
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
View File

@@ -238,7 +238,7 @@ export class NodesChannelsMap implements OnInit {
roam: this.style === 'widget' ? false : true,
itemStyle: {
borderColor: 'black',
color: '#ffffff44'
color: '#272b3f'
},
scaleLimit: {
min: 1.3,

10
frontend/src/app/lightning/nodes-channels/node-channels.component.ts
View File

@@ -44,13 +44,13 @@ export class NodeChannels implements OnChanges {
switchMap((response) => {
this.isLoading = true;
if ((response.body?.length ?? 0) <= 0) {
return [];
this.isLoading = false;
return [''];
}
return [response.body];
}),
tap((body: any[]) => {
if (body.length === 0) {
this.isLoading = false;
if (body.length === 0 || body[0].length === 0) {
return;
}
const biggestCapacity = body[0].capacity;
@@ -130,10 +130,6 @@ export class NodeChannels implements OnChanges {
}
onChartInit(ec: ECharts): void {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {

2
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
View File

@@ -60,7 +60,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
View File

@@ -28,7 +28,7 @@
<div class="card-header" *ngIf="!widget">
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.top-100-isp-ln">Top 100 ISP hosting LN nodes</span>
<span i18n="lightning.top-100-isp-ln">Top 100 ISPs hosting LN nodes</span>
<button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

2
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
View File

@@ -40,7 +40,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

2
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
View File

@@ -60,7 +60,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

4
frontend/src/index.bisq.html
View File

@@ -5,7 +5,7 @@
<title>mempool - Bisq Markets</title>
<base href="/">
<meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Bisq Network.">
<meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem.">
<meta property="og:image" content="https://bisq.markets/resources/bisq/bisq-markets-preview.png" />
<meta property="og:image:type" content="image/jpeg" />
@@ -14,7 +14,7 @@
<meta property="twitter:site" content="https://bisq.markets/">
<meta property="twitter:creator" content="@bisq_network">
<meta property="twitter:title" content="The Mempool Open Source Project™">
<meta property="twitter:description" content="Our self-hosted markets explorer for the Bisq community.">
<meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
<meta property="twitter:image:src" content="https://bisq.markets/resources/bisq/bisq-markets-preview.png" />
<meta property="twitter:domain" content="bisq.markets">

4
frontend/src/index.liquid.html
View File

@@ -5,7 +5,7 @@
<title>mempool - Liquid Network</title>
<base href="/">
<meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Liquid Network.">
<meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem.">
<meta property="og:image" content="https://liquid.network/resources/liquid/liquid-network-preview.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1000" />
@@ -14,7 +14,7 @@
<meta property="twitter:site" content="@mempool">
<meta property="twitter:creator" content="@mempool">
<meta property="twitter:title" content="The Mempool Open Source Project™">
<meta property="twitter:description" content="Our self-hosted network explorer for the Liquid community.">
<meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
<meta property="twitter:image:src" content="https://liquid.network/resources/liquid/liquid-network-preview.png" />
<meta property="twitter:domain" content="liquid.network">

4
frontend/src/index.mempool.html
View File

@@ -5,7 +5,7 @@
<title>mempool - Bitcoin Explorer</title>
<base href="/">
<meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Bitcoin community." />
<meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem." />
<meta property="og:image" content="https://mempool.space/resources/mempool-space-preview.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1000" />
@@ -14,7 +14,7 @@
<meta property="twitter:site" content="@mempool">
<meta property="twitter:creator" content="@mempool">
<meta property="twitter:title" content="The Mempool Open Source Project™">
<meta property="twitter:description" content="Our self-hosted mempool explorer for the Bitcoin community." />
<meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
<meta property="twitter:image:src" content="https://mempool.space/resources/mempool-space-preview.png" />
<meta property="twitter:domain" content="mempool.space">

BIN
frontend/src/resources/bisq/bisq-markets-preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 94 KiB

BIN
frontend/src/resources/liquid/liquid-network-preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 96 KiB

BIN
frontend/src/resources/previews/dashboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 726 KiB

BIN
frontend/src/resources/previews/lightning.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
frontend/src/resources/previews/mining.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 607 KiB

5
frontend/src/styles.scss
View File

@@ -705,6 +705,10 @@ th {
.locktime { color: #ff8c00 }
.reserved { color: #ff8c00 }
.shortable-address {
font-family: monospace;
}
.rtl-layout {
.navbar-brand {
@@ -881,6 +885,7 @@ th {
.shortable-address {
direction: ltr;
font-family: monospace;
}
.lastest-blocks-table {