Merge pull request #215 from rsksmart/new-search-rns-integration

Rns Integration & Search bar improvements

package.json

@@ -27,6 +27,7 @@
     "env-cmd": "^10.1.0",
     "highlight.js": "^9.18.3",
     "highlightjs-solidity": "git+https://github.com/highlightjs/highlightjs-solidity.git",
+    "keccak": "^3.0.4",
     "moment": "^2.27.0",
     "socket.io-client": "^2.3.0",
     "streamsaver": "^2.0.5",
@@ -36,7 +37,8 @@
     "vue-hotjar": "^1.2.0",
     "vue-router": "^3.4.3",
     "vuex": "^3.5.1",
-    "vuex-router-sync": "^5.0.0"
+    "vuex-router-sync": "^5.0.0",
+    "@rsksmart/rns-resolver.js": "^1.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.12",

src/components/DataPage.vue

@@ -140,7 +140,7 @@ export default {
   data () {
     return {
       storedTitle: '',
-      storedParamAddress: null,
+      storedRouteName: null,
       PAGE_COLORS
     }
   },
@@ -300,11 +300,11 @@ export default {
       const { module, action, params } = this
       const key = this.reqKey
       if (!module || !action) return
-      const paramsAddress = this.$route.params?.address
+      const routeName = this.$route.name
       // If the parameters are the same when the router changes, we do not request the address information.
-      if (this.storedParamAddress !== paramsAddress) {
+      if (this.storedRouteName !== routeName) {
         // use Date for a random info
-        this.storedParamAddress = paramsAddress || new Date()
+        this.storedRouteName = routeName || new Date()
         return this.fetchRouteData({ action, params, module, key })
       }
     },

src/components/Search/CtrlSearch.vue

@@ -1,46 +1,60 @@
 <template>
-  <div class="search-content">
-    <button v-if="!expandSearch" @click="setExpand" class="btn-search">
-      <img src="@/assets/svg/search.svg" alt="">
-    </button>
-    <button v-else class="btn-close" @click="setExpand">X</button>
-    <div class="content-input">
-      <input
-        class="search-input bg-primary"
-        type="text"
-        :value="value"
-        @input.prevent="input"
-        @keyup.enter="changeInput"
-        @keyup.stop="onKey"
-        :placeholder="onFocusValue ? placeholder : null"
-        :class="cssClass"
-        @focus="onFocusValue = false"
-        @blur="onFocusValue = true"
-      >
-      <button class="btn-clear" @click="clear" v-if="value">
-        x
+  <div class="search-container">
+    <div class="search-content" :class="`${onFocusValue ? 'search-content-focus' : ''}`">
+      <button v-if="!expandSearch" @click="setExpand" class="btn-search">
+        <img src="@/assets/svg/search.svg" alt="">
       </button>
-      <Spinner v-if="isLoading" :width="20" :height="20" :border="2" />
-    </div>
-    <div class="search-results bg-secondary" v-if="results.length" ref="results">
-      <template v-for="(result, i) in results">
-        <div v-if="result.link && result.value"
-          :class="{ selected: selectedResult === i+1 }"
-          :key="`${result.value}${i}`"
-          :ref="`result-${i}`">
-          <a
-            :href="result.link"
-            @touchend.passive="gotoResult($event, i)"
-            @click="gotoResult($event, i)">
-            {{ result.name || result.value }}
-          </a>
+      <button v-else class="btn-close" @click="setExpand">X</button>
+      <div class="content-input">
+        <input
+          class="search-input"
+          type="text"
+          v-model="value"
+          ref="inputRef"
+          @input.prevent="handleInput"
+          @keyup.enter="debouncedChangeInput"
+          @keyup.stop="debouncedOnKey"
+          :placeholder="!onFocusValue ? placeholder : null"
+          :class="cssClass"
+          @focus="onFocus(true)"
+          @blur="isSearchPage ? onFocus(false) : null"
+        >
+        <button class="btn-clear" @click="btnClear" v-if="value">
+          x
+        </button>
+        <Spinner v-if="isLoading || typing" :width="20" :height="20" :border="2" />
+      </div>
+      <div class="search-results bg-secondary" v-if="value && onFocusValue && !isSearchPage && !typing && !isLoading">
+        <template v-if="(currentType && searchedTypes.length > 0)">
+          <div class="title-address capitalize">{{ currentType }}</div>
+          <router-link :to="`${linkToSearch}`" class="search-address">{{ value }}</router-link>
+        </template>
+        <div v-else-if="results.length" ref="results">
+          <div class="title-address capitalize">Result:</div>
+          <template v-for="(result, i) in results">
+            <div v-if="result.link && result.value"
+              :class="{ selected: selectedResult === i+1 }"
+              :key="`${result.value}${i}`"
+              :ref="`result-${i}`">
+              <a
+                :href="result.link"
+                @touchend.passive="gotoResult($event, i)"
+                @click="gotoResult($event, i)">
+                {{ result.name || result.value }}
+              </a>
+            </div>
+          </template>
+        </div>
+        <div class="no-results bg-secondary" v-else-if="onFocusValue && value && !typing && !isLoading && !isSearchPage">
+          <div class="title-address">No results found.</div>
         </div>
-      </template>
+      </div>
     </div>
+    <div class="search-background" v-if="onFocusValue && !isSearchPage" @click="onFocus(false)"></div>
   </div>
 </template>
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { clamp } from '../../lib/js/utils'
 import Spinner from '../Loaders/Spinner.vue'
 import { ROUTES } from '../../config/types'
@@ -57,15 +71,39 @@ export default {
       resultEmitted: null,
       focused: undefined,
       expandSearch: false,
-      onFocusValue: true
+      onFocusValue: false,
+      debounceTime: 800,
+      typing: false
     }
   },
   created () {
     const { searchValue } = this
     if (searchValue) this.value = searchValue
+    this.debouncedOnKey = this.debounce(this.onKey, this.debounceTime)
+    this.debouncedInput = this.debounce(this.input, this.debounceTime)
+    this.debouncedChangeInput = this.debounce(this.changeInput, this.debounceTime)
   },
   methods: {
-    ...mapActions(['searchExpand', 'clearSearchedResults']),
+    ...mapActions([
+      'searchExpand',
+      'clearSearchedResults',
+      'prepareSearch',
+      'searchTypes',
+      'fetchSearch'
+    ]),
+    btnClear () {
+      this.clear()
+      this.$refs.inputRef.focus()
+    },
+    handleInput (event) {
+      this.debouncedInput(event)
+      this.typing = true
+    },
+    onFocus (value) {
+      setTimeout(() => {
+        this.onFocusValue = value
+      }, 100)
+    },
     setExpand () {
       if (window.innerWidth > 600) return
       this.expandSearch = !this.expandSearch
@@ -80,26 +118,26 @@ export default {
       this.selectResult(0)
       const value = event.target.value
       this.value = value
-      const typeEvent = this.value.length > 10 ? 'change' : type
-      this.emit(event, typeEvent, value)
+      this.emit(event, type, value)
+      this.emit(event, 'change', value)
     },
     emit (event, type, value) {
       type = type || event.type
       this.$emit(type, { value, event })
+      let timer = 0
+      if (value.includes('.rsk')) timer = 1500
+      setTimeout(() => {
+        this.typing = false
+      }, timer)
     },
     changeInput (event) {
-      const { fullPath } = this.$route
-      const vm = this
-      setTimeout(() => {
-        if (!vm.selectedResult) {
-          if (fullPath === vm.$route.fullPath) {
-            vm.onChange(event)
-          } else {
-            this.value = ''
-            vm.emitResult(event, null)
-          }
-        }
-      }, 200)
+      this.onFocus(false)
+      if (this.currentType && this.searchedTypes.length) {
+        this.$router.push(this.linkToSearch, () => { })
+      } else {
+        const link = `/${ROUTES.search}/${this.value}`
+        this.$router.push(link, () => { })
+      }
     },
     onChange (event) {
       const value = this.value
@@ -109,6 +147,7 @@ export default {
       this.selectedResult = result
     },
     gotoResult (event, key) {
+      this.onFocus(false)
       const result = this.results[key]
       const { link } = result
       if (link) this.$router.push(link)
@@ -138,19 +177,44 @@ export default {
     },
     onShowMore (event) {
       this.emit(event, 'showMore', this.value)
+    },
+    debounce (func, wait, immediate) {
+      let timeout
+      return function () {
+        const context = this
+        const args = arguments
+        const later = function () {
+          timeout = null
+          if (!immediate) func.apply(context, args)
+        }
+        const callNow = immediate && !timeout
+        clearTimeout(timeout)
+        timeout = setTimeout(later, wait)
+        if (callNow) func.apply(context, args)
+      }
     }
   },
   computed: {
+    ...mapGetters({
+      searchedTypes: 'searchedTypes',
+      currentType: 'searchedType',
+      linkToSearch: 'linkToSearch'
+    }),
     totalResults () {
       const { results } = this
       return (results) ? results.length : 0
     },
     isLoading () {
       return !!this.loading
+    },
+    isSearchPage () {
+      return this.$route.name.toLowerCase() === ROUTES.search.toLowerCase()
     }
   },
   watch: {
     $route () {
+      this.$refs.inputRef.blur()
+      this.onFocus(false)
       if (this.$route.name.toLowerCase() !== ROUTES.search.toLowerCase()) {
         this.clearSearchedResults()
         this.value = ''

src/components/Search/SearchBox.vue

@@ -12,10 +12,8 @@
   </div>
 </template>
 <script>
-import { ROUTES as r } from '../../config/types'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import CtrlSearch from './CtrlSearch.vue'
-// const RESULTS_LENGTH = 10
 export default {
   name: 'search-box',
   components: {
@@ -24,7 +22,7 @@ export default {
   data () {
     return {
       value: undefined,
-      msg: 'Search by address, block, tx, token name',
+      msg: 'Search by address, block, tx, token name, rns domain',
       msgTimeout: null,
       requestingTimeout: null
     }
@@ -77,26 +75,16 @@ export default {
       this.clearSearchedResults()
     },
     goTo ({ type, value }) {
-      const link = this.getSearchLink()({ type, value })
-      if (!link) return
-      this.clearRequests()
-      this.$router.push(link, () => { })
-    },
-    goToSearchPage (value) {
-      const link = `/${r.search}/${value}`
-      this.$router.push(link, () => { })
+      this.getSearchLink()({ type, value })
     },
-
     setValue (value) {
       this.value = value
       if (this.isSearchPage) {
         history.pushState({}, document.title, value)
       }
     },
-
     onResult ({ event, value }) {
       this.setValue(value)
-      // if (value) this.clearRequests()
     },
     onInput ({ event, value }) {
       this.clearRequests()
@@ -108,9 +96,7 @@ export default {
       await this.prepareSearch({ value })
       value = this.searched
       const { types } = this
-      if (!types || !types.length) {
-        return this.goToSearchPage(value)
-      } else if (types.length === 1) {
+      if (types.length === 1) {
         const type = types[0]
         return this.goTo({ type, value })
       } else {
@@ -120,8 +106,6 @@ export default {
         // redirect when there is only one result
         if (results && results.length === 1) {
           return this.goTo(results[0])
-        } else {
-          this.goToSearchPage(value)
         }
       }
     },

src/components/Transactions/LastTransactions.vue

@@ -76,7 +76,10 @@ export default {
       if (this.lastTransactions?.length > 0) {
         this.updateTxs(this.lastTransactions)
       }
-      const value = this.lastTransactions?.length > 0 ? this.lastTransactions : this.lastTxsStore
+      let value = this.lastTransactions?.length > 0 ? this.lastTransactions : this.lastTxsStore
+      if (value[0]?.blockNumber > this.blocks[0]?.number) {
+        value = value.filter((v) => v.blockNumber !== value[0]?.blockNumber)
+      }
       return value
     }
   },

src/components/home/Block/LastBlock.vue

@@ -57,17 +57,6 @@ export default {
       const field = this.fields.number
       const value = this.block.number
       return this.filterFieldValue()({ field, value })
-    },
-    blockColor () {
-      return this.getBlockColor(this.block.number)
-    },
-    bStyle () {
-      const color = this.blockColor
-      return { color, fill: color }
-    },
-    blockBoxStyle () {
-      const color = this.blockColor
-      return { 'border-color': color }
     }
   }
 }

src/components/home/Block/LastBlocks.vue

@@ -71,8 +71,12 @@ export default {
     ]),
     handleAutoUpdate (event) {
       const value = event.target.checked
+      if (value) this.updateBlocks()
       this.setAutoUpdate(value)
     }
+  },
+  created () {
+    this.updateBlocks()
   }
 }
 </script>

src/config/entities/address.js

@@ -28,6 +28,9 @@ export const Addresses = () => {
         field: 'blockNumber',
         type: 'block',
         title: 'Updated at block'
+      },
+      rns: {
+        hideIfEmpty: true
       }
     }
   }