From e5b2440b450484be4bdca5929a59eaa2be013617 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 27 Feb 2022 18:53:16 +0300
Subject: [PATCH] Shorten address search with middle ellipsis

---
 frontend/src/app/app.module.ts                      |  2 ++
 .../search-form/search-form.component.html          |  2 +-
 .../search-form/search-form.component.scss          | 13 ++++++++-----
 .../components/search-form/search-form.component.ts |  4 ++++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 956990f94..dfb64c4bd 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -74,6 +74,7 @@ import { HashrateChartComponent } from './components/hashrate-chart/hashrate-cha
 import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
 import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
+import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 
 @NgModule({
   declarations: [
@@ -154,6 +155,7 @@ import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
     SeoService,
     StorageService,
     LanguageService,
+    ShortenStringPipe,
     { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]
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 f3c70d40b..422dfaa62 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()" novalidate>
   <div class="d-flex">
     <div class="search-box-container mr-2">
-      <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">
+      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (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>
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index 5a72339a3..a2221757f 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -1,8 +1,11 @@
-:host ::ng-deep .dropdown-item {
-  white-space: nowrap;
-  overflow: hidden;
-  width: 375px;
-  text-overflow: ellipsis;
+:host ::ng-deep {
+  .dropdown-item {
+    white-space: nowrap;
+    width: 410px;
+  }
+  .dropdown-menu {
+    width: 410px;
+  }
 }
 
 form {
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 24e8a5b23..be0bead13 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -8,6 +8,7 @@ import { debounceTime, distinctUntilChanged, switchMap, filter, catchError, map
 import { ElectrsApiService } from 'src/app/services/electrs-api.service';
 import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { ShortenStringPipe } from 'src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe';
 
 @Component({
   selector: 'app-search-form',
@@ -33,6 +34,8 @@ export class SearchFormComponent implements OnInit {
   focus$ = new Subject<string>();
   click$ = new Subject<string>();
 
+  formatterFn = (address: string) => this.shortenStringPipe.transform(address, 40);
+
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -40,6 +43,7 @@ export class SearchFormComponent implements OnInit {
     private stateService: StateService,
     private electrsApiService: ElectrsApiService,
     private relativeUrlPipe: RelativeUrlPipe,
+    private shortenStringPipe: ShortenStringPipe,
   ) { }
 
   ngOnInit() {