Fixed issue on search

src/@core/layouts/components/app-navbar/components/SearchBar.vue

@@ -27,14 +27,18 @@
       <b-form-input
         v-if="showSearchBar"
         v-model="searchQuery"
-        placeholder="Search Height/Transaction/Address"
+        placeholder="Search Height/Transaction/Account Address"
         autofocus
+        :state="false"
         autocomplete="off"
         @keyup.enter="doQuery"
       />
+      <b-form-text class="text-danger pl-3">
+        {{ error }}
+      </b-form-text>
       <div
         class="search-input-close"
-        @click="showSearchBar = false;"
+        @click="reset()"
       >
         <feather-icon icon="XIcon" />
       </div>
@@ -43,7 +47,7 @@
 </template>
 
 <script>
-import { BFormInput } from 'bootstrap-vue'
+import { BFormInput, BFormText } from 'bootstrap-vue'
 import { ref } from '@vue/composition-api'
 import { title } from '@core/utils/filter'
 import store from '@/store'
@@ -51,6 +55,7 @@ import store from '@/store'
 export default {
   components: {
     BFormInput,
+    BFormText,
   },
   setup() {
     const showSearchBar = ref(false)
@@ -68,13 +73,19 @@ export default {
   data() {
     return {
       searchQuery: null,
+      error: null,
     }
   },
   methods: {
+    reset() {
+      this.showSearchBar = false
+      this.searchQuery = null
+      this.error = null
+    },
     doQuery() {
       const height = /^\d+$/
       const txhash = /^[A-Z\d]{64}$/
-      const addr = /^[a-z]{2,6}1[a-z\d]{38}$/
+      const addr = /^[a-z]+1[a-z\d]{38}$/
       const key = this.searchQuery
 
       const c = store.state.chains.selected
@@ -85,7 +96,8 @@ export default {
           this.$router.push({ name: 'transaction', params: { chain: c.chain_name, hash: key } })
         } else if (addr.test(key)) {
           this.$router.push({ name: 'chain-account', params: { chain: c.chain_name, address: key } })
-          // console.log('address', key)
+        } else {
+          this.error = 'The input not recognized'
         }
       }
       // this.$router.push('/')

src/views/WalletAccountDetail.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div v-if="!error">
       <b-card
         bg-variant="secondary"
         style="color: #fff"
@@ -106,7 +107,10 @@
                   <span class="ml-25">{{ token.percent }}%</span>
                 </div>
                 <div class="d-flex flex-column">
-                <span class="text-right">{{ formatToken(token) }}</span>
+                  <span
+                    v-b-tooltip.hover.top="token.denom"
+                    class="text-right"
+                  >{{ formatToken(token) }}</span>
                   <small class="text-right">{{ currency }}{{ formatNumber(token.currency) }}</small>
                 </div>
               </div>
@@ -385,6 +389,27 @@
       />
       <div id="txevent" />
     </div>
+    <div v-else>
+      <div class="misc-inner p-2 p-sm-3">
+        <div class="w-100 text-center">
+          <h2 class="mb-1">
+            Account not found  🕵🏻‍♀️
+          </h2>
+          <p class="mb-2">
+            Oops! 😖 {{ error }}.
+          </p>
+
+          <b-button
+            variant="primary"
+            class="mb-2 btn-sm-block"
+            :to="{path:'../'}"
+          >
+            Back to home
+          </b-button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -455,6 +480,7 @@ export default {
       transactions: [],
       stakingParameters: {},
       operationModalType: '',
+      error: null,
     }
   },
   computed: {
@@ -605,7 +631,6 @@ export default {
   created() {
     this.$http.getAuthAccount(this.address).then(acc => {
       this.account = acc
-    })
       this.initial()
       this.$http.getTxsBySender(this.address).then(res => {
         this.transactions = res
@@ -613,6 +638,10 @@ export default {
       this.$http.getStakingParameters().then(res => {
         this.stakingParameters = res
       })
+    }).catch(err => {
+      console.log(err)
+      this.error = err
+    })
   },
   mounted() {
     const elem = document.getElementById('txevent')