Liquid: Display unconfidential address and fix tracking

fixes #761

frontend/src/app/components/address/address.component.html

@@ -18,6 +18,10 @@
         <div class="col-md">
           <table class="table table-borderless table-striped">
             <tbody>
+              <tr *ngIf="addressInfo && addressInfo.unconfidential">
+                <td i18n="address.unconfidential">Unconfidential</td>
+                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">{{ addressInfo.unconfidential }}</a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
+              </tr>
               <ng-template [ngIf]="!address.electrum">
                 <tr>
                   <td i18n="address.total-received">Total received</td>

frontend/src/app/components/address/address.component.ts

@@ -9,6 +9,7 @@ import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
 import { of, merge, Subscription, Observable } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
+import { AddressInformation } from 'src/app/interfaces/node-api.interface';
 
 @Component({
   selector: 'app-address',
@@ -27,6 +28,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   error: any;
   mainSubscription: Subscription;
   addressLoadingStatus$: Observable<number>;
+  addressInfo: null | AddressInformation = null;
 
   totalConfirmedTxCount = 0;
   loadedConfirmedTxCount = 0;
@@ -67,6 +69,7 @@ export class AddressComponent implements OnInit, OnDestroy {
           this.address = null;
           this.isLoadingTransactions = true;
           this.transactions = null;
+          this.addressInfo = null;
           document.body.scrollTo(0, 0);
           this.addressString = params.get('id') || '';
           this.seoService.setTitle($localize`:@@address.component.browser-title:Address: ${this.addressString}:INTERPOLATION:`);
@@ -92,10 +95,20 @@ export class AddressComponent implements OnInit, OnDestroy {
       )
       .pipe(
         filter((address) => !!address),
+        tap((address: Address) => {
+          if (this.stateService.network === 'liquid' && /^([m-zA-HJ-NP-Z1-9]{26,35}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[a-km-zA-HJ-NP-Z1-9]{80})$/.test(address.address)) {
+            this.apiService.validateAddress$(address.address)
+              .subscribe((addressInfo) => {
+                this.addressInfo = addressInfo;
+                this.websocketService.startTrackAddress(addressInfo.unconfidential);
+              });
+          } else {
+            this.websocketService.startTrackAddress(address.address);
+          }
+        }),
         switchMap((address) => {
           this.address = address;
           this.updateChainStats();
-          this.websocketService.startTrackAddress(address.address);
           this.isLoadingAddress = false;
           this.isLoadingTransactions = true;
           return this.electrsApiService.getAddressTransactions$(address.address);

frontend/src/app/interfaces/node-api.interface.ts

@@ -34,3 +34,16 @@ export interface DifficultyAdjustment {
   remainingBlocks: number;
   remainingTime: number;
 }
+
+export interface AddressInformation {
+  isvalid: boolean;                //  (boolean) If the address is valid or not. If not, this is the only property returned.
+  isvalid_parent?: boolean;        //  (boolean) Elements only
+  address: string;                 //  (string) The bitcoin address validated
+  scriptPubKey: string;            //  (string) The hex-encoded scriptPubKey generated by the address
+  isscript: boolean;               //  (boolean) If the key is a script
+  iswitness: boolean;              //  (boolean) If the address is a witness
+  witness_version?: boolean;       //  (numeric, optional) The version number of the witness program
+  witness_program: string;         //  (string, optional) The hex value of the witness program
+  confidential_key?: string;       //  (string) Elements only
+  unconfidential?: string;         //  (string) Elements only
+}

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment } from '../interfaces/node-api.interface';
+import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation } from '../interfaces/node-api.interface';
 import { Observable } from 'rxjs';
 import { StateService } from './state.service';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
@@ -96,4 +96,8 @@ export class ApiService {
   getDifficultyAdjustment$(): Observable<DifficultyAdjustment> {
     return this.httpClient.get<DifficultyAdjustment>(this.apiBaseUrl + this.apiBasePath + '/api/v1/difficulty-adjustment');
   }
+
+  validateAddress$(address: string): Observable<AddressInformation> {
+    return this.httpClient.get<AddressInformation>(this.apiBaseUrl + this.apiBasePath + '/api/v1/validate-address/' + address);
+  }
 }