From 9407af41f9d991453086af3f134069254fbe1ece Mon Sep 17 00:00:00 2001
From: Nicolas Vargas <nicolas.vargas@iovlabs.org>
Date: Mon, 11 Nov 2024 13:13:08 -0300
Subject: [PATCH] feat: display symbol on search results. Add highlighting.
 Trim searched value

---
 src/components/Search/CtrlSearch.vue | 27 ++++++++++++++++++++++-----
 src/store/modules/search/payloads.js |  8 ++++++--
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Search/CtrlSearch.vue b/src/components/Search/CtrlSearch.vue
index 59c0bc35..eac718e6 100644
--- a/src/components/Search/CtrlSearch.vue
+++ b/src/components/Search/CtrlSearch.vue
@@ -39,8 +39,9 @@
               <a
                 :href="result.link"
                 @touchend.passive="gotoResult($event, i)"
-                @click="gotoResult($event, i)">
-                {{ result.name || result.value }}
+                @click="gotoResult($event, i)"
+                v-html="highlightedText(result.name || result.value)"
+              >
               </a>
             </div>
           </template>
@@ -91,8 +92,15 @@ export default {
       'searchTypes',
       'fetchSearch'
     ]),
+    highlightedText (text) {
+      const formattedValue = this.formatValue(this.value)
+      const regex = new RegExp(`(${formattedValue})`, 'gi')
+      const highlightedText = text.replace(regex, (match) => `<span class="highlight">${match}</span>`)
+      console.log({ text, regex, highlightedText, results: this.results })
+      return highlightedText
+    },
     formatValue (value) {
-      return value.toString().replaceAll(',', '')
+      return value.toString().replaceAll(',', '').trim()
     },
     btnClear () {
       this.clear()
@@ -121,8 +129,8 @@ export default {
       this.selectResult(0)
       const value = event.target.value
       this.value = value
-      this.emit(event, type, value)
-      this.emit(event, 'change', value)
+      this.emit(event, type, value.trim())
+      this.emit(event, 'change', value.trim())
     },
     emit (event, type, value) {
       type = type || event.type
@@ -230,3 +238,12 @@ export default {
   }
 }
 </script>
+
+<style>
+.highlight {
+  background-color: #ffef60;
+  color: #000;
+  border-radius: 4px;
+  font-weight: bold;
+}
+</style>
diff --git a/src/store/modules/search/payloads.js b/src/store/modules/search/payloads.js
index 46d4daf0..ef3f0b36 100644
--- a/src/store/modules/search/payloads.js
+++ b/src/store/modules/search/payloads.js
@@ -13,8 +13,12 @@ export const createPayloads = (payloads) => {
 }
 
 const getAddressName = data => {
-  const { address, name } = data
-  return `${name} ${address}`
+  const { address, symbol, name } = data
+  const validSymbol = typeof symbol === 'string' && symbol !== ''
+
+  if (validSymbol) return `(${symbol}) ${name}: ${address}`
+
+  return `${name}: ${address}`
 }
 
 const getAddressTime = data => {