提升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,162 +1,172 @@
 <template>
-  <section>
+  <b-row class="match-height">
-    <b-card
+    <b-col
       v-for="p in proposals"
       :key="p.id"
+      lg="6"
+      md="12"
     >
-      <b-card-title class="mb-0">
+      <b-card>
-        <b-badge
+        <b-card-title
-          v-if="p.status == 1"
+          class="mb-0"
-          pill
+          style="height:40px;"
-          variant="light-info"
-          class="text-right"
         >
-          Deposit
+          <b-badge
-        </b-badge>
+            v-if="p.status == 1"
-        <b-badge
+            pill
-          v-if="p.status == 2"
+            variant="light-info"
-          pill
+            class="text-right"
-          variant="light-primary"
+          >
-          class="text-right"
+            Deposit
-        >
+          </b-badge>
-          Voting
+          <b-badge
-        </b-badge>
+            v-if="p.status == 2"
-        <b-badge
+            pill
-          v-if="p.status == 3"
+            variant="light-primary"
-          pill
+            class="text-right"
-          variant="light-success"
+          >
-          class="text-right"
+            Voting
-        >
+          </b-badge>
-          Passed
+          <b-badge
-        </b-badge>
+            v-if="p.status == 3"
-        <b-badge
+            pill
-          v-if="p.status == 4"
+            variant="light-success"
-          pill
+            class="text-right"
-          variant="light-danger"
+          >
-          class="text-right"
+            Passed
-        >
+          </b-badge>
-          Rejected
+          <b-badge
-        </b-badge>
+            v-if="p.status == 4"
-        #{{ p.id }}. <a :href="`./gov/${p.id}`">{{ p.title }}</a>
+            pill
-      </b-card-title>
+            variant="light-danger"
-      <b-card-body md="12">
+            class="text-right"
-        <div class="gov-wrapper">
+          >
-          <div class="gov">
+            Rejected
-            <p class="card-text mb-25">
+          </b-badge>
-              Start Date
+          #{{ p.id }}.
-            </p>
+          <router-link
-            <h6 class="mb-0">
+            :to="`./gov/${p.id}`"
-              {{ p.voting_start_time }}
+          >
-            </h6>
+            {{ p.title }}
+          </router-link></b-card-title>
+        <b-card-body md="12">
+          <div class="gov-wrapper">
+            <div class="gov">
+              <p class="card-text mb-25">
+                Start Date
+              </p>
+              <h6 class="mb-0">
+                {{ p.voting_start_time }}
+              </h6>
+            </div>
+            <div class="gov">
+              <p class="card-text mb-25">
+                End Date
+              </p>
+              <h6 class="mb-0">
+                {{ p.voting_end_time }}
+              </h6>
+            </div>
+            <div class="gov">
+              <p class="card-text mb-25">
+                Deposit
+              </p>
+              <h6 class="mb-0">
+                {{ p.total_deposit }}
+              </h6>
+            </div>
+            <div class="gov">
+              <p class="card-text mb-25">
+                Turnout
+              </p>
+              <h6 class="mb-0">
+                {{ p.tally.turnout }}%
+              </h6>
+            </div>
           </div>
-          <div class="gov">
+        </b-card-body>
-            <p class="card-text mb-25">
-              End Date
-            </p>
-            <h6 class="mb-0">
-              {{ p.voting_end_time }}
-            </h6>
-          </div>
-          <div class="gov">
-            <p class="card-text mb-25">
-              Deposit
-            </p>
-            <h6 class="mb-0">
-              {{ p.total_deposit }}
-            </h6>
-          </div>
-          <div class="gov">
-            <p class="card-text mb-25">
-              Turnout
-            </p>
-            <h6 class="mb-0">
-              {{ p.tally.turnout }}%
-            </h6>
-          </div>
-        </div>
-      </b-card-body>
 
-      <b-progress
+        <b-progress
-        :max="100"
+          :max="100"
-        height="2rem"
+          height="2rem"
-        class="mb-2"
+          class="mb-2"
-        show-progress
-      >
-        <b-progress-bar
-          :id="'vote-yes'+p.id"
-          variant="success"
-          :value="p.tally.yes"
           show-progress
-        />
-        <b-progress-bar
-          :id="'vote-no'+p.id"
-          variant="warning"
-          :value="p.tally.no"
-          show-progress
-        />
-        <b-progress-bar
-          :id="'vote-veto'+p.id"
-          variant="danger"
-          :value="p.tally.veto"
-          show-progress
-        />
-        <b-progress-bar
-          :id="'vote-abstain'+p.id"
-          variant="info"
-          :value="p.tally.abstain"
-          show-progress
-        />
-      </b-progress>
-      <b-tooltip
-        :target="'vote-yes'+p.id"
-      >
-        {{ p.tally.yes }}% voted Yes
-      </b-tooltip>
-      <b-tooltip
-        :target="'vote-no'+p.id"
-      >
-        {{ p.tally.no }}% voted No
-      </b-tooltip>
-      <b-tooltip
-        :target="'vote-veto'+p.id"
-      >
-        {{ p.tally.veto }}% voted No With Veta
-      </b-tooltip>
-      <b-tooltip
-        :target="'vote-abstain'+p.id"
-      >
-        {{ p.tally.abstain }}% voted Abstain
-      </b-tooltip>
-      <b-card-footer>
-        <router-link
-          v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-          :to="`./gov/${p.id}`"
-          variant="outline-primary"
-          class="btn"
         >
-          <b-button
+          <b-progress-bar
+            :id="'vote-yes'+p.id"
+            variant="success"
+            :value="p.tally.yes"
+            show-progress
+          />
+          <b-progress-bar
+            :id="'vote-no'+p.id"
+            variant="warning"
+            :value="p.tally.no"
+            show-progress
+          />
+          <b-progress-bar
+            :id="'vote-veto'+p.id"
+            variant="danger"
+            :value="p.tally.veto"
+            show-progress
+          />
+          <b-progress-bar
+            :id="'vote-abstain'+p.id"
+            variant="info"
+            :value="p.tally.abstain"
+            show-progress
+          />
+        </b-progress>
+        <b-tooltip
+          :target="'vote-yes'+p.id"
+        >
+          {{ p.tally.yes }}% voted Yes
+        </b-tooltip>
+        <b-tooltip
+          :target="'vote-no'+p.id"
+        >
+          {{ p.tally.no }}% voted No
+        </b-tooltip>
+        <b-tooltip
+          :target="'vote-veto'+p.id"
+        >
+          {{ p.tally.veto }}% voted No With Veta
+        </b-tooltip>
+        <b-tooltip
+          :target="'vote-abstain'+p.id"
+        >
+          {{ p.tally.abstain }}% voted Abstain
+        </b-tooltip>
+        <b-card-footer class="pb-0">
+          <router-link
             v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-            :href="`./gov/${p.id}`"
+            :to="`./gov/${p.id}`"
             variant="outline-primary"
           >
-            {{ $t('btn_detail') }}
+            <b-button
+              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+              :href="`./gov/${p.id}`"
+              variant="outline-primary"
+            >
+              {{ $t('btn_detail') }}
+            </b-button>
+          </router-link>
+          <b-button
+            :disabled="p.status!=2"
+            variant="primary"
+            class="btn float-right mg-2"
+          >
+            {{ $t('btn_vote') }}
           </b-button>
-        </router-link>
+        </b-card-footer>
-        <b-button
+      </b-card>
-          :disabled="p.status!=2"
+    </b-col>
-          variant="primary"
+  </b-row>
-          class="btn float-right mg-2"
-        >
-          {{ $t('btn_vote') }}
-        </b-button>
-      </b-card-footer>
-    </b-card>
-  </section>
 </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
+        <small
-          class="font-weight-bolder text-success d-none d-md-block hidden-md-down "
+          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
+        <small
-          class="font-weight-bolder text-primary hidden-sm hidden-md"
+          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>