improve UX

src/views/StakingRewardComponent.vue

@@ -75,6 +75,16 @@
         </small>
       </div>
     </b-card-body>
+    <b-card-body class="pt-0">
+      <b-button
+        v-b-modal.withdraw-commission-window
+        block
+        size="sm"
+        variant="primary"
+      >
+        Withdraw Commission
+      </b-button>
+    </b-card-body>
     <operation-withdraw-commission-component
       :validator-address="validator"
       :address="address"
@@ -84,12 +94,13 @@
 
 <script>
 import {
-  BCard, BCardHeader, BCardTitle, BCardBody, BMediaBody, BMedia, BMediaAside, BAvatar,
+  BCard, BCardHeader, BCardTitle, BCardBody, BMediaBody, BMedia, BMediaAside, BAvatar, BButton,
 } from 'bootstrap-vue'
 import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
 
 export default {
   components: {
+    BButton,
     BCard,
     BCardHeader,
     BCardTitle,

src/views/Uptime.vue

@@ -111,11 +111,10 @@ export default {
 
     if (cached) {
       this.validators = cached
-    } else {
-      this.$http.getValidatorList().then(res => {
-        this.validators = res
-      })
     }
+    this.$http.getValidatorList().then(res => {
+      this.validators = res
+    })
     this.initBlocks()
   },
   beforeDestroy() {

src/views/UptimeMyChainBlocks.vue

@@ -13,6 +13,10 @@
         </div>
       </b-alert>
       <b-row>
+        <span
+          v-if="uptime.length===0"
+          class="text-danger"
+        > Your node is out of active validator set</span>
         <b-col
           v-for="(x,index) in uptime"
           :key="index"

src/views/WalletAccountDetail.vue

@@ -130,7 +130,7 @@
             class="mr-25"
           >
             <feather-icon
-              icon="PlusIcon"
+              icon="LogInIcon"
               class="d-md-none"
             /><small class="d-none d-md-block">Delegate</small>
           </b-button>
@@ -141,7 +141,7 @@
             size="sm"
           >
             <feather-icon
-              icon="MinusIcon"
+              icon="ShareIcon"
               class="d-md-none"
             /><small class="d-none d-md-block"> Withdraw Rewards</small>
           </b-button>

src/views/WalletAccounts.vue

@@ -191,22 +191,22 @@
                         <div
                           v-for="b,i in balances[acc.addr]"
                           :key="i"
-                          class="d-flex justify-content-between align-items-center"
+                          class="d-flex justify-content-between"
                         >
                           <div
-                            class="ml-25 font-weight-bolder text-uppercase text-success"
+                            class="ml-25 font-weight-bolder text-uppercase text-success d-flex flex-column text-left"
                             title="Balance"
                           >
-                            {{ formatDenom(b.denom) }}
+                            {{ formatAmount(b.amount, b.denom) }} {{ formatDenom(b.denom) }}
+                            <span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
+                          </div>
+                          <div class="d-flex flex-column text-right">
+                            <span class="font-weight-bold mb-0">{{ currency }}{{ formatPrice(b.denom) }}</span>
                             <small
                               :class="priceColor(b.denom)"
                               class="py-0"
                             >{{ formatChanges(b.denom) }}</small>
                           </div>
-                          <div class="d-flex flex-column text-right">
-                            <span class="font-weight-bold mb-0">{{ formatAmount(b.amount, b.denom) }}</span>
-                            <span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
-                          </div>
                         </div>
                         <div
                           v-for="b,i in delegations[acc.addr]"
@@ -214,19 +214,19 @@
                           class="d-flex justify-content-between align-items-center"
                         >
                           <div
-                            class="ml-25 font-weight-bolder text-uppercase text-primary"
+                            class="ml-25 font-weight-bolder text-uppercase text-primary d-flex flex-column text-left"
-                            title="Delegations"
+                            title="Balance"
                           >
-                            {{ formatDenom(b.denom) }}
+                            {{ formatAmount(b.amount, b.denom) }} {{ formatDenom(b.denom) }}
+                            <span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
+                          </div>
+                          <div class="d-flex flex-column text-right">
+                            <span class="font-weight-bold mb-0">{{ currency }}{{ formatPrice(b.denom) }}</span>
                             <small
                               :class="priceColor(b.denom)"
                               class="py-0"
                             >{{ formatChanges(b.denom) }}</small>
                           </div>
-                          <div class="d-flex flex-column text-right">
-                            <span class="font-weight-bold mb-0">{{ formatAmount(b.amount, b.denom) }}</span>
-                            <span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
-                          </div>
                         </div>
                       </app-collapse-item>
                     </app-collapse>
@@ -515,8 +515,16 @@ export default {
             })
             this.$http.getStakingDelegations(add.addr, chains[add.chain]).then(res => {
               if (res.delegation_responses) {
-                const delegation = res.delegation_responses.map(x => x.balance)
+                const delegation = res.delegation_responses.map(x => x.balance).reduce((t, c) => {
-                this.$set(this.delegations, add.addr, delegation)
+                  const t1 = t
+                  if (t1[c.denom]) {
+                    t1[c.denom] += Number(c.amount)
+                  } else {
+                    t1[c.denom] = Number(c.amount)
+                  }
+                  return t1
+                }, {})
+                this.$set(this.delegations, add.addr, Object.keys(delegation).map(x => ({ amount: String(delegation[x]), denom: x })))
               }
             }).catch(() => {})
           })
@@ -536,10 +544,12 @@ export default {
       this.$bvModal.hide('add-account')
     },
     formatDenom(v) {
+      if (!v) return ''
       const denom = (v.startsWith('ibc') ? this.ibcDenom[v] : v)
       return formatTokenDenom(denom)
     },
     formatAmount(v, denom = 'uatom') {
+      if (!v) return ''
       return formatTokenAmount(v, 2, denom)
     },
     formatAddr(v) {
@@ -577,6 +587,15 @@ export default {
       const price = this.getChanges(denom)
       return price === 0 ? '' : `${parseFloat(price.toFixed(2))}%`
     },
+    formatPrice(denom) {
+      const d2 = this.formatDenom(denom)
+      const quote = this.$store.state.chains.quotes[d2]
+      if (quote) {
+        const price = quote[this.currency2]
+        return price
+      }
+      return 0
+    },
     formatBalance(v) {
       let total = 0
       const balance = this.balances[v]