From 0663cc2cfa21088de54da3cb5eedc77c6916391b Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 22 Jan 2024 11:29:41 +0100
Subject: [PATCH 1/3] Fix search bar result overflow

---
 .../src/app/components/search-form/search-form.component.scss | 4 ----
 .../search-form/search-results/search-results.component.html  | 4 ++--
 .../search-form/search-results/search-results.component.ts    | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

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 e5233f0cf..cec555a4f 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -1,15 +1,11 @@
 :host ::ng-deep {
   .dropdown-item {
     white-space: nowrap;
-    width: calc(100% - 34px);
   }
   .dropdown-menu {
     width: calc(100% - 34px);
   }
   @media (min-width: 768px) {
-    .dropdown-item {
-      width: 410px;
-    }
     .dropdown-menu {
       width: 410px;
     }
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.html b/frontend/src/app/components/search-form/search-results/search-results.component.html
index 5d64b7495..51237a1a5 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.html
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.html
@@ -26,7 +26,7 @@
   <ng-template [ngIf]="results.address">
     <div class="card-title" i18n="search.bitcoin-address">Bitcoin Address</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
-      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 20 : 30 }"></ng-container>
+      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 17 : 30 }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.blockHash">
@@ -39,7 +39,7 @@
     <div class="card-title danger" i18n="search.other-networks">Other Network Address</div>
     <ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item">
-        <ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 20 : 25 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b>
+        <ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 12 : 20 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b>
       </button>
     </ng-template>
   </ng-template>
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.ts b/frontend/src/app/components/search-form/search-results/search-results.component.ts
index ade01bf89..eb251d087 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.ts
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.ts
@@ -10,7 +10,7 @@ export class SearchResultsComponent implements OnChanges {
   @Input() results: any = {};
   @Output() selectedResult = new EventEmitter();
 
-  isMobile = (window.innerWidth <= 767.98);
+  isMobile = (window.innerWidth <= 1150);
   resultsFlattened = [];
   activeIdx = 0;
   focusFirst = true;

From 00613fe6136fdd327b0408088ab4a6f1077a8a0c Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 22 Jan 2024 11:45:07 +0100
Subject: [PATCH 2/3] Liquid: suggest asset in search bar results

---
 .../search-form/search-form.component.ts          | 15 +++++++++------
 .../search-results/search-results.component.html  | 10 ++++++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

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 2a9983a24..3bbe5bccb 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -170,6 +170,7 @@ export class SearchFormComponent implements OnInit {
               addresses: [],
               nodes: [],
               channels: [],
+              liquidAsset: [],
             };
           }
 
@@ -187,6 +188,7 @@ export class SearchFormComponent implements OnInit {
           const matchesBlockHash = this.regexBlockhash.test(searchText);
           let matchesAddress = !matchesTxId && this.regexAddress.test(searchText);
           const otherNetworks = findOtherNetworks(searchText, this.network as any || 'mainnet', this.env);
+          const liquidAsset = this.assets ? (this.assets[searchText] || []) : [];
 
           // Add B prefix to addresses in Bisq network
           if (!matchesAddress && this.network === 'bisq' && getRegex('address', 'mainnet').test(searchText)) {
@@ -211,6 +213,7 @@ export class SearchFormComponent implements OnInit {
             otherNetworks: otherNetworks,
             nodes: lightningResults.nodes,
             channels: lightningResults.channels,
+            liquidAsset: liquidAsset,
           };
         })
       );
@@ -259,16 +262,16 @@ export class SearchFormComponent implements OnInit {
       } else if (this.regexTransaction.test(searchText)) {
         const matches = this.regexTransaction.exec(searchText);
         if (this.network === 'liquid' || this.network === 'liquidtestnet') {
-          if (this.assets[matches[1]]) {
-            this.navigate('/assets/asset/', matches[1]);
+          if (this.assets[matches[0]]) {
+            this.navigate('/assets/asset/', matches[0]);
           }
-          this.electrsApiService.getAsset$(matches[1])
+          this.electrsApiService.getAsset$(matches[0])
             .subscribe(
-              () => { this.navigate('/assets/asset/', matches[1]); },
+              () => { this.navigate('/assets/asset/', matches[0]); },
               () => {
-                this.electrsApiService.getBlock$(matches[1])
+                this.electrsApiService.getBlock$(matches[0])
                   .subscribe(
-                    (block) => { this.navigate('/block/', matches[1], { state: { data: { block } } }); },
+                    (block) => { this.navigate('/block/', matches[0], { state: { data: { block } } }); },
                     () => { this.navigate('/tx/', matches[0]); });
               }
             );
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.html b/frontend/src/app/components/search-form/search-results/search-results.component.html
index 51237a1a5..879fc5427 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.html
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.html
@@ -1,4 +1,4 @@
-<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.hashQuickMatch && !results.otherNetworks.length && !results.addresses.length && !results.nodes.length && !results.channels.length">
+<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.hashQuickMatch && !results.otherNetworks.length && !results.addresses.length && !results.nodes.length && !results.channels.length && !results.liquidAsset.length">
   <ng-template [ngIf]="results.blockHeight">
     <div class="card-title" i18n="search.bitcoin-block-height">Bitcoin Block Height</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
@@ -17,7 +17,7 @@
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container>
     </button>
   </ng-template>
-  <ng-template [ngIf]="results.txId">
+  <ng-template [ngIf]="results.txId && !results.liquidAsset.length">
     <div class="card-title" i18n="search.bitcoin-transaction">Bitcoin Transaction</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
@@ -67,6 +67,12 @@
       </button>
     </ng-template>
   </ng-template>
+  <ng-template [ngIf]="results.liquidAsset.length">
+    <div class="card-title" i18n="search.liquid-asset">Liquid Asset</div>
+    <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
+      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 11 }"></ng-container>&nbsp;<b>({{ results.liquidAsset[1] }})</b>
+    </button>
+  </ng-template>
 </div>
 
 <ng-template #goTo let-x i18n="search.go-to">Go to "{{ x }}"</ng-template>

From 431f60d9c064e1277c1a6d89214a3c7e24187321 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 23 Jan 2024 18:56:32 +0700
Subject: [PATCH 3/3] Use current network name in search result

---
 .../search-results/search-results.component.html       | 10 +++++-----
 .../search-results/search-results.component.ts         |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.html b/frontend/src/app/components/search-form/search-results/search-results.component.html
index 879fc5427..f447d3837 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.html
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.html
@@ -1,6 +1,6 @@
 <div class="dropdown-menu show" *ngIf="results" [hidden]="!results.hashQuickMatch && !results.otherNetworks.length && !results.addresses.length && !results.nodes.length && !results.channels.length && !results.liquidAsset.length">
   <ng-template [ngIf]="results.blockHeight">
-    <div class="card-title" i18n="search.bitcoin-block-height">Bitcoin Block Height</div>
+    <div class="card-title" i18n="search.bitcoin-block-height">{{ networkName }} Block Height</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container>
     </button>
@@ -18,19 +18,19 @@
     </button>
   </ng-template>
   <ng-template [ngIf]="results.txId && !results.liquidAsset.length">
-    <div class="card-title" i18n="search.bitcoin-transaction">Bitcoin Transaction</div>
+    <div class="card-title" i18n="search.bitcoin-transaction">{{ networkName }} Transaction</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.address">
-    <div class="card-title" i18n="search.bitcoin-address">Bitcoin Address</div>
+    <div class="card-title" i18n="search.bitcoin-address">{{ networkName }} Address</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 17 : 30 }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.blockHash">
-    <div class="card-title" i18n="search.bitcoin-block">Bitcoin Block</div>
+    <div class="card-title" i18n="search.bitcoin-block">{{ networkName }} Block</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
     </button>
@@ -44,7 +44,7 @@
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.addresses.length">
-    <div class="card-title" i18n="search.bitcoin-addresses">Bitcoin Addresses</div>
+    <div class="card-title" i18n="search.bitcoin-addresses">{{ networkName }} Addresses</div>
     <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + i)" [class.active]="(results.hashQuickMatch + results.otherNetworks.length + i) === activeIdx" type="button" role="option" class="dropdown-item">
         <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.ts b/frontend/src/app/components/search-form/search-results/search-results.component.ts
index eb251d087..068b6859c 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.ts
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.ts
@@ -14,11 +14,16 @@ export class SearchResultsComponent implements OnChanges {
   resultsFlattened = [];
   activeIdx = 0;
   focusFirst = true;
+  networkName = '';
 
   constructor(
     public stateService: StateService,
     ) { }
 
+  ngOnInit() {
+    this.networkName = this.stateService.network.charAt(0).toUpperCase() + this.stateService.network.slice(1);
+  }
+
   ngOnChanges() {
     this.activeIdx = 0;
     if (this.results) {