Merge pull request #426 from alisaweb3/v3-single

Add Consensus Page(hidden), Voting Btn, Account Fetch Data, Search Modal

src/components/ProposalListItem.vue

@@ -31,7 +31,7 @@ const statusMap: Record<string, string> = {
   PROPOSAL_STATUS_REJECTED: 'REJECTED',
 };
 const voterStatusMap: Record<string, string> = {
-    No_With_Veto: '',
+  VOTE_OPTION_NO_WITH_VETO: '',
   VOTE_OPTION_YES: 'success',
   VOTE_OPTION_NO: 'error',
   VOTE_OPTION_ABSTAIN: 'warning',
@@ -81,8 +81,7 @@ const proposalInfo = ref();
                 :class="
                   statusMap?.[item?.status] === 'PASSED'
                     ? 'text-yes'
-                                        : statusMap?.[item?.status] ===
+                    : statusMap?.[item?.status] === 'REJECTED'
-                                          'REJECTED'
                     ? 'text-no'
                     : 'text-info'
                 "
@@ -92,17 +91,13 @@ const proposalInfo = ref();
                   :class="
                     statusMap?.[item?.status] === 'PASSED'
                       ? 'bg-yes'
-                                            : statusMap?.[item?.status] ===
+                      : statusMap?.[item?.status] === 'REJECTED'
-                                              'REJECTED'
                       ? 'bg-no'
                       : 'bg-info'
                   "
                 ></div>
                 <div class="text-xs">
-                                    {{
+                  {{ statusMap?.[item?.status] || item?.status }}
-                                        statusMap?.[item?.status] ||
-                                        item?.status
-                                    }}
                 </div>
               </div>
               <div
@@ -113,10 +108,7 @@ const proposalInfo = ref();
             </div>
           </td>
 
-                    <td
+          <td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
-                        v-if="statusMap?.[item?.status] === 'VOTING'"
-                        class="w-40"
-                    >
             <div class="">
               <label
                 for="vote"
@@ -127,12 +119,10 @@ const proposalInfo = ref();
                   })
                 "
               >
-                                <span v-if="item?.voterStatus">{{
+                <span v-if="item?.voterStatus !== 'VOTE_OPTION_NO_WITH_VETO'">{{
-                                    item?.voterStatus.replace(
+                  item?.voterStatus?.replace('VOTE_OPTION_', '')
-                                        'VOTE_OPTION_',
-                                        ''
-                                    )
                 }}</span>
+
                 <span v-else>Vote</span>
               </label>
             </div>
@@ -211,7 +201,7 @@ const proposalInfo = ref();
         </div>
 
         <div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
-                    <div class="" v-show="item?.voterStatus === 'No With Veto'">
+          <div class="">
             <label
               for="vote"
               class="btn btn-xs btn-primary rounded-sm"
@@ -220,33 +210,19 @@ const proposalInfo = ref();
                   proposal_id: item?.proposal_id,
                 })
               "
-                            >Vote</label
             >
-                        <div
+              <span v-if="item?.voterStatus !== 'VOTE_OPTION_NO_WITH_VETO'">{{
-                            class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
+                item?.voterStatus?.replace('VOTE_OPTION_', '')
-                            :class="`text-${
+              }}</span>
-                                voterStatusMap?.[item?.voterStatus]
+
-                            }`"
+              <span v-else>Vote</span></label
-                            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>
         </div>
       </div>
     </div>
 
-        <input
+    <input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
-            type="checkbox"
-            id="proposal-detail-modal"
-            class="modal-toggle"
-        />
     <label for="proposal-detail-modal" class="modal">
       <label class="modal-box w-11/12 max-w-5xl" for="">
         <label
@@ -258,12 +234,7 @@ const proposalInfo = ref();
         <p class="py-4">
           <Component
             v-if="proposalInfo?.content?.description"
-                        :is="
+            :is="select(proposalInfo?.content?.description, 'horizontal')"
-                            select(
-                                proposalInfo?.content?.description,
-                                'horizontal'
-                            )
-                        "
             :value="proposalInfo?.content?.description"
           >
           </Component>

src/layouts/components/DefaultLayout.vue

@@ -5,6 +5,7 @@ import { ref } from 'vue';
 // Components
 import newFooter from '@/layouts/components/NavFooter.vue';
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
+import NavbarSearch from '@/layouts/components/NavbarSearch.vue';
 import ChainProfile from '@/layouts/components/ChainProfile.vue';
 
 import { useDashboard } from '@/stores/useDashboard';
@@ -282,7 +283,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
         <!-- <NavSearchBar />-->
         <NavBarI18n class="hidden md:!inline-block" />
         <NavbarThemeSwitcher class="!inline-block" />
-
+        <NavbarSearch class="!inline-block" />
         <NavBarWallet />
       </div>
 

src/layouts/components/NavbarSearch.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useBlockchain } from '@/stores';
+const vueRouters = useRouter();
+const blockStore = useBlockchain();
+let searchModalShow = ref(false);
+let searchQuery = ref('');
+let errorMessage = ref('');
+onMounted(() => {});
+
+function closeSearchModal() {
+  searchModalShow.value = false;
+}
+function openSearchModal() {
+  searchModalShow.value = true;
+}
+
+function preventClick(event: any) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function confirm() {
+  errorMessage.value = '';
+  const key = searchQuery.value;
+  if (!key) {
+    errorMessage.value = 'Please enter a value!';
+    return;
+  }
+  const height = /^\d+$/;
+  const txhash = /^[A-Z\d]{64}$/;
+  const addr = /^[a-z]+1[a-z\d]{38,58}$/;
+
+  const current = blockStore?.current?.chainName || '';
+  const routeParams = vueRouters?.currentRoute?.value;
+
+  if (!Object.values(routeParams?.params).includes(key)) {
+    if (height.test(key)) {
+      vueRouters.push({ path: `/${current}/block/${key}` });
+      setTimeout(() => {
+        closeSearchModal();
+      }, 1000);
+    } else if (txhash.test(key)) {
+      vueRouters.push({ path: `/${current}/tx/${key}` });
+      setTimeout(() => {
+        closeSearchModal();
+      }, 1000);
+      //     this.$router.push({ name: 'transaction', params: { chain: c.chain_name, hash: key } })
+    } else if (addr.test(key)) {
+      vueRouters.push({ path: `/${current}/account/${key}` });
+      setTimeout(() => {
+        closeSearchModal();
+      }, 1000);
+    } else {
+      errorMessage.value = 'The input not recognized';
+    }
+  }
+}
+</script>
+<template>
+  <div>
+    <button
+      class="btn btn-ghost btn-circle btn-sm mx-1"
+      @click="openSearchModal"
+    >
+      <Icon
+        icon="mdi:magnify"
+        class="text-2xl text-gray-500 dark:text-gray-400"
+      />
+    </button>
+
+    <!-- modal -->
+    <div
+      v-if="searchModalShow"
+      class="cursor-pointer modal !pointer-events-auto !opacity-100 !visible"
+      @click="closeSearchModal"
+    >
+      <div
+        class="relative modal-box cursor-default"
+        @click="(event) => preventClick(event)"
+      >
+        <!-- header -->
+        <div class="flex items-center justify-between">
+          <div
+            class="text-lg font-bold flex flex-col md:!flex-row justify-between items-baseline"
+          >
+            <span class="mr-2">Search</span>
+            <span class="capitalize text-sm md:!text-base"
+              >Height/Transaction/Account Address</span
+            >
+          </div>
+          <label
+            htmlFor="modal-pool-modal"
+            class="cursor-pointer"
+            @click="closeSearchModal"
+          >
+            <Icon
+              icon="zondicons:close-outline"
+              class="text-2xl text-gray-500 dark:text-gray-400"
+            />
+          </label>
+        </div>
+        <!-- body -->
+        <div class="mt-4">
+          <div class="">
+            <input
+              class="input flex-1 w-full !input-bordered"
+              v-model="searchQuery"
+              placeholder="Height/Transaction/Account Address"
+            />
+            <div
+              class="mt-2 text-right text-sm text-error"
+              v-show="errorMessage"
+            >
+              {{ errorMessage }}
+            </div>
+          </div>
+        </div>
+        <!-- foot -->
+        <div class="mt-6">
+          <button class="w-full btn btn-primary" @click="confirm">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/modules/[chain]/account/[address].vue

@@ -8,6 +8,7 @@ import {
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import DonutChart from '@/components/charts/DonutChart.vue';
 import { computed, ref } from '@vue/reactivity';
+import { onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import 'vue-json-pretty/lib/styles.css';
 import type {
@@ -33,7 +34,9 @@ const balances = ref([] as Coin[]);
 const unbonding = ref([] as UnbondingResponses[]);
 const unbondingTotal = ref(0);
 const chart = {};
-
+onMounted(() => {
+  loadAccount(props.address);
+});
 const totalAmountByCategory = computed(() => {
   let sumDel = 0;
   delegations.value?.forEach((x) => {
@@ -88,7 +91,6 @@ function loadAccount(address: string) {
   });
 }
 
-
 function updateEvent() {
   loadAccount(props.address);
 }
@@ -141,9 +143,13 @@ function updateEvent() {
               for="transfer"
               class="btn btn-primary btn-sm"
               @click="
-                dialog.open('transfer', {
+                dialog.open(
+                  'transfer',
+                  {
                     chain_name: blockchain.current?.prettyName,
-                }, updateEvent)
+                  },
+                  updateEvent
+                )
               "
               >transfer</label
             >
@@ -355,9 +361,13 @@ function updateEvent() {
                     for="delegate"
                     class="btn btn-primary btn-xs mr-2"
                     @click="
-                      dialog.open('delegate', {
+                      dialog.open(
+                        'delegate',
+                        {
                           validator_address: v.delegation.validator_address,
-                      }, updateEvent)
+                        },
+                        updateEvent
+                      )
                     "
                     >delegate</label
                   >
@@ -365,9 +375,13 @@ function updateEvent() {
                     for="redelegate"
                     class="btn btn-primary btn-xs mr-2"
                     @click="
-                      dialog.open('redelegate', {
+                      dialog.open(
+                        'redelegate',
+                        {
                           validator_address: v.delegation.validator_address,
-                      }, updateEvent)
+                        },
+                        updateEvent
+                      )
                     "
                     >Redelegate</label
                   >
@@ -375,9 +389,13 @@ function updateEvent() {
                     for="unbond"
                     class="btn btn-primary btn-xs"
                     @click="
-                      dialog.open('unbond', {
+                      dialog.open(
+                        'unbond',
+                        {
                           validator_address: v.delegation.validator_address,
-                      }, updateEvent)
+                        },
+                        updateEvent
+                      )
                     "
                     >Unbond</label
                   >

src/modules/[chain]/consensus/index.vue

@@ -0,0 +1,327 @@
+<script lang="ts" setup>
+import fetch from 'cross-fetch';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
+import {
+  useBlockchain,
+  useFormatter,
+  useDashboard,
+  useStakingStore,
+} from '@/stores';
+const format = useFormatter();
+const chainStore = useBlockchain();
+const dashboard = useDashboard();
+const stakingStore = useStakingStore();
+import { consensusPubkeyToHexAddress } from '@/libs';
+const rpcList = ref(
+  chainStore.current?.endpoints?.rpc || [{ address: '', provider: '' }]
+);
+let rpc = ref('');
+const validators = ref(stakingStore.validators);
+
+let httpstatus = ref(200);
+let httpStatusText = ref('');
+let roundState = ref({} as any);
+let rate = ref('');
+let height = ref('');
+let round = ref('');
+let step = ref('');
+let timer = null;
+let updatetime = ref(new Date());
+let positions = ref([]);
+onMounted(() => {
+  stakingStore.init();
+  rpc.value = rpcList.value[0].address + '/consensus_state';
+  fetchPosition();
+  update();
+  timer = setInterval(() => {
+    update();
+  }, 6000);
+});
+onUnmounted(() => {
+  timer = null;
+});
+
+const newTime = computed(() => {
+  return format.toDay(updatetime.value || '', 'time');
+});
+
+const vals = computed(() => {
+  return validators.value.map((x) => {
+    const x2 = x;
+    x2.hex = consensusPubkeyToHexAddress(x.consensus_pubkey);
+    return x2;
+  });
+});
+
+function showName(i, text) {
+  if (text === 'nil-Vote') {
+    if (positions.value?.[i]?.address) {
+      const val = vals.value.find(
+        (x) => x.hex === positions.value?.[i]?.address
+      );
+      return val?.description?.moniker || i;
+    }
+    return i;
+  }
+  const txt = text.substring(text.indexOf(':') + 1, text.indexOf(' '));
+  const sig = text.split(' ');
+  const val = validators.value.find((x) => x?.hex?.startsWith(txt));
+  return `${val?.description?.moniker || txt} - ${sig[2]}`;
+}
+function color(i, txt) {
+  if (i === roundState.value?.proposer?.index) {
+    return txt === 'nil-Vote' ? 'warning' : 'primary';
+  }
+  return txt === 'nil-Vote' ? 'neutral' : 'success';
+}
+function onChange() {
+  httpstatus.value = 200;
+  httpStatusText.value = '';
+  roundState.value = {};
+  timer = null;
+  fetchPosition();
+  update();
+  timer = setInterval(() => {
+    update();
+  }, 6000);
+}
+
+async function fetchPosition() {
+  let dumpurl = rpc.value.replace('consensus_state', 'dump_consensus_state');
+  try {
+    const response = await fetch(dumpurl);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    httpstatus.value = response.status;
+    httpStatusText.value = response.statusText;
+
+    const data = await response.json();
+    positions.value = data.result.round_state.validators.validators;
+  } catch (error) {
+    httpstatus.value = error?.status || 500;
+    httpStatusText.value = error?.message || 'Error';
+  }
+}
+
+async function update() {
+  rate.value = '0%';
+  updatetime.value = new Date();
+  if (httpstatus.value === 200) {
+    fetch(rpc.value)
+      .then((data) => {
+        httpstatus.value = data.status;
+        httpStatusText.value = data.statusText;
+        return data.json();
+      })
+      .then((res) => {
+        roundState.value = res.result.round_state;
+        const raw = roundState?.value?.['height/round/step']?.split('/');
+        // eslint-disable-next-line prefer-destructuring
+        height.value = raw[0];
+        // eslint-disable-next-line prefer-destructuring
+        round.value = raw[1];
+        // eslint-disable-next-line prefer-destructuring
+        step.value = raw[2];
+
+        // find the highest onboard rate
+        roundState.value?.height_vote_set?.forEach((element) => {
+          const rates = Number(
+            element.prevotes_bit_array.substring(
+              element.prevotes_bit_array.length - 4
+            )
+          );
+          if (rates > 0) {
+            rate.value = `${(rates * 100).toFixed()}%`;
+          }
+        });
+      })
+      .catch((err) => {
+        httpstatus.value = 500;
+        httpStatusText.value = err;
+      });
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!--  -->
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+      <div class="form-control">
+        <label class="input-group input-group-md w-full flex">
+          <!-- <input
+            type="text"
+            placeholder="Button on both side"
+            class="input input-bordered input-md w-full"
+            v-model="rpc"
+          /> -->
+          <select v-model="rpc" class="select select-bordered w-full flex-1">
+            <option v-for="(item, index) in rpcList" :key="index">
+              {{ item?.address }}/consensus_state
+            </option>
+          </select>
+          <button class="btn btn-primary" @click="onChange">Monitor</button>
+        </label>
+      </div>
+      <div v-if="httpstatus !== 200" class="text-error mt-1">
+        {{ httpstatus }}: {{ httpStatusText }}
+      </div>
+    </div>
+    <!-- cards -->
+    <div class="mt-4" v-if="roundState['height/round/step']">
+      <div class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 pb-4">
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ rate }}</h4>
+            <span class="text-md">Onboard Rate</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-rose-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-error font-semibold">O</span>
+            </div>
+          </div>
+        </div>
+        <!-- Height -->
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ height }}</h4>
+            <span class="text-md">Height</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-green-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-success font-semibold">H</span>
+            </div>
+          </div>
+        </div>
+        <!-- Round -->
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ round }}</h4>
+            <span class="text-md">Round</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-violet-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-primary font-semibold">R</span>
+            </div>
+          </div>
+        </div>
+        <!-- Step -->
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ step }}</h4>
+            <span class="text-md">Step</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-blue-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-info font-semibold">S</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- update -->
+    <div
+      class="bg-base-100 p-4 rounded shadow"
+      v-if="roundState['height/round/step']"
+    >
+      <div class="flex flex-1 flex-col truncate">
+        <h2 class="text-sm card-title text-error mb-6">
+          Updated at {{ newTime || '' }}
+        </h2>
+        <div v-for="item in roundState.height_vote_set" :key="item.round">
+          <div class="text-xs mb-1">Round: {{ item.round }}</div>
+          <div class="text-xs break-words">{{ item.prevotes_bit_array }}</div>
+
+          <div class="flex flex-wrap py-6">
+            <div
+              class="badge"
+              v-for="(pre, i) in item.prevotes"
+              :key="i"
+              size="sm"
+              style="margin: 2px"
+              :class="[
+                `btn-${color(i, pre)} border-${color(i, pre)} !bg-${color(
+                  i,
+                  pre
+                )}`,
+              ]"
+            >
+              <span>{{ showName(i, pre) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <!--  -->
+      <div class="flex flex-col md:!flex-row">
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-primary px-4 w-[34px]"></button>
+          <span class="mx-1">Proposer Signed</span>
+        </div>
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-warning px-4 w-[34px]"></button>
+          <span class="mx-1">Proposer Not Signed</span>
+        </div>
+
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-success px-4 w-[34px]"></button>
+          <span class="mx-1">Signed</span>
+        </div>
+
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-neutral px-4 w-[34px]"></button>
+          <span class="mx-1">Not Signed</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- alert-info -->
+    <div
+      class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info"
+    >
+      <div
+        class="drop-shadow-md px-4 pt-2 pb-2"
+        style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px"
+      >
+        <h2 class="text-base font-semibold">Tips</h2>
+      </div>
+      <div class="px-4 py-4">
+        <ul style="list-style-type: disc" class="pl-8">
+          <li>
+            This tool is useful for validators to monitor who is onboard during
+            an upgrade
+          </li>
+          <li>
+            If you want to change the default rpc endpoint. make sure that
+            "https" and "CORS" are enabled on your server.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<!-- <route>
+  {
+    meta: {
+      i18n: 'consensus',
+    }
+  }
+</route> -->

src/plugins/i18n/locales/cn.json

@@ -5,7 +5,8 @@
     "staking": "质押生息",
     "governance": "社区治理",
     "parameters": "参数",
-    "uptime": "状态"
+    "uptime": "状态",
+    "consensus": "Consensus"
   },
   "index": {
     "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",

src/plugins/i18n/locales/en.json

@@ -9,7 +9,8 @@
     "state-sync": "State Sync",
     "cosmwasm": "Cosmwasm",
     "widget": "Widgets",
-    "ibc": "IBC"
+    "ibc": "IBC",
+    "consensus": "Consensus"
   },
   "index": {
     "slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",

src/stores/useBlockchain.ts

@@ -35,6 +35,7 @@ export const useBlockchain = defineStore('blockchain', {
   },
   getters: {
     current(): ChainConfig | undefined {
+      console.log(this.dashboard.chains[this.chainName], 'jljfkj')
       return this.dashboard.chains[this.chainName];
     },
     logo(): string {

src/stores/useGovStore.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { useBlockchain } from './useBlockchain';
 import type { PageRequest, PaginatedProposals } from '@/types';
 import { LoadingStatus } from './useDashboard';
-import { useWalletStore } from './useWalletStore'
+import { useWalletStore } from './useWalletStore';
 import { reactive } from 'vue';
 
 export const useGovStore = defineStore('govStore', {
@@ -23,13 +23,13 @@ export const useGovStore = defineStore('govStore', {
     },
     walletstore() {
       return useWalletStore();
-    }
+    },
   },
   actions: {
     initial() {
-      this.$reset()
+      this.$reset();
       this.fetchParams();
-      this.fetchProposals("2");
+      this.fetchProposals('2');
     },
     async fetchProposals(status: string, pagination?: PageRequest) {
       //if (!this.loading[status]) {
@@ -44,14 +44,22 @@ export const useGovStore = defineStore('govStore', {
           });
           if (this.walletstore.currentAddress) {
             try {
-                this.fetchProposalVotesVoter(item.proposal_id, this.walletstore.currentAddress).then((res) => {
+              this.fetchProposalVotesVoter(
-                  item.voterStatus = res?.vote?.option || 'No With Veto'
+                item.proposal_id,
+                this.walletstore.currentAddress
+              )
+                .then((res) => {
+                  item.voterStatus = res?.vote?.option || 'VOTE_OPTION_NO_WITH_VETO'
+                  // 'No With Veto';
+                })
+                .catch((reject) => {
+                  item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
                 });
             } catch (error) {
-                item.voterStatus = 'No With Veto'
+              item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
             }
           } else {
-              item.voterStatus = 'No With Veto'
+            item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
           }
         });
       }

src/types/gov.ts

@@ -1,79 +1,83 @@
-
+import type { Coin, PaginatedResponse } from './common';
-import type { Coin, PaginatedResponse } from "./common"
 
 export interface GovParams {
-    "voting_params": {
+  voting_params: {
-        "voting_period": string,
+    voting_period: string;
-        "proposal_voting_periods": any[],
+    proposal_voting_periods: any[];
-        "expedited_voting_period": string
+    expedited_voting_period: string;
-    },
+  };
-    "deposit_params": {
+  deposit_params: {
-        "min_deposit": Coin[],
+    min_deposit: Coin[];
-        "max_deposit_period": string,
+    max_deposit_period: string;
-        "min_expedited_deposit": Coin[],
+    min_expedited_deposit: Coin[];
-        "min_initial_deposit_ratio": string
+    min_initial_deposit_ratio: string;
-    },
+  };
-    "tally_params": {
+  tally_params: {
-        "quorum": string,
+    quorum: string;
-        "threshold": string,
+    threshold: string;
-        "veto_threshold": string,
+    veto_threshold: string;
-        "expedited_threshold": string
+    expedited_threshold: string;
-    }
+  };
 }
 
 export interface GovProposal {
-    "proposal_id": string,
+  proposal_id: string;
-    "content": {
+  content: {
-        "@type": string,
+    '@type': string;
-        "title": string,
+    title: string;
-        "description": string,
+    description: string;
-        "plan"?: { 
+    plan?: {
-            'height'?: string | number,
+      height?: string | number;
-            'time'?: string | number,
+      time?: string | number;
-        }
+    };
-    },
+  };
-    "status": string,
+  status: string;
-    "final_tally_result": {
+  final_tally_result: {
-        "yes": string,
+    yes: string;
-        "abstain": string,
+    abstain: string;
-        "no": string,
+    no: string;
-        "no_with_veto": string,
+    no_with_veto: string;
-    },
+  };
-    "submit_time": string,
+  submit_time: string;
-    "deposit_end_time": string,
+  deposit_end_time: string;
-    "total_deposit": Coin[],
+  total_deposit: Coin[];
-    "voting_start_time": string,
+  voting_start_time: string;
-    "voting_end_time": string,
+  voting_end_time: string;
-    "is_expedited": boolean,
+  is_expedited: boolean;
-    "voterStatus"?: string,
+  voterStatus?: string
+//   VoteOption[];
 }
 
+export interface VoteOption {
+  option: string;
+  weight: string;
+}
 export interface Tally {
-    yes: string,
+  yes: string;
-    abstain: string,
+  abstain: string;
-    no: string,
+  no: string;
-    no_with_veto: string
+  no_with_veto: string;
 }
 
 export interface GovVote {
-    proposal_id: string,
+  proposal_id: string;
-    voter: string,
+  voter: string;
-    option: string,
+  option: string;
-    options: { "option": string, "weight": string }[]
+  options: { option: string; weight: string }[];
 }
 
 export interface PaginatedProposals extends PaginatedResponse {
-    proposals: GovProposal[]
+  proposals: GovProposal[];
 }
 
 export interface PaginatedProposalDeposit extends PaginatedResponse {
   deposits: {
-        amount: Coin[],
+    amount: Coin[];
-        proposal_id: string,
+    proposal_id: string;
-        depositor: string
+    depositor: string;
-    }
+  };
 }
 
 export interface PaginatedProposalVotes extends PaginatedResponse {
-    votes: GovVote[]
+  votes: GovVote[];
 }