Merge pull request #1293 from mempool/simon/shorten-address-prefix-result

Shorten address search with middle ellipsis

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]

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>

frontend/src/app/components/search-form/search-form.component.scss

@@ -1,8 +1,19 @@
-:host ::ng-deep .dropdown-item {
+:host ::ng-deep {
+  .dropdown-item {
     white-space: nowrap;
-  overflow: hidden;
+    width: calc(100% - 34px);
-  width: 375px;
+  }
-  text-overflow: ellipsis;
+  .dropdown-menu {
+    width: calc(100% - 34px);
+  }
+  @media (min-width: 768px) {
+    .dropdown-item {
+      width: 410px;
+    }
+    .dropdown-menu {
+      width: 410px;
+    }
+  }
 }
 
 form {

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',
@@ -22,6 +23,7 @@ export class SearchFormComponent implements OnInit {
   typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
 
   searchForm: FormGroup;
+  isMobile = (window.innerWidth <= 767.98);
   @Output() searchTriggered = new EventEmitter();
 
   regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/;
@@ -33,6 +35,8 @@ export class SearchFormComponent implements OnInit {
   focus$ = new Subject<string>();
   click$ = new Subject<string>();
 
+  formatterFn = (address: string) => this.shortenStringPipe.transform(address, this.isMobile ? 33 : 40);
+
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -40,6 +44,7 @@ export class SearchFormComponent implements OnInit {
     private stateService: StateService,
     private electrsApiService: ElectrsApiService,
     private relativeUrlPipe: RelativeUrlPipe,
+    private shortenStringPipe: ShortenStringPipe,
   ) { }
 
   ngOnInit() {