improve UI/UX

src/libs/fetch.js

@@ -221,12 +221,12 @@ const chainAPI = class ChainFetch {
     return this.get(`/cosmos/distribution/v1beta1/delegators/${address}/validators`).then(data => commonProcess(data))
   }
 
-  async getStakingDelegations(address) {
-    return this.get(`/cosmos/staking/v1beta1/delegations/${address}`).then(data => commonProcess(data))
+  async getStakingDelegations(address, config = null) {
+    return this.get(`/cosmos/staking/v1beta1/delegations/${address}`, config).then(data => commonProcess(data))
   }
 
-  async getStakingRedelegations(address) {
-    return this.get(`/cosmos/staking/v1beta1/delegators/${address}/redelegations`).then(data => commonProcess(data))
+  async getStakingRedelegations(address, config = null) {
+    return this.get(`/cosmos/staking/v1beta1/delegators/${address}/redelegations`, config).then(data => commonProcess(data))
   }
 
   async getStakingUnbonding(address) {

src/views/GovernanceProposalView.vue

@@ -58,7 +58,9 @@
             <b-tr>
               <b-td>
                 {{ $t('proposal_proposer') }}
-              </b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
+              </b-td><b-td><router-link :to="`../account/${proposer.proposer}`">
+                {{ formatAddress(proposer.proposer) }}
+              </router-link> </b-td>
             </b-tr>
             <b-tr>
               <b-td>
@@ -176,7 +178,13 @@
           :fields="votes_fields"
           :items="votes.votes"
           striped
-        />
+        >
+          <template #cell(voter)="data">
+            <router-link :to="`../account/${data.item.voter}`">
+              {{ formatAddress(data.item.voter) }}
+            </router-link>
+          </template>
+        </b-table>
         <b-card
           v-if="next"
           class="addzone text-center"
@@ -199,7 +207,13 @@
           :items="deposits"
           :fields="deposit_fields"
           striped
-        />
+        >
+          <template #cell(depositor)="data">
+            <router-link :to="`../account/${data.item.depositor}`">
+              {{ formatAddress(data.item.depositor) }}
+            </router-link>
+          </template>
+        </b-table>
       </b-card-body>
       <b-card-footer>
         <router-link :to="`../gov`">
@@ -272,12 +286,16 @@ export default {
           formatter: value => {
             switch (value) {
               case 1:
+              case 'VOTE_OPTION_YES':
                 return 'Yes'
               case 2:
+              case 'VOTE_OPTION_ABSTAIN':
                 return 'Abstain'
               case 3:
+              case 'VOTE_OPTION_NO':
                 return 'No'
               case 4:
+              // case 'VOTE_OPTION_NO_WITH':
                 return 'No With Veto'
               default:
                 return value

src/views/StakingAddressComponent.vue

@@ -24,7 +24,9 @@
         <h6 class="mb-0">
           Account Address
         </h6>
-        <small>{{ accountAddress }}</small>
+        <router-link :to="`../account/${accountAddress}`">
+          <small>{{ accountAddress }}</small>
+        </router-link>
       </b-media-body>
     </b-media>
     <b-media
@@ -47,7 +49,7 @@
         <h6 class="mb-0">
           Validator Address
         </h6>
-        <small>{{ operatorAddress }}</small>
+        <small @click="copy(operatorAddress)">{{ operatorAddress }}</small>
       </b-media-body>
     </b-media>
     <b-media
@@ -70,7 +72,7 @@
         <h6 class="mb-0">
           Consensus Public Address
         </h6>
-        <small>{{ consensusPubkey }}</small>
+        <small @click="copy(consensusPubkey)">{{ consensusPubkey }}</small>
       </b-media-body>
     </b-media>
     <b-media
@@ -93,7 +95,7 @@
         <h6 class="mb-0">
           Hex Address
         </h6>
-        <small>{{ hexAddress }}</small>
+        <small @click="copy(hexAddress)">{{ hexAddress }}</small>
       </b-media-body>
     </b-media>
   </b-card>
@@ -104,6 +106,8 @@ import {
   BCard, BAvatar, BMedia, BMediaAside, BMediaBody, VBTooltip,
 } from 'bootstrap-vue'
 
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+
 export default {
   components: {
     BCard,
@@ -111,6 +115,8 @@ export default {
     BMedia,
     BMediaAside,
     BMediaBody,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -133,6 +139,28 @@ export default {
       default: '-',
     },
   },
+  methods: {
+    copy(v) {
+      this.$copyText(v).then(() => {
+        this.$toast({
+          component: ToastificationContent,
+          props: {
+            title: 'Address copied',
+            icon: 'BellIcon',
+          },
+        })
+      }, e => {
+        this.$toast({
+          component: ToastificationContent,
+          props: {
+            title: `Failed to copy address! ${e}`,
+            icon: 'BellIcon',
+            variant: 'danger',
+          },
+        })
+      })
+    },
+  },
 }
 </script>
 

src/views/StakingValidator.vue

@@ -60,7 +60,7 @@
                 rounded
               >
                 <feather-icon
-                  icon="DollarSignIcon"
+                  icon="DiscIcon"
                   size="18"
                 />
               </b-avatar>
@@ -78,7 +78,7 @@
                 rounded
               >
                 <feather-icon
-                  icon="SmileIcon"
+                  icon="DivideCircleIcon"
                   size="18"
                 />
               </b-avatar>

src/views/UserAccountDetail.vue

@@ -112,7 +112,10 @@
             size="sm"
             class="mr-25"
           >
-            Delegate
+            <feather-icon
+              icon="PlusIcon"
+              class="d-md-none"
+            /><small class="d-none d-md-block">Delegate</small>
           </b-button>
           <b-button
             v-if="delegations"
@@ -120,7 +123,10 @@
             variant="primary"
             size="sm"
           >
-            Withdraw
+            <feather-icon
+              icon="MinusIcon"
+              class="d-md-none"
+            /><small class="d-none d-md-block"> Withdraw</small>
           </b-button>
         </div>
       </b-card-header>

src/views/UserAccounts.vue

@@ -76,8 +76,11 @@
                       />
                       <h3>${{ formatBalance(balances[acc.addr]) }}</h3>
                     </div>
-                    <small class="pl-1 float-right text-muted text-overflow ">
-                      {{ acc.addr }}
+                    <small
+                      class="pl-1 float-right text-muted text-overflow "
+                      @click="copy(acc.addr)"
+                    >
+                      {{ formatAddr(acc.addr) }}
                     </small>
                   </b-col>
                 </b-row>
@@ -148,9 +151,9 @@ import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
 import {
   formatTokenAmount, formatTokenDenom, getLocalAccounts, getLocalChains,
 } from '@/libs/data'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import UserAccountImportAddress from './UserAccountImportAddress.vue'
 import OperationTransferComponent from './OperationTransferComponent.vue'
-// import { SigningCosmosClient } from '@cosmjs/launchpad'
 
 export default {
   components: {
@@ -168,6 +171,8 @@ export default {
     UserAccountImportAddress,
     FeatherIcon,
     OperationTransferComponent,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
   },
   directives: {
     'b-modal': VBModal,
@@ -235,6 +240,9 @@ export default {
     formatAmount(v) {
       return formatTokenAmount(v)
     },
+    formatAddr(v) {
+      return v.substring(0, 10).concat('...', v.substring(v.length - 10))
+    },
     formatCurrency(amount, denom) {
       const qty = this.formatAmount(amount)
       const d2 = this.formatDenom(denom)
@@ -265,6 +273,26 @@ export default {
       })
       localStorage.setItem('accounts', JSON.stringify(this.accounts))
     },
+    copy(v) {
+      this.$copyText(v).then(() => {
+        this.$toast({
+          component: ToastificationContent,
+          props: {
+            title: 'Address copied',
+            icon: 'BellIcon',
+          },
+        })
+      }, e => {
+        this.$toast({
+          component: ToastificationContent,
+          props: {
+            title: `Failed to copy address! ${e}`,
+            icon: 'BellIcon',
+            variant: 'danger',
+          },
+        })
+      })
+    },
   },
 }
 </script>