Merge branch 're-implement-operation-modal' of https://github.com/ping-pub/explorer into re-implement-operation-modal

src/layouts/components/Navbar.vue

@@ -106,16 +106,26 @@
           </b-button>
         </template>
 
-        <!-- <b-dropdown-item
-          :to="{ name: 'portfolio' }"
-          class="d-none"
+        <b-dropdown-item
+          v-for="(item,k) in accounts"
+          :key="k"
+          :disabled="!item.address"
+          @click="updateDefaultWallet(item.wallet)"
         >
-          <feather-icon
-            icon="PieChartIcon"
-            size="16"
-          />
-          <span class="align-middle ml-50">Portofolio</span>
-        </b-dropdown-item> -->
+          <div class="d-flex flex-column">
+            <span class="font-weight-bolder">{{ item.wallet }}
+              <b-avatar
+                v-if="item.wallet===walletName"
+                variant="success"
+                size="sm"
+              >
+                <feather-icon icon="CheckIcon" />
+              </b-avatar>
+            </span>
+            <small>{{ item.address ? formatAddr(item.address.addr) : `Not available for ${selected_chain.chain_name}` }}</small>
+          </div>
+        </b-dropdown-item>
+        <b-dropdown-divider />
 
         <b-dropdown-item :to="{ name: 'accounts' }">
           <feather-icon
@@ -155,7 +165,7 @@
 <script>
 import {
   BLink, BNavbarNav, BMedia, BMediaAside, BAvatar, BMediaBody, VBTooltip, BButton,
-  BDropdown, BDropdownItem,
+  BDropdown, BDropdownItem, BDropdownDivider,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import DarkToggler from '@core/layouts/components/app-navbar/components/DarkToggler.vue'
@@ -176,6 +186,7 @@ export default {
     BButton,
     BDropdown,
     BDropdownItem,
+    BDropdownDivider,
 
     // Navbar Components
     DarkToggler,
@@ -224,14 +235,26 @@ export default {
       }
       return [conf.api]
     },
+    accounts() {
+      let accounts = getLocalAccounts() || {}
+      accounts = Object.entries(accounts).map(v => ({ wallet: v[0], address: v[1].address.find(x => x.chain === this.selected_chain.chain_name) }))
+
+      if (!this.$store.state.chains.defaultWallet && this.accounts.length > 0) {
+        this.updateDefaultWallet(this.accounts[0].wallet)
+      }
+      return accounts
+    },
   },
   mounted() {
-    const accounts = Object.keys(getLocalAccounts() || {})
-    if (!this.$store.state.chains.defaultWallet && accounts.length > 0) {
-      this.$store.commit('setDefaultWallet', accounts[0])
-    }
+
   },
   methods: {
+    formatAddr(v) {
+      return v.substring(0, 10).concat('...', v.substring(v.length - 10))
+    },
+    updateDefaultWallet(v) {
+      this.$store.commit('setDefaultWallet', v)
+    },
     change(v) {
       this.index = v
       const conf = this.$store.state.chains.selected

src/views/components/OperationModal/TransactionResult.vue

@@ -106,6 +106,7 @@ export default {
       isLoading: true,
       succeed: false,
       error: '',
+      checkTimes: 0,
     }
   },
   computed: {
@@ -133,16 +134,21 @@ export default {
       if (this.hash) {
         this.error = null
         this.$http.getTxs(this.hash).then(res => {
-          console.log('tx', res)
           if (res.code === 0) {
             this.succeed = true
             clearInterval(this.timer)
             window.location.reload()
           } else if (res.code !== 3) { // code 3 is tx unconfirmed(not founded).
             this.error = res.raw_log
-            console.log('error:', this.error)
             clearInterval(this.timer)
           }
+        }, () => {
+          // error statement
+          this.checkTimes += 1
+          if (this.checkTimes > 5) {
+            clearInterval(this.timer)
+            this.error = 'Timeout'
+          }
         }).catch(e => {
           this.error = e
           clearInterval(this.timer)