Display opening and closing transactions on channel page

fixes #2340

frontend/src/app/lightning/channel/channel-box/channel-box.component.scss

@@ -16,3 +16,9 @@
   color: #ffffff66;
   font-size: 12px;
 }
+
+@media (max-width: 768px) {
+  .box {
+    margin-bottom: 20px;
+  }
+}

frontend/src/app/lightning/channel/channel.component.html

@@ -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>&nbsp;&nbsp;<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>
 

frontend/src/app/lightning/channel/channel.component.scss

@@ -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;
+  }
+}

frontend/src/app/lightning/channel/channel.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { forkJoin, Observable, of, share, zip } from 'rxjs';
-import { catchError, switchMap, tap } from 'rxjs/operators';
+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),
+        ]);
+      }),
+    );
   }
 
 }