[lightning] claim your node button

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

@@ -3,13 +3,17 @@
   <ng-container *ngIf="!error">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
-      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
-      <span class="tx-link">
+      <div class="d-flex justify-content-between align-items-center">
+        <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
+        <!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn"></app-node-owner> -->
+      </div>
+      <span class="tx-link justify-content-between align-items-center">
         <span class="node-id">
           <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
             <app-clipboard [text]="node.public_key"></app-clipboard>
           </app-truncate>
         </span>
+        <!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn-mobile"></app-node-owner> -->
       </span>
     </div>
   </ng-container>

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

@@ -111,3 +111,17 @@ app-fiat {
   margin: 0 0.25em;
   color: slategrey;
 }
+
+.claim-btn {
+  max-height: 32px;
+  @media (min-width: 850px) {
+    display: none;
+  }
+}
+
+.claim-btn-mobile {
+  max-height: 32px;
+  @media (max-width: 850px) {
+    display: none;
+  }
+}

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

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable } from 'rxjs';
-import { catchError, map, switchMap, tap } from 'rxjs/operators';
+import { Observable, of, EMPTY } from 'rxjs';
+import { catchError, map, switchMap, tap, share } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { ApiService } from '../../services/api.service';
 import { LightningApiService } from '../lightning-api.service';
@@ -38,6 +38,7 @@ export class NodeComponent implements OnInit {
   tlvRecords: CustomRecord[];
   avgChannelDistance$: Observable<number | null>;
   showFeatures = false;
+  nodeOwner$: Observable<any>;
   kmToMiles = kmToMiles;
 
   constructor(
@@ -45,6 +46,7 @@ export class NodeComponent implements OnInit {
     private lightningApiService: LightningApiService,
     private activatedRoute: ActivatedRoute,
     private seoService: SeoService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -147,6 +149,24 @@ export class NodeComponent implements OnInit {
         return null;
       })
     ) as Observable<number | null>;
+
+    this.nodeOwner$ = this.activatedRoute.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          return this.apiService.getNodeOwner$(params.get('public_key')).pipe(
+            switchMap((response) =>  {
+              if (response.status === 204) {
+                return of(false);
+              }
+              return of(response.body);
+            }),
+            catchError(() => {
+              return of(false);
+            })
+          )
+        }),
+        share(),
+      );
   }
 
   toggleShowDetails(): void {