mirror of
https://github.com/mempool/mempool.git
synced 2025-02-21 14:04:15 +01:00
Merge branch 'master' into nymkappa/bugfix/ipv6-cln
This commit is contained in:
wiz
GitHub
commit
b690dcaabc
7 changed files with 185 additions and 17 deletions
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -104,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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -153,4 +154,101 @@
|
|||
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -69,4 +69,11 @@ app-fiat {
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadingGraphs {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(50% - 15px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
@ -23,17 +22,12 @@ export class NodeComponent implements OnInit {
|
|||
error: Error;
|
||||
publicKey: string;
|
||||
channelListLoading = false;
|
||||
publicKeySize = 99;
|
||||
|
||||
constructor(
|
||||
private lightningApiService: LightningApiService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private seoService: SeoService,
|
||||
) {
|
||||
if (isMobile()) {
|
||||
this.publicKeySize = 12;
|
||||
}
|
||||
}
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.node$ = this.activatedRoute.paramMap
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue