From 81d05e23b84fa926bb889c7f27da3c7c2f4e9ad1 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 24 Jul 2020 22:37:35 +0700
Subject: [PATCH] Add typeahead address prefix.

---
 frontend/src/app/app.module.ts                |  2 ++
 .../search-form/search-form.component.html    |  2 +-
 .../search-form/search-form.component.ts      | 25 ++++++++++++++++++-
 .../src/app/services/electrs-api.service.ts   |  3 +++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 4abc1dd4f..1b88951f4 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -39,6 +39,7 @@ import { AssetsComponent } from './assets/assets.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { MinerComponent } from './components/miner/miner.component';
 import { SharedModule } from './shared/shared.module';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -76,6 +77,7 @@ import { SharedModule } from './shared/shared.module';
     HttpClientModule,
     BrowserAnimationsModule,
     InfiniteScrollModule,
+    NgbTypeaheadModule,
     SharedModule,
   ],
   providers: [
diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html
index 7a8b40804..30aa9f58a 100644
--- a/frontend/src/app/components/search-form/search-form.component.html
+++ b/frontend/src/app/components/search-form/search-form.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" class="mr-4" novalidate>
   <div class="form-row">
     <div style="width: 350px;" class="mr-2">
-      <input formControlName="searchText" type="text" class="form-control" placeholder="Transaction, block height, hash or address">
+      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearch" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" placeholder="Transaction, block height, hash or address">
     </div>
     <div>
       <button type="submit" class="btn btn-block btn-primary">Search</button>
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index 1132c2906..229ac4316 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -1,8 +1,12 @@
-import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AssetsService } from 'src/app/services/assets.service';
 import { StateService } from 'src/app/services/state.service';
+import { Observable, of, Subject, merge } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap, filter } from 'rxjs/operators';
+import { ElectrsApiService } from 'src/app/services/electrs-api.service';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-search-form',
@@ -22,11 +26,30 @@ export class SearchFormComponent implements OnInit {
   regexTransaction = /^[a-fA-F0-9]{64}$/;
   regexBlockheight = /^[0-9]+$/;
 
+  @ViewChild('instance', {static: true}) instance: NgbTypeahead;
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+
+  typeaheadSearch = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$)
+      .pipe(
+        switchMap((text) => {
+          if (!text.length) { return of([]); }
+          return this.electrsApiService.getAddressesByPrefix$(text);
+        })
+      );
+    }
+
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
     private assetsService: AssetsService,
     private stateService: StateService,
+    private electrsApiService: ElectrsApiService,
   ) { }
 
   ngOnInit() {
diff --git a/frontend/src/app/services/electrs-api.service.ts b/frontend/src/app/services/electrs-api.service.ts
index c8683a93e..921f039d0 100644
--- a/frontend/src/app/services/electrs-api.service.ts
+++ b/frontend/src/app/services/electrs-api.service.ts
@@ -81,4 +81,7 @@ export class ElectrsApiService {
     return this.httpClient.get<Transaction[]>(this.apiBaseUrl + '/asset/' + assetId + '/txs/chain/' + txid);
   }
 
+  getAddressesByPrefix$(prefix: string): Observable<string[]> {
+    return this.httpClient.get<string[]>(this.apiBaseUrl + '/address-prefix/' + prefix);
+  }
 }