improve

src/components/ProposalListItem.vue

@@ -115,19 +115,11 @@ const proposalInfo = ref();
                 for="vote"
                 class="btn btn-xs btn-primary rounded-sm"
                 @click="dialog.open('vote', { proposal_id: item?.proposal_id })"
-                >Vote</label
+                >
+                  <span v-if="item?.voterStatus">{{ item?.voterStatus.replace("VOTE_OPTION_", "")}}</span>  
+                  <span v-else>Vote</span>
+                </label
               >
-              <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
-                :class="`text-${voterStatusMap?.[item?.voterStatus]}`"
-                v-show="item?.voterStatus !== 'No With Veto'"
-              >
-                <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute"
-                  :class="`bg-${voterStatusMap?.[item?.voterStatus]}`"
-                ></span>
-                {{ item?.voterStatus }}
-              </div>
             </div>
           </td>
         </tr>

src/modules/[chain]/gov/[proposal_id].vue

@@ -18,12 +18,14 @@ PageRequest,
 import { ref, reactive } from 'vue';
 import Countdown from '@/components/Countdown.vue';
 import PaginationBar from '@/components/PaginationBar.vue'
+import { fromBech32, toHex } from '@cosmjs/encoding';
 
 const props = defineProps(['proposal_id', 'chain']);
 const proposal = ref({} as GovProposal);
 const format = useFormatter();
 const store = useGovStore();
 const dialog = useTxDialog();
+const stakingStore = useStakingStore();
 
 store.fetchProposal(props.proposal_id).then((res) => {
   const proposalDetail = reactive(res.proposal);
@@ -102,7 +104,7 @@ const total = computed(() => {
 
 const turnout = computed(() => {
   if (total.value > 0) {
-    const bonded = useStakingStore().pool?.bonded_tokens || '1';
+    const bonded = stakingStore.pool?.bonded_tokens || '1';
     return format.percent(total.value / Number(bonded));
   }
   return 0;
@@ -149,6 +151,13 @@ const processList = computed(() => {
   ];
 });
 
+function showValidatorName(voter: string) {
+  const {data} = fromBech32(voter)
+  const hex = toHex(data)
+  const v = stakingStore.validators.find( x => toHex(fromBech32(x.operator_address).data) === hex)
+  return v? v.description.moniker : voter
+}
+
 function pageload(p: number) {
   pageRequest.value.setPage(p)
   store
@@ -324,7 +333,7 @@ function pageload(p: number) {
         <table class="table w-full table-zebra">
           <tbody>
             <tr v-for="(item, index) of votes" :key="index">
-              <td class="py-2 text-sm">{{ item.voter }}</td>
+              <td class="py-2 text-sm">{{ showValidatorName(item.voter) }}</td>
               <td
                 class="py-2 text-sm"
                 :class="{
@@ -332,7 +341,7 @@ function pageload(p: number) {
                   'text-gray-400': item.option === 'VOTE_OPTION_ABSTAIN',
                 }"
               >
-                {{ item.option }}
+                {{ String(item.option).replace("VOTE_OPTION_", "") }}
               </td>
             </tr>
           </tbody>

src/modules/[chain]/index.vue

@@ -267,9 +267,7 @@ const color = computed(() => {
             {{ format.formatToken(walletStore.balanceOfStakingToken) }}
           </div>
           <div class="text-sm" :class="color">
-            <span class="ml-1">
-              ${{ format.tokenValue(walletStore.balanceOfStakingToken) }}
-            </span>
+            ${{ format.tokenValue(walletStore.balanceOfStakingToken) }}
           </div>
         </div>
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">

src/stores/useDashboard.ts

@@ -265,7 +265,7 @@ export const useDashboard = defineStore('dashboard', {
       favorite: fav as string[],
       favoriteMap: favMap as Record<string, boolean>,
       chains: {} as Record<string, ChainConfig>,
-      prices: {},
+      prices: {} as Record<string, any>,
       coingecko: {} as Record<string, {coinId: string, exponent: number, symbol: string}>,
     };
   },

src/stores/useFormatter.ts

@@ -69,7 +69,7 @@ export const useFormatter = defineStore('formatter', {
       return trace;
     },
     priceInfo(denom: string) {
-      const id = this.dashboard.coingecko[denom]?.coinId;
+      const id = this.dashboard.coingecko[denom]?.coinId || "";
       const prices = this.dashboard.prices[id];
       return prices;
     },
@@ -96,7 +96,10 @@ export const useFormatter = defineStore('formatter', {
       return v!==0 ? numeral(v).format("+0,0.[00]"): ""
     },
     tokenValue(token?: Coin) {
-      return token ? numeral(this.formatTokenAmount(token)).format('0,0.[00]') : ""
+      if(token) {
+        return numeral(this.tokenValueNumber(token)).format("0,0.[00]")
+      }
+      return ""
     },
     tokenValueNumber(token?: Coin) {
       if(!token) return 0
@@ -129,7 +132,7 @@ export const useFormatter = defineStore('formatter', {
     formatToken(
       token?: { denom: string; amount: string },
       withDenom = true,
-      fmt = '0.0a',
+      fmt = '0,0.[0]',
       mode = 'local'
     ): string {
       if (token && token.amount && token?.denom) {

src/stores/useWalletStore.ts

@@ -42,8 +42,9 @@ export const useWalletStore = defineStore('walletStore', {
       );
     },
     stakingAmount() {
+      const stakingStore = useStakingStore();
       let amt = 0;
-      let denom = '';
+      let denom = stakingStore.params.bond_denom;
       this.delegations.forEach((i) => {
         amt += Number(i.balance.amount);
         denom = i.balance.denom;