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

Node and Channel pages improvements

Browse Source
This commit is contained in:
softsimon
2022-05-15 19:22:14 +04:00
parent 179f959f0f
commit e12f32ef80
16 changed files with 239 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/app/lightning/channel/channel-box/channel-box.component.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="mb-2">
<h2 class="mb-0">{{ channel.alias || '?' }}</h2>
<a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
{{ channel.public_key | shortenString : 12 }}
</a>
<app-clipboard [text]="channel.node1_public_key"></app-clipboard>
</div>
<div class="box">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td i18n="address.total-sent">Fee rate</td>
<td>
{{ channel.fee_rate }} <span class="symbol">ppm ({{ channel.fee_rate / 10000 | number }}%)</span>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Base fee</td>
<td>
<app-sats [satoshis]="channel.base_fee_mtokens / 1000"></app-sats>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Min HTLC</td>
<td>
<app-sats [satoshis]="channel.min_htlc_mtokens / 1000"></app-sats>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Max HTLC</td>
<td>
<app-sats [satoshis]="channel.max_htlc_mtokens / 1000"></app-sats>
</td>
</tr>
</tbody>
</table>
</div>
</div>

0
frontend/src/app/lightning/channel/channel-box/channel-box.component.scss Normal file
View File

14
frontend/src/app/lightning/channel/channel-box/channel-box.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
@Component({
selector: 'app-channel-box',
templateUrl: './channel-box.component.html',
styleUrls: ['./channel-box.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChannelBoxComponent {
@Input() channel: any;
constructor() { }
}

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

@@ -1,11 +1,15 @@
<div class="container-xl" *ngIf="(channel$ | async) as channel">
<div class="mb-2">
<h1 i18n="shared.address" class="mb-0">Channel <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a> <app-clipboard [text]="channel.id"></app-clipboard></h1>
<div class="badges">
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
<span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2">Closed</span>
</div>
<div class="title-container">
<h1 class="mb-0">{{ channel.short_id }}</h1>
<span class="tx-link">
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
<app-clipboard [text]="channel.id"></app-clipboard>
</span>
</div>
<div class="badges mb-2">
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
<span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2">Closed</span>
</div>
<div class="clearfix"></div>
@@ -42,7 +46,7 @@
<tbody>
<tr>
<td i18n="address.total-received">Capacity</td>
<td><app-sats [satoshis]="channel.capacity"></app-sats>&nbsp; <app-fiat [value]="channel.capacity" digitsInfo="1.2-2"></app-fiat></td>
<td><app-sats [satoshis]="channel.capacity"></app-sats><app-fiat [value]="channel.capacity" digitsInfo="1.0-0"></app-fiat></td>
</tr>
</tbody>
</table>
@@ -55,90 +59,10 @@
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<div class="mb-2">
<h2 class="mb-0">{{ channel.alias_left || '?' }}</h2>
<a [routerLink]="['/lightning/node' | relativeUrl, channel.node1_public_key]" >
{{ channel.node1_public_key | shortenString : 18 }}
</a>
<app-clipboard [text]="channel.node1_public_key"></app-clipboard>
</div>
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td i18n="address.total-sent">Fee rate</td>
<td>
{{ channel.node1_fee_rate / 10000 | number }}%
</td>
</tr>
<tr>
<td i18n="address.total-sent">Base fee</td>
<td>
<app-sats [satoshis]="channel.node1_base_fee_mtokens / 1000"></app-sats>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Min HTLC</td>
<td>
<app-sats [satoshis]="channel.node1_min_htlc_mtokens / 1000"></app-sats>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Max HTLC</td>
<td>
<app-sats [satoshis]="channel.node1_max_htlc_mtokens / 1000"></app-sats>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<app-channel-box [channel]="channel.node_left"></app-channel-box>
</div>
<div class="col">
<div class="mb-2">
<h2 class="mb-0">{{ channel.alias_right || '?' }}</h2>
<a [routerLink]="['/lightning/node' | relativeUrl, channel.node2_public_key]" >
{{ channel.node2_public_key | shortenString : 18 }}
</a>
<app-clipboard [text]="channel.node1_public_key"></app-clipboard>
</div>
<div class="box">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td i18n="address.total-sent">Fee rate</td>
<td>
{{ channel.node2_fee_rate / 10000 | number }}%
</td>
</tr>
<tr>
<td i18n="address.total-sent">Base fee</td>
<td>
<app-sats [satoshis]="channel.node2_base_fee_mtokens / 1000"></app-sats>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Min HTLC</td>
<td>
<app-sats [satoshis]="channel.node2_min_htlc_mtokens / 1000"></app-sats>
</td>
</tr>
<tr>
<td i18n="address.total-sent">Max HTLC</td>
<td>
<app-sats [satoshis]="channel.node2_max_htlc_mtokens / 1000"></app-sats>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<app-channel-box [channel]="channel.node_right"></app-channel-box>
</div>
</div>

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

@@ -1,3 +1,41 @@
.title-container {
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
}
.tx-link {
display: flex;
flex-grow: 1;
@media (min-width: 650px) {
align-self: end;
margin-left: 15px;
margin-top: 0px;
margin-bottom: -3px;
}
@media (min-width: 768px) {
margin-bottom: 4px;
top: 1px;
position: relative;
}
@media (max-width: 768px) {
order: 2;
}
}
.badges {
font-size: 20px;
}
}
app-fiat {
display: block;
font-size: 13px;
@media (min-width: 768px) {
font-size: 14px;
display: inline-block;
margin-left: 10px;
}
}

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { LightningApiService } from '../lightning-api.service';
@Component({
@@ -16,12 +17,14 @@ export class ChannelComponent implements OnInit {
constructor(
private lightningApiService: LightningApiService,
private activatedRoute: ActivatedRoute,
private seoService: SeoService,
) { }
ngOnInit(): void {
this.channel$ = this.activatedRoute.paramMap
.pipe(
switchMap((params: ParamMap) => {
this.seoService.setTitle(`Channel: ${params.get('short_id')}`);
return this.lightningApiService.getChannel$(params.get('short_id'));
})
);