mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Handle the 'B' prefix in the search bar autocomplete on /bisq

Browse Source 
refs #510
This commit is contained in:
softsimon 2021-05-13 03:01:47 +04:00
parent bbd21c9401
commit c1a79e3a33
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/search-form/search-form.component.html
View File

@ -1,7 +1,7 @@
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="d-flex">
<div class="search-box-container mr-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearch" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="TXID, block height, hash or address">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="TXID, block height, hash or address">
</div>
<div>
<button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary"><fa-icon [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon></button>

51
frontend/src/app/components/search-form/search-form.component.ts
View File

@ -4,7 +4,7 @@ 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, catchError } from 'rxjs/operators';
import { debounceTime, distinctUntilChanged, switchMap, filter, catchError, map } from 'rxjs/operators';
import { ElectrsApiService } from 'src/app/services/electrs-api.service';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
@ -18,6 +18,7 @@ export class SearchFormComponent implements OnInit {
network = '';
assets: object = {};
isSearching = false;
typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
searchForm: FormGroup;
@Output() searchTriggered = new EventEmitter();
@ -31,21 +32,6 @@ export class SearchFormComponent implements OnInit {
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)
.pipe(catchError(() => of([])));
})
);
}
constructor(
private formBuilder: FormBuilder,
private router: Router,
@ -55,11 +41,13 @@ export class SearchFormComponent implements OnInit {
) { }
ngOnInit() {
this.typeaheadSearchFn = this.typeaheadSearch;
this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.searchForm = this.formBuilder.group({
searchText: ['', Validators.required],
});
if (this.network === 'liquid') {
this.assetsService.getAssetsMinimalJson$
.subscribe((assets) => {
@ -68,6 +56,37 @@ export class SearchFormComponent implements OnInit {
}
}
typeaheadSearch = (text$: Observable<string>) => {
const debouncedText$ = text$.pipe(
map((text) => {
if (this.network === 'bisq' && text.match(/^(b)[^c]/i)) {
return text.substr(1);
}
return text;
}),
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).pipe(catchError(() => of([])));
}),
map((result: string[]) => {
if (this.network === 'bisq') {
return result.map((address: string) => 'B' + address);
}
return result;
})
);
}
itemSelected() {
setTimeout(() => this.search());
}