Merge pull request #216 from rsksmart/revert-215-new-search-rns-integ…

…ration

Revert "Rns Integration & Search bar improvements"

package.json

@@ -27,7 +27,6 @@
     "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",
@@ -37,8 +36,7 @@
     "vue-hotjar": "^1.2.0",
     "vue-router": "^3.4.3",
     "vuex": "^3.5.1",
-    "vuex-router-sync": "^5.0.0",
-    "@rsksmart/rns-resolver.js": "^1.1.0"
+    "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.12",

src/components/DataPage.vue

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

src/components/Search/CtrlSearch.vue

@@ -1,60 +1,46 @@
 <template>
-  <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="">
+  <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
       </button>
-      <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>
+      <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>
         </div>
-      </div>
+      </template>
     </div>
-    <div class="search-background" v-if="onFocusValue && !isSearchPage" @click="onFocus(false)"></div>
   </div>
 </template>
 <script>
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions } from 'vuex'
 import { clamp } from '../../lib/js/utils'
 import Spinner from '../Loaders/Spinner.vue'
 import { ROUTES } from '../../config/types'
@@ -71,39 +57,15 @@ export default {
       resultEmitted: null,
       focused: undefined,
       expandSearch: false,
-      onFocusValue: false,
-      debounceTime: 800,
-      typing: false
+      onFocusValue: true
     }
   },
   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',
-      '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)
-    },
+    ...mapActions(['searchExpand', 'clearSearchedResults']),
     setExpand () {
       if (window.innerWidth > 600) return
       this.expandSearch = !this.expandSearch
@@ -118,26 +80,26 @@ export default {
       this.selectResult(0)
       const value = event.target.value
       this.value = value
-      this.emit(event, type, value)
-      this.emit(event, 'change', value)
+      const typeEvent = this.value.length > 10 ? 'change' : type
+      this.emit(event, typeEvent, 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) {
-      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, () => { })
-      }
+      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)
     },
     onChange (event) {
       const value = this.value
@@ -147,7 +109,6 @@ 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)
@@ -177,44 +138,19 @@ 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,8 +12,10 @@
   </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: {
@@ -22,7 +24,7 @@ export default {
   data () {
     return {
       value: undefined,
-      msg: 'Search by address, block, tx, token name, rns domain',
+      msg: 'Search by address, block, tx, token name',
       msgTimeout: null,
       requestingTimeout: null
     }
@@ -75,16 +77,26 @@ export default {
       this.clearSearchedResults()
     },
     goTo ({ type, value }) {
-      this.getSearchLink()({ 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, () => { })
     },
+
     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()
@@ -96,7 +108,9 @@ export default {
       await this.prepareSearch({ value })
       value = this.searched
       const { types } = this
-      if (types.length === 1) {
+      if (!types || !types.length) {
+        return this.goToSearchPage(value)
+      } else if (types.length === 1) {
         const type = types[0]
         return this.goTo({ type, value })
       } else {
@@ -106,6 +120,8 @@ 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,10 +76,7 @@ export default {
       if (this.lastTransactions?.length > 0) {
         this.updateTxs(this.lastTransactions)
       }
-      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)
-      }
+      const value = this.lastTransactions?.length > 0 ? this.lastTransactions : this.lastTxsStore
       return value
     }
   },

src/components/home/Block/LastBlock.vue

@@ -57,6 +57,17 @@ 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,12 +71,8 @@ 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,9 +28,6 @@ export const Addresses = () => {
         field: 'blockNumber',
         type: 'block',
         title: 'Updated at block'
-      },
-      rns: {
-        hideIfEmpty: true
       }
     }
   }