提升UI

src/layouts/vertical/LayoutVertical.vue

@@ -1,7 +1,7 @@
 <template>
   <layout-vertical>
 
-    <router-view :key="$route.fullPath" />
+    <router-view :key="$route.params.chain" />
 
     <template #navbar="{ toggleVerticalMenuActive }">
       <navbar :toggle-vertical-menu-active="toggleVerticalMenuActive" />

src/libs/data/data.js

@@ -12,12 +12,24 @@ export function percent(num) {
   return parseFloat((num * 100).toFixed(2))
 }
 
+export function isToken(value) {
+  let is = false
+  if (Array.isArray(value)) {
+    is = value.findIndex(x => Object.keys(x).includes('denom')) > -1
+  }
+  return is
+}
+
 export function formatToken(token) {
   let denom = token.denom.toUpperCase()
   if (denom.charAt(0) === 'U') {
     denom = denom.substring(1)
   }
-  return `${(token.amount / 1000000).toFixed()} ${denom}`
+  const amount = token.amount / 1000000
+  if (amount > 10) {
+    return `${amount.toFixed()} ${denom}`
+  }
+  return `${amount} ${denom}`
 }
 
 const COUNT_ABBRS = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']

src/views/ArrayFieldComponent.vue

@@ -0,0 +1,57 @@
+<template>
+  <b-table
+    :items="tablefield"
+    :sticky-header="true"
+    :no-border-collapse="true"
+    responsive
+  >
+    <template #cell()="data">
+      <span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
+      <array-field-component
+        v-else-if="isArrayText(data.value)"
+        :tablefield="eval_value(data.value)"
+      />
+      <span v-else>{{ data.value }}</span>
+    </template>
+  </b-table>
+</template>
+
+<script>
+import { BTable } from 'bootstrap-vue'
+// import fetch from 'node-fetch'
+
+import { isToken, tokenFormatter } from '@/libs/data/data'
+// import { Proposal, Proposer } from '@/libs/data'
+// import { formatToken } from '@/libs/data/data'
+
+export default {
+  name: 'ArrayFieldComponent',
+  components: {
+    BTable,
+  },
+  props: {
+    tablefield: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    eval_value(value) {
+      if (typeof (value) === 'string') {
+        return JSON.parse(value)
+      }
+      return value
+    },
+    isTokenField(value) {
+      return isToken(value)
+    },
+    isArrayText(value) {
+      const has = String(value).startsWith('[')
+      return has
+    },
+    formatTokens(value) {
+      return tokenFormatter(value)
+    },
+  },
+}
+</script>

src/views/Governance.vue

@@ -1,10 +1,16 @@
 <template>
-  <section>
-    <b-card
+  <b-row class="match-height">
+    <b-col
       v-for="p in proposals"
       :key="p.id"
+      lg="6"
+      md="12"
+    >
+      <b-card>
+        <b-card-title
+          class="mb-0"
+          style="height:40px;"
         >
-      <b-card-title class="mb-0">
           <b-badge
             v-if="p.status == 1"
             pill
@@ -37,8 +43,12 @@
           >
             Rejected
           </b-badge>
-        #{{ p.id }}. <a :href="`./gov/${p.id}`">{{ p.title }}</a>
-      </b-card-title>
+          #{{ p.id }}.
+          <router-link
+            :to="`./gov/${p.id}`"
+          >
+            {{ p.title }}
+          </router-link></b-card-title>
         <b-card-body md="12">
           <div class="gov-wrapper">
             <div class="gov">
@@ -127,12 +137,11 @@
         >
           {{ p.tally.abstain }}% voted Abstain
         </b-tooltip>
-      <b-card-footer>
+        <b-card-footer class="pb-0">
           <router-link
             v-ripple.400="'rgba(113, 102, 240, 0.15)'"
             :to="`./gov/${p.id}`"
             variant="outline-primary"
-          class="btn"
           >
             <b-button
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
@@ -151,12 +160,13 @@
           </b-button>
         </b-card-footer>
       </b-card>
-  </section>
+    </b-col>
+  </b-row>
 </template>
 
 <script>
 import {
-  BCard, BCardTitle, BCardBody, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip,
+  BCard, BCardTitle, BCardBody, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip, BRow, BCol,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import { Proposal } from '@/libs/data'
@@ -172,6 +182,8 @@ export default {
     BCardTitle,
     BTooltip,
     BCardBody,
+    BRow,
+    BCol,
   },
   directives: {
     Ripple,

src/views/ObjectFieldComponent.vue

@@ -0,0 +1,63 @@
+<template>
+  <b-table-simple>
+    <b-tr
+      v-for="(value, name) in tablefield"
+      :key="name"
+    >
+      <b-td
+        style="text-transform: capitalize; vertical-align: top; width:200px"
+      >
+        {{ name.replaceAll('_',' ') }}
+      </b-td>
+      <b-td v-if="isTokenField(value)">
+        {{ formatTokens( value ) }}
+      </b-td>
+      <b-td v-else-if="Array.isArray(value)">
+        <array-field-component :tablefield="value" />
+      </b-td>
+      <b-td v-else>
+        {{ value }}
+      </b-td>
+    </b-tr>
+  </b-table-simple>
+</template>
+
+<script>
+import {
+  BTableSimple, BTr, BTd,
+} from 'bootstrap-vue'
+import { isToken, tokenFormatter } from '@/libs/data'
+import ArrayFieldComponent from './ArrayFieldComponent.vue'
+// import fetch from 'node-fetch'
+
+// import { tokenFormatter } from '@/libs/data/data'
+// import { Proposal, Proposer } from '@/libs/data'
+// import { formatToken } from '@/libs/data/data'
+
+export default {
+  name: 'ObjectFieldComponent',
+  components: {
+    BTableSimple,
+    BTr,
+    BTd,
+    ArrayFieldComponent,
+  },
+  props: {
+    tablefield: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  methods: {
+    eval_value(value) {
+      return Array.from(value)
+    },
+    isTokenField(value) {
+      return isToken(value)
+    },
+    formatTokens(value) {
+      return tokenFormatter(value)
+    },
+  },
+}
+</script>

src/views/ProposalView.vue

@@ -41,7 +41,7 @@
       <b-card-body>
         <b-table-simple>
           <b-tr>
-            <b-td lg="2">
+            <b-td style="width:200px">
               {{ $t('proposal_id') }}
             </b-td><b-td>{{ proposal.id }}</b-td>
           </b-tr>
@@ -75,39 +75,8 @@
               {{ $t('proposal_type') }}
             </b-td><b-td>{{ proposal.type }}</b-td>
           </b-tr>
-          <b-tr
-            v-for="(value, name) in proposal.contents"
-            :key="name"
-          >
-            <b-td style="text-transform: capitalize; vertical-align: top;">
-              {{ name.replaceAll('_',' ') }}
-            </b-td>
-            <b-td v-if="!Array.isArray(value)">
-              {{ value }}
-            </b-td>
-            <b-td v-if="Array.isArray(value) && name === 'amount'">
-              <span
-                v-for="token in value"
-                :key="token.amount"
-              >
-                {{ token.amount }} {{ token.denom }}
-              </span>
-            </b-td>
-            <b-td v-if="Array.isArray(value) && name != 'amount'">
-              <b-table :items="value">
-                <!-- A custom formatted column -->
-                <template #cell(amount)="data">
-                  <span
-                    v-for="token in data.value"
-                    :key="token.amount"
-                  >
-                    {{ token.amount }} {{ token.denom }}
-                  </span>
-                </template>
-              </b-table>
-            </b-td>
-          </b-tr>
         </b-table-simple>
+        <object-field-component :tablefield="proposal.contents" />
       </b-card-body>
       <b-card-footer>
         <router-link :to="`../gov`">
@@ -232,6 +201,7 @@ import {
 
 import { tokenFormatter } from '@/libs/data/data'
 import { Proposal, Proposer } from '@/libs/data'
+import ObjectFieldComponent from './ObjectFieldComponent.vue'
 // import { formatToken } from '@/libs/data/data'
 
 export default {
@@ -250,6 +220,7 @@ export default {
     BProgress,
     BTooltip,
     BBadge,
+    ObjectFieldComponent,
   },
   data() {
     return {

src/views/StakingRewardComponent.vue

@@ -28,16 +28,16 @@
           </b-media-aside>
           <b-media-body>
             <h6 class="transaction-title">
-              {{ d.amount }}
+              {{ formatNumber(d.amount) }}
             </h6>
             <small>{{ d.denom }} </small>
           </b-media-body>
         </b-media>
-        <div
-          class="font-weight-bolder text-success d-none d-md-block hidden-md-down "
+        <small
+          class="text-success d-none d-xl-block "
         >
           Reward
-        </div>
+        </small>
       </div>
       <div
         v-for="d in data.val_commission"
@@ -59,16 +59,16 @@
           </b-media-aside>
           <b-media-body>
             <h6 class="transaction-title">
-              {{ d.amount }}
+              {{ formatNumber(d.amount) }}
             </h6>
             <small>{{ d.denom }}</small>
           </b-media-body>
         </b-media>
-        <div
-          class="font-weight-bolder text-primary hidden-sm hidden-md"
+        <small
+          class="text-primary d-none d-xl-block"
         >
           Commission
-        </div>
+        </small>
       </div>
     </b-card-body>
   </b-card>
@@ -142,5 +142,10 @@ export default {
       ],
     }
   },
+  methods: {
+    formatNumber(value) {
+      return Number(value).toFixed(2)
+    },
+  },
 }
 </script>

src/views/StakingValidator.vue

@@ -202,21 +202,18 @@
     <template>
       <b-row class="match-height">
         <b-col
-          xl="4"
           lg="4"
           md="12"
         >
           <staking-commission-component :data="validator.commission" />
         </b-col>
         <b-col
-          xl="4"
           lg="4"
           md="12"
         >
           <staking-reward-component :data="distribution" />
         </b-col>
         <b-col
-          xl="4"
           lg="4"
           md="12"
         >
@@ -243,6 +240,15 @@
                 class="btn-icon mb-25 mr-25"
               > &nbsp; </b-button>
             </b-card-body>
+            <b-card-footer>
+              <router-link :to="`../staking`">
+                <b-button
+                  variant="outline-primary"
+                >
+                  {{ $t('btn_back_list') }}
+                </b-button>
+              </router-link>
+            </b-card-footer>
           </b-card>
         </b-col>
       </b-row>