[lightning] claim your node button

frontend/src/app/lightning/lightning.module.ts

@@ -34,6 +34,7 @@ import { OldestNodes } from '../lightning/nodes-ranking/oldest-nodes/oldest-node
 import { NodesRankingsDashboard } from '../lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component';
 import { NodeChannels } from '../lightning/nodes-channels/node-channels.component';
 import { GroupComponent } from './group/group.component';
+import { NodeOwnerComponent } from './node-owner/node-owner.component';
 
 @NgModule({
   declarations: [
@@ -66,6 +67,7 @@ import { GroupComponent } from './group/group.component';
     NodesRankingsDashboard,
     NodeChannels,
     GroupComponent,
+    NodeOwnerComponent,
   ],
   imports: [
     CommonModule,
@@ -103,6 +105,7 @@ import { GroupComponent } from './group/group.component';
     OldestNodes,
     NodesRankingsDashboard,
     NodeChannels,
+    NodeOwnerComponent,
   ],
   providers: [
     LightningApiService,

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

@@ -0,0 +1,17 @@
+<div *ngIf="stateService.env.OFFICIAL_MEMPOOL_SPACE === true">
+
+  <div *ngIf="{ value: (nodeOwner$ | async) } as nodeOwner">
+
+    <div *ngIf="nodeOwner.value && nodeOwner.value.sns_id">
+      <a target="_blank" [href]="'https://twitter.com/' + nodeOwner.value.username">
+        <img class="profile-photo" [src]="'data:' + nodeOwner.value.image_mime + ';base64,' + nodeOwner.value.image">
+      </a>
+    </div>
+
+    <div *ngIf="nodeOwner.value === false">
+      <a [href]="'/login/lnnode?type=signup&pubkey=' + publicKey + '&alias=' + alias" class="btn btn-primary btn-sm">Claim</a>
+    <div>
+
+  </div>
+
+</div>

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

@@ -0,0 +1,4 @@
+.profile-photo {
+  width: 31px;
+  height: 31px;
+}

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

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-node-owner',
+  templateUrl: './node-owner.component.html',
+  styleUrls: ['./node-owner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodeOwnerComponent{
+  @Input() publicKey: string = '';
+  @Input() alias: string = '';
+  @Input() nodeOwner$: Observable<any>;
+
+  constructor(
+    public stateService: StateService
+  ) {
+  }
+}

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 {

frontend/src/app/services/api.service.ts

@@ -8,6 +8,8 @@ import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { Outspend, Transaction } from '../interfaces/electrs.interface';
 import { Conversion } from './price.service';
 
+const SERVICES_API_PREFIX = `/api/v1/services`;
+
 @Injectable({
   providedIn: 'root'
 })
@@ -315,4 +317,13 @@ export class ApiService {
         (timestamp ? `?timestamp=${timestamp}` : '')
     );
   }
+
+  /**
+   * Services
+   */
+  getNodeOwner$(publicKey: string) {
+    let params = new HttpParams()
+      .set('node_public_key', publicKey);
+    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' });
+  }
 }