parent
406a65cfb6
commit
fa83c2a26d
@ -16,3 +16,9 @@
|
||||
color: #ffffff66;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
@ -14,7 +14,7 @@
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<app-nodes-channels-map *ngIf="!error" [style]="'channelpage'" [channel]="channelGeo"></app-nodes-channels-map>
|
||||
<app-nodes-channels-map *ngIf="!error && (channelGeo$ | async) as channelGeo" [style]="'channelpage'" [channel]="channelGeo"></app-nodes-channels-map>
|
||||
|
||||
<div class="box">
|
||||
|
||||
@ -30,32 +30,6 @@
|
||||
<td i18n="address.total-sent">Last update</td>
|
||||
<td><app-timestamp [dateString]="channel.updated_at"></app-timestamp></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="address.total-sent">Opening transaction</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>
|
||||
<ng-template [ngIf]="channel.closing_transaction_id">
|
||||
<tr *ngIf="channel.closing_transaction_id">
|
||||
<td i18n="address.total-sent">Closing transaction</td>
|
||||
<td>
|
||||
<a [routerLink]="['/tx' | relativeUrl, channel.closing_transaction_id]" >
|
||||
<span>{{ channel.closing_transaction_id | shortenString : 10 }}</span>
|
||||
</a>
|
||||
<app-clipboard [text]="channel.closing_transaction_id"></app-clipboard>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="address.total-sent">Closing type</td>
|
||||
<td>
|
||||
<app-closing-type [type]="channel.closing_reason"></app-closing-type>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -82,8 +56,23 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<app-channel-box [channel]="channel.node_right"></app-channel-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<ng-container *ngIf="transactions$ | async as transactions">
|
||||
<ng-template [ngIf]="transactions[0]">
|
||||
<h3>Opening transaction</h3>
|
||||
<app-transactions-list [transactions]="[transactions[0]]" [showConfirmations]="true"></app-transactions-list>
|
||||
</ng-template>
|
||||
<ng-template [ngIf]="transactions[1]">
|
||||
<div class="closing-header">
|
||||
<h3 style="margin: 0;">Closing transaction</h3> <app-closing-type [type]="channel.closing_reason"></app-closing-type>
|
||||
</div>
|
||||
<app-transactions-list [transactions]="[transactions[1]]" [showConfirmations]="true"></app-transactions-list>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -39,3 +39,16 @@ app-fiat {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.closing-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,9 @@
|
||||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { catchError, switchMap, tap } from 'rxjs/operators';
|
||||
import { forkJoin, Observable, of, share, zip } from 'rxjs';
|
||||
import { catchError, map, shareReplay, switchMap, tap } from 'rxjs/operators';
|
||||
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';
|
||||
|
||||
@ -13,13 +15,15 @@ import { LightningApiService } from '../lightning-api.service';
|
||||
})
|
||||
export class ChannelComponent implements OnInit {
|
||||
channel$: Observable<any>;
|
||||
channelGeo$: Observable<number[]>;
|
||||
transactions$: Observable<any>;
|
||||
error: any = null;
|
||||
channelGeo: number[] = [];
|
||||
|
||||
constructor(
|
||||
private lightningApiService: LightningApiService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private seoService: SeoService,
|
||||
private electrsApiService: ElectrsApiService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
@ -30,28 +34,41 @@ export class ChannelComponent implements OnInit {
|
||||
this.seoService.setTitle(`Channel: ${params.get('short_id')}`);
|
||||
return this.lightningApiService.getChannel$(params.get('short_id'))
|
||||
.pipe(
|
||||
tap((data) => {
|
||||
if (!data.node_left.longitude || !data.node_left.latitude ||
|
||||
!data.node_right.longitude || !data.node_right.latitude) {
|
||||
this.channelGeo = [];
|
||||
} else {
|
||||
this.channelGeo = [
|
||||
data.node_left.public_key,
|
||||
data.node_left.alias,
|
||||
data.node_left.longitude, data.node_left.latitude,
|
||||
data.node_right.public_key,
|
||||
data.node_right.alias,
|
||||
data.node_right.longitude, data.node_right.latitude,
|
||||
];
|
||||
}
|
||||
}),
|
||||
catchError((err) => {
|
||||
this.error = err;
|
||||
return of(null);
|
||||
})
|
||||
);
|
||||
})
|
||||
}),
|
||||
shareReplay(),
|
||||
);
|
||||
|
||||
this.channelGeo$ = this.channel$.pipe(
|
||||
map((data) => {
|
||||
if (!data.node_left.longitude || !data.node_left.latitude ||
|
||||
!data.node_right.longitude || !data.node_right.latitude) {
|
||||
return [];
|
||||
} else {
|
||||
return [
|
||||
data.node_left.public_key,
|
||||
data.node_left.alias,
|
||||
data.node_left.longitude, data.node_left.latitude,
|
||||
data.node_right.public_key,
|
||||
data.node_right.alias,
|
||||
data.node_right.longitude, data.node_right.latitude,
|
||||
];
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
this.transactions$ = this.channel$.pipe(
|
||||
switchMap((data) => {
|
||||
return zip([
|
||||
data.transaction_id ? this.electrsApiService.getTransaction$(data.transaction_id) : of(null),
|
||||
data.closing_transaction_id ? this.electrsApiService.getTransaction$(data.closing_transaction_id) : of(null),
|
||||
]);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user