From cddc6906c5bdde81243bad7c24ea6e2f41106e02 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sun, 10 Apr 2022 18:30:00 +0800
Subject: [PATCH] Fixed issue on search

---
 .../app-navbar/components/SearchBar.vue       |  22 +-
 src/views/WalletAccountDetail.vue             | 779 +++++++++---------
 2 files changed, 421 insertions(+), 380 deletions(-)

diff --git a/src/@core/layouts/components/app-navbar/components/SearchBar.vue b/src/@core/layouts/components/app-navbar/components/SearchBar.vue
index ecffb571..b9913135 100644
--- a/src/@core/layouts/components/app-navbar/components/SearchBar.vue
+++ b/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('/')
diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index 8847664e..532578b1 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -1,389 +1,414 @@
 <template>
   <div>
-    <b-card
-      bg-variant="secondary"
-      style="color: #fff"
-    >
-      <div
-        class="d-flex flex-row align-items-center text-truncate"
+    <div v-if="!error">
+      <b-card
+        bg-variant="secondary"
+        style="color: #fff"
       >
-        <b-avatar
-          id="address-qr"
-          rounded
-          size="52"
+        <div
+          class="d-flex flex-row align-items-center text-truncate"
         >
-          <feather-icon
-            icon="CameraIcon"
-            size="32"
-          />
-        </b-avatar>
-        <div class="ml-2">
-          <h3
-            style="color: #fff"
-            class="mb-0"
-          >
-            Address: <feather-icon
-              icon="CopyIcon"
-              size="18"
-              @click="copy()"
-            />
-          </h3>
-          {{ address }}
-        </div>
-      </div>
-    </b-card>
-    <b-card
-      class="d-flex flex-row"
-    >
-      <b-card-header class="pt-0 pl-0 pr-0">
-        <b-card-title>Assets</b-card-title>
-        <div>
-          <b-button
-            v-b-modal.operation-modal
-            variant="primary"
-            size="sm"
-            class="mr-25"
-            @click="setOperationModalType('Transfer')"
+          <b-avatar
+            id="address-qr"
+            rounded
+            size="52"
           >
             <feather-icon
-              icon="SendIcon"
-              class="d-md-none"
-            /><small class="d-none d-md-block">Transfer</small>
-          </b-button>
-          <b-button
-            v-b-modal.operation-modal
-            variant="danger"
-            size="sm"
-            @click="setOperationModalType('IBCTransfer')"
-          ><feather-icon
-             icon="SendIcon"
-             class="d-md-none"
-           />
-            <span class="d-none d-md-block">IBC Transfer</span>
-          </b-button>
-        </div>
-      </b-card-header>
-      <b-card-body class="pl-0 pr-0">
-        <b-row>
-          <b-col
-            xm="12"
-            md="4"
-          >
-            <chart-component-doughnut
-              v-if="chartData"
-              :height="235"
-              :width="235"
-              :data="chartData"
-              class="mb-3"
+              icon="CameraIcon"
+              size="32"
             />
-          </b-col>
-          <b-col
-            class="border-left d-none d-md-block"
-            md="1"
-          />
-          <b-col
-            xm="12"
-            md="7"
-          >
-            <!-- tokens -->
-            <div
-              v-for="(token, index) in assetTable.items"
-              :key="`asset-${index}`"
-              class="d-flex justify-content-between mb-1"
+          </b-avatar>
+          <div class="ml-2">
+            <h3
+              style="color: #fff"
+              class="mb-0"
             >
-              <div class="d-flex align-items-center">
-                <b-avatar
-                  :variant="`light-${token.color}`"
-                  rounded
+              Address: <feather-icon
+                icon="CopyIcon"
+                size="18"
+                @click="copy()"
+              />
+            </h3>
+            {{ address }}
+          </div>
+        </div>
+      </b-card>
+      <b-card
+        class="d-flex flex-row"
+      >
+        <b-card-header class="pt-0 pl-0 pr-0">
+          <b-card-title>Assets</b-card-title>
+          <div>
+            <b-button
+              v-b-modal.operation-modal
+              variant="primary"
+              size="sm"
+              class="mr-25"
+              @click="setOperationModalType('Transfer')"
+            >
+              <feather-icon
+                icon="SendIcon"
+                class="d-md-none"
+              /><small class="d-none d-md-block">Transfer</small>
+            </b-button>
+            <b-button
+              v-b-modal.operation-modal
+              variant="danger"
+              size="sm"
+              @click="setOperationModalType('IBCTransfer')"
+            ><feather-icon
+               icon="SendIcon"
+               class="d-md-none"
+             />
+              <span class="d-none d-md-block">IBC Transfer</span>
+            </b-button>
+          </div>
+        </b-card-header>
+        <b-card-body class="pl-0 pr-0">
+          <b-row>
+            <b-col
+              xm="12"
+              md="4"
+            >
+              <chart-component-doughnut
+                v-if="chartData"
+                :height="235"
+                :width="235"
+                :data="chartData"
+                class="mb-3"
+              />
+            </b-col>
+            <b-col
+              class="border-left d-none d-md-block"
+              md="1"
+            />
+            <b-col
+              xm="12"
+              md="7"
+            >
+              <!-- tokens -->
+              <div
+                v-for="(token, index) in assetTable.items"
+                :key="`asset-${index}`"
+                class="d-flex justify-content-between mb-1"
+              >
+                <div class="d-flex align-items-center">
+                  <b-avatar
+                    :variant="`light-${token.color}`"
+                    rounded
+                  >
+                    <feather-icon
+                      :icon="token.icon"
+                      size="16"
+                      :class="`text-${token.color}`"
+                    />
+                  </b-avatar>
+                  <span class="font-weight-bold ml-75 d-none d-md-block">{{ token.type }} </span>
+                  <span class="ml-25">{{ token.percent }}%</span>
+                </div>
+                <div class="d-flex flex-column">
+                  <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>
+              <!--/ tokens -->
+              <div class="text-right border-top pt-1">
+                <h2>Total: {{ currency }}{{ formatNumber(assetTable.currency) }}</h2>
+              </div>
+            </b-col>
+          </b-row>
+        </b-card-body>
+      </b-card>
+      <b-card
+        v-if="unbonding && unbonding.length > 0"
+      >
+        <b-card-header class="pt-0 pl-0 pr-0">
+          <b-card-title>Unbonding Tokens</b-card-title>
+        </b-card-header>
+        <b-card-body class="pl-0 pr-0">
+          <b-row
+            v-for="item in unbonding"
+            :key="item.validator_address"
+          >
+            <b-col cols="12">
+              <span class="font-weight-bolder">From: <router-link :to="`../staking/${item.validator_address}`">{{ item.validator_address }}</router-link></span>
+            </b-col>
+            <b-col cols="12">
+              <b-table
+                :items="item.entries"
+                class="mt-1"
+                striped
+                hover
+                responsive="sm"
+                stacked="sm"
+              >
+                <template #cell(completion_time)="data">
+                  {{ formatDate(data.item.completion_time) }}
+                </template>
+                <template #cell(initial_balance)="data">
+                  {{ data.item.initial_balance }}{{ stakingParameters.bond_denom }}
+                </template>
+                <template #cell(balance)="data">
+                  {{ data.item.balance }}{{ stakingParameters.bond_denom }}
+                </template>
+              </b-table>
+            </b-col>
+          </b-row>
+        </b-card-body>
+      </b-card>
+      <b-card
+        v-if="delegations"
+      >
+        <b-card-header class="pt-0 pl-0 pr-0">
+          <b-card-title>Delegation</b-card-title>
+          <div>
+            <b-button
+              v-b-modal.operation-modal
+              variant="primary"
+              size="sm"
+              class="mr-25"
+              @click="setOperationModalType('Delegate')"
+            >
+              <feather-icon
+                icon="LogInIcon"
+                class="d-md-none"
+              /><small class="d-none d-md-block">Delegate</small>
+            </b-button>
+            <b-button
+              v-if="delegations"
+              v-b-modal.operation-modal
+              variant="primary"
+              size="sm"
+              @click="setOperationModalType('Withdraw')"
+            >
+              <feather-icon
+                icon="ShareIcon"
+                class="d-md-none"
+              /><small class="d-none d-md-block"> Withdraw Rewards</small>
+            </b-button>
+          </div>
+        </b-card-header>
+        <b-card-body class="pl-0 pr-0">
+          <b-table
+            :items="deleTable"
+            stacked="sm"
+          >
+            <template #cell(action)="data">
+              <!-- size -->
+              <b-button-group
+                size="sm"
+              >
+                <b-button
+                  v-b-modal.operation-modal
+                  v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                  v-b-tooltip.hover.top="'Delegate'"
+                  variant="outline-primary"
+                  @click="selectValue(data.value,'Delegate')"
                 >
-                  <feather-icon
-                    :icon="token.icon"
-                    size="16"
-                    :class="`text-${token.color}`"
-                  />
-                </b-avatar>
-                <span class="font-weight-bold ml-75 d-none d-md-block">{{ token.type }} </span>
-                <span class="ml-25">{{ token.percent }}%</span>
-              </div>
-              <div class="d-flex flex-column">
-                <span class="text-right">{{ formatToken(token) }}</span>
-                <small class="text-right">{{ currency }}{{ formatNumber(token.currency) }}</small>
-              </div>
-            </div>
-            <!--/ tokens -->
-            <div class="text-right border-top pt-1">
-              <h2>Total: {{ currency }}{{ formatNumber(assetTable.currency) }}</h2>
-            </div>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card
-      v-if="unbonding && unbonding.length > 0"
-    >
-      <b-card-header class="pt-0 pl-0 pr-0">
-        <b-card-title>Unbonding Tokens</b-card-title>
-      </b-card-header>
-      <b-card-body class="pl-0 pr-0">
-        <b-row
-          v-for="item in unbonding"
-          :key="item.validator_address"
-        >
-          <b-col cols="12">
-            <span class="font-weight-bolder">From: <router-link :to="`../staking/${item.validator_address}`">{{ item.validator_address }}</router-link></span>
-          </b-col>
-          <b-col cols="12">
-            <b-table
-              :items="item.entries"
-              class="mt-1"
-              striped
-              hover
-              responsive="sm"
-              stacked="sm"
-            >
-              <template #cell(completion_time)="data">
-                {{ formatDate(data.item.completion_time) }}
-              </template>
-              <template #cell(initial_balance)="data">
-                {{ data.item.initial_balance }}{{ stakingParameters.bond_denom }}
-              </template>
-              <template #cell(balance)="data">
-                {{ data.item.balance }}{{ stakingParameters.bond_denom }}
-              </template>
-            </b-table>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
-    <b-card
-      v-if="delegations"
-    >
-      <b-card-header class="pt-0 pl-0 pr-0">
-        <b-card-title>Delegation</b-card-title>
-        <div>
-          <b-button
-            v-b-modal.operation-modal
-            variant="primary"
-            size="sm"
-            class="mr-25"
-            @click="setOperationModalType('Delegate')"
-          >
-            <feather-icon
-              icon="LogInIcon"
-              class="d-md-none"
-            /><small class="d-none d-md-block">Delegate</small>
-          </b-button>
-          <b-button
-            v-if="delegations"
-            v-b-modal.operation-modal
-            variant="primary"
-            size="sm"
-            @click="setOperationModalType('Withdraw')"
-          >
-            <feather-icon
-              icon="ShareIcon"
-              class="d-md-none"
-            /><small class="d-none d-md-block"> Withdraw Rewards</small>
-          </b-button>
-        </div>
-      </b-card-header>
-      <b-card-body class="pl-0 pr-0">
+                  <feather-icon icon="LogInIcon" />
+                </b-button>
+                <b-button
+                  v-b-modal.operation-modal
+                  v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                  v-b-tooltip.hover.top="'Redelegate'"
+                  variant="outline-primary"
+                  @click="selectValue(data.value,'Redelegate')"
+                >
+                  <feather-icon icon="ShuffleIcon" />
+                </b-button>
+                <b-button
+                  v-b-modal.operation-modal
+                  v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                  v-b-tooltip.hover.top="'Unbond'"
+                  variant="outline-primary"
+                  @click="selectValue(data.value,'Unbond')"
+                >
+                  <feather-icon icon="LogOutIcon" />
+                </b-button>
+              </b-button-group>
+            </template>
+          </b-table>
+        </b-card-body>
+      </b-card>
+
+      <b-card title="Transactions">
         <b-table
-          :items="deleTable"
+          :items="txs"
+          striped
+          hover
+          responsive="sm"
           stacked="sm"
         >
-          <template #cell(action)="data">
-            <!-- size -->
-            <b-button-group
-              size="sm"
-            >
-              <b-button
-                v-b-modal.operation-modal
-                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Delegate'"
-                variant="outline-primary"
-                @click="selectValue(data.value,'Delegate')"
-              >
-                <feather-icon icon="LogInIcon" />
-              </b-button>
-              <b-button
-                v-b-modal.operation-modal
-                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Redelegate'"
-                variant="outline-primary"
-                @click="selectValue(data.value,'Redelegate')"
-              >
-                <feather-icon icon="ShuffleIcon" />
-              </b-button>
-              <b-button
-                v-b-modal.operation-modal
-                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Unbond'"
-                variant="outline-primary"
-                @click="selectValue(data.value,'Unbond')"
-              >
-                <feather-icon icon="LogOutIcon" />
-              </b-button>
-            </b-button-group>
+          <template #cell(height)="data">
+            <router-link :to="`../blocks/${data.item.height}`">
+              {{ data.item.height }}
+            </router-link>
+          </template>
+          <template #cell(txhash)="data">
+            <router-link :to="`../tx/${data.item.txhash}`">
+              {{ formatHash(data.item.txhash) }}
+            </router-link>
           </template>
         </b-table>
-      </b-card-body>
-    </b-card>
 
-    <b-card title="Transactions">
-      <b-table
-        :items="txs"
-        striped
-        hover
-        responsive="sm"
-        stacked="sm"
-      >
-        <template #cell(height)="data">
-          <router-link :to="`../blocks/${data.item.height}`">
-            {{ data.item.height }}
-          </router-link>
-        </template>
-        <template #cell(txhash)="data">
-          <router-link :to="`../tx/${data.item.txhash}`">
-            {{ formatHash(data.item.txhash) }}
-          </router-link>
-        </template>
-      </b-table>
-
-      <b-pagination
-        v-if="Number(transactions.page_total) > 1"
-        :total-rows="transactions.total_count"
-        :per-page="transactions.limit"
-        :value="transactions.page_number"
-        align="center"
-        class="mt-1"
-        @change="pageload"
-      />
-    </b-card>
-
-    <b-card
-      v-if="account"
-      title="Profile"
-      class="text-trancate"
-    >
-      <b-table-simple stacked="sm">
-        <b-tbody v-if="account.type === 'cosmos-sdk/BaseAccount'">
-          <b-tr>
-            <b-td>
-              Account Type
-            </b-td><b-td> {{ account.type }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td class="max-width:100px;">
-              Account Number
-            </b-td><b-td> {{ account.value.account_number }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Sequence </b-td><b-td> {{ account.value.sequence }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Public Key </b-td><b-td> <object-field-component :tablefield="account.value.public_key" /> </b-td>
-          </b-tr>
-        </b-tbody>
-        <b-tbody v-else-if="account.type === 'cosmos-sdk/PeriodicVestingAccount' && account.value.base_vesting_account">
-          <b-tr>
-            <b-td>
-              Account Type
-            </b-td>
-            <b-td>
-              {{ account.type }}
-            </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td>
-              Account Number
-            </b-td><b-td> {{ account.value.base_vesting_account.base_account.account_number }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Sequence </b-td><b-td> {{ account.value.base_vesting_account.base_account.sequence }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Public Key </b-td><b-td> <object-field-component :tablefield="account.value.base_vesting_account.base_account.public_key" /> </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Original Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.original_vesting) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Delegated Free </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_free) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Delegated Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_vesting) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Vesting Time </b-td><b-td> {{ formatTime(account.value.start_time) }} - {{ formatTime(account.value.base_vesting_account.end_time) }}</b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Vesting Periods </b-td>
-            <b-td>
-              <b-table-simple>
-                <th>Length</th><th>Amount</th>
-                <b-tr
-                  v-for="p, index in account.value.vesting_periods"
-                  :key="index"
-                >
-                  <td><small>{{ p.length }} <br>{{ formatLength(p.length) }}</small> </td><td>{{ formatToken(p.amount) }}</td>
-                </b-tr>
-              </b-table-simple>
-            </b-td>
-          </b-tr>
-        </b-tbody>
-        <b-tbody v-else-if="account.type === 'cosmos-sdk/DelayedVestingAccount' && account.value.base_vesting_account">
-          <b-tr>
-            <b-td>
-              Account Type
-            </b-td><b-td> {{ account.type }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td style="max-width:100px;">
-              Account Number
-            </b-td><b-td> {{ account.value.base_vesting_account.base_account.account_number }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Sequence </b-td><b-td> {{ account.value.base_vesting_account.base_account.sequence }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Public Key </b-td><b-td> <object-field-component :tablefield="account.value.base_vesting_account.base_account.public_key" /> </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Original Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.original_vesting) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Delegated Free </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_free) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> Delegated Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_vesting) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td> End Time </b-td><b-td> {{ formatTime(account.value.base_vesting_account.end_time) }}</b-td>
-          </b-tr>
-        </b-tbody>
-        <object-field-component
-          v-else
-          :tablefield="account.value || account"
+        <b-pagination
+          v-if="Number(transactions.page_total) > 1"
+          :total-rows="transactions.total_count"
+          :per-page="transactions.limit"
+          :value="transactions.page_number"
+          align="center"
+          class="mt-1"
+          @change="pageload"
         />
-      </b-table-simple>
-    </b-card>
+      </b-card>
 
-    <b-popover
-      target="address-qr"
-      variant="dark"
-      triggers="hover"
-      placement="bottom"
-    >
-      <vue-qr :text="address" />
-    </b-popover>
+      <b-card
+        v-if="account"
+        title="Profile"
+        class="text-trancate"
+      >
+        <b-table-simple stacked="sm">
+          <b-tbody v-if="account.type === 'cosmos-sdk/BaseAccount'">
+            <b-tr>
+              <b-td>
+                Account Type
+              </b-td><b-td> {{ account.type }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td class="max-width:100px;">
+                Account Number
+              </b-td><b-td> {{ account.value.account_number }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Sequence </b-td><b-td> {{ account.value.sequence }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Public Key </b-td><b-td> <object-field-component :tablefield="account.value.public_key" /> </b-td>
+            </b-tr>
+          </b-tbody>
+          <b-tbody v-else-if="account.type === 'cosmos-sdk/PeriodicVestingAccount' && account.value.base_vesting_account">
+            <b-tr>
+              <b-td>
+                Account Type
+              </b-td>
+              <b-td>
+                {{ account.type }}
+              </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td>
+                Account Number
+              </b-td><b-td> {{ account.value.base_vesting_account.base_account.account_number }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Sequence </b-td><b-td> {{ account.value.base_vesting_account.base_account.sequence }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Public Key </b-td><b-td> <object-field-component :tablefield="account.value.base_vesting_account.base_account.public_key" /> </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Original Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.original_vesting) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Delegated Free </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_free) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Delegated Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_vesting) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Vesting Time </b-td><b-td> {{ formatTime(account.value.start_time) }} - {{ formatTime(account.value.base_vesting_account.end_time) }}</b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Vesting Periods </b-td>
+              <b-td>
+                <b-table-simple>
+                  <th>Length</th><th>Amount</th>
+                  <b-tr
+                    v-for="p, index in account.value.vesting_periods"
+                    :key="index"
+                  >
+                    <td><small>{{ p.length }} <br>{{ formatLength(p.length) }}</small> </td><td>{{ formatToken(p.amount) }}</td>
+                  </b-tr>
+                </b-table-simple>
+              </b-td>
+            </b-tr>
+          </b-tbody>
+          <b-tbody v-else-if="account.type === 'cosmos-sdk/DelayedVestingAccount' && account.value.base_vesting_account">
+            <b-tr>
+              <b-td>
+                Account Type
+              </b-td><b-td> {{ account.type }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td style="max-width:100px;">
+                Account Number
+              </b-td><b-td> {{ account.value.base_vesting_account.base_account.account_number }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Sequence </b-td><b-td> {{ account.value.base_vesting_account.base_account.sequence }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Public Key </b-td><b-td> <object-field-component :tablefield="account.value.base_vesting_account.base_account.public_key" /> </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Original Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.original_vesting) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Delegated Free </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_free) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> Delegated Vesting </b-td><b-td> {{ formatToken(account.value.base_vesting_account.delegated_vesting) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td> End Time </b-td><b-td> {{ formatTime(account.value.base_vesting_account.end_time) }}</b-td>
+            </b-tr>
+          </b-tbody>
+          <object-field-component
+            v-else
+            :tablefield="account.value || account"
+          />
+        </b-table-simple>
+      </b-card>
 
-    <operation-modal
-      :type="operationModalType"
-      :address="address"
-      :validator-address="selectedValidator"
-    />
-    <div id="txevent" />
+      <b-popover
+        target="address-qr"
+        variant="dark"
+        triggers="hover"
+        placement="bottom"
+      >
+        <vue-qr :text="address" />
+      </b-popover>
+
+      <operation-modal
+        :type="operationModalType"
+        :address="address"
+        :validator-address="selectedValidator"
+      />
+      <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>
 
@@ -455,6 +480,7 @@ export default {
       transactions: [],
       stakingParameters: {},
       operationModalType: '',
+      error: null,
     }
   },
   computed: {
@@ -605,13 +631,16 @@ 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
-    })
-    this.$http.getStakingParameters().then(res => {
-      this.stakingParameters = res
+      this.initial()
+      this.$http.getTxsBySender(this.address).then(res => {
+        this.transactions = res
+      })
+      this.$http.getStakingParameters().then(res => {
+        this.stakingParameters = res
+      })
+    }).catch(err => {
+      console.log(err)
+      this.error = err
     })
   },
   mounted() {