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

Channel component

Browse Source
This commit is contained in:
softsimon
2022-05-01 03:01:27 +04:00
parent f5325b3a6d
commit 795bb6a7a6
23 changed files with 536 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
frontend/src/app/lightning/channel/channel.component.html Normal file
View File

@@ -0,0 +1,144 @@
<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.id }}</a> <app-clipboard [text]="channel.id"></app-clipboard></h1>
<div class="badges">
<span class="badge rounded-pill badge-success">Open</span>
</div>
</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 i18n="address.total-sent">Last update</td>
<td>{{ channel.updated_at | date:'yyyy-MM-dd HH:mm' }}</td>
</tr>
<tr>
<td i18n="address.total-sent">Transaction ID</td>
<td>
<a [routerLink]="['/tx' | relativeUrl, channel.transaction_id + ':' + channel.transaction_vout]" >
<span>{{ channel.transaction_id | shortenString : 10 }}</span>
</a>
<app-clipboard [text]="channel.transaction_id"></app-clipboard>
</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 i18n="address.total-received">Capacity</td>
<td><app-sats [satoshis]="channel.capacity"></app-sats></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<h2>Peers</h2>
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td i18n="address.total-sent">Node</td>
<td>
{{ channel.alias_left }}
<br>
<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>
</td>
</tr>
<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 class="w-100 d-block d-md-none"></div>
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td i18n="address.total-sent">Node</td>
<td>
{{ channel.alias_right }}
<br>
<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>
</td>
</tr>
<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>
</div>
</div>
<br>

3
frontend/src/app/lightning/channel/channel.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.badges {
font-size: 18px;
}

30
frontend/src/app/lightning/channel/channel.component.ts Normal file
View File

@@ -0,0 +1,30 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { LightningApiService } from '../lightning-api.service';
@Component({
selector: 'app-channel',
templateUrl: './channel.component.html',
styleUrls: ['./channel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChannelComponent implements OnInit {
channel$: Observable<any>;
constructor(
private lightningApiService: LightningApiService,
private activatedRoute: ActivatedRoute,
) { }
ngOnInit(): void {
this.channel$ = this.activatedRoute.paramMap
.pipe(
switchMap((params: ParamMap) => {
return this.lightningApiService.getChannel$(params.get('short_id'));
})
);
}
}