add gov

src/components/ProposalListItem.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import MdEditor from 'md-editor-v3';
+import { useFormatter, useStakingStore } from '@/stores';
+import type { GovProposal, PaginatedProposals } from '@/types';
+import ProposalProcess from './ProposalProcess.vue';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  proposals: { type: Object as PropType<PaginatedProposals>},
+})
+// const list = computed(()=> proposl)
+const format = useFormatter()
+const staking = useStakingStore()
+</script>
+<template>
+    <VExpansionPanels variant="accordion">
+            <VExpansionPanel v-for="(x, i) in proposals?.proposals">
+              <VExpansionPanelTitle disable-icon-rotate>
+                    <VChip label color="primary" class="mr-2">{{x.proposal_id}}</VChip>
+                    <div class="w-100">{{ x.content?.title }}
+                      <div class="d-flex mt-1">
+                        <small class="text-secondary me-auto"> {{ format.toDay(x.voting_end_time, 'from') }}</small>      
+                        <ProposalProcess style="width:300px;" :pool="staking.pool" :tally="x.final_tally_result"></ProposalProcess> 
+                        <span></span>
+                      </div>              
+                    </div>
+                <template #actions>    
+                  <VIcon
+                    v-if="x.status === 'PROPOSAL_STATUS_PASSED'"
+                    icon="mdi-check"
+                    color="success"
+                    class="ml-2"
+                  />
+                  <VIcon
+                    v-if="x.status === 'PROPOSAL_STATUS_REJECTED'"
+                    icon="mdi-multiply"
+                    color="error"
+                    class="ml-2"
+                  />
+                </template>
+              </VExpansionPanelTitle>
+              <VExpansionPanelText>
+                <VCard class="card-box">         
+                  <VCardText>
+                    {{ x.final_tally_result }}
+                    <MdEditor :model-value="format.multiLine(x.content?.description)" previewOnly></MdEditor> 
+                  </VCardText>
+                  <div class="text-center w-100 my-2">
+                    <VBtn color="primary" variant="flat">Vote</VBtn>
+                  </div>
+                </VCard>
+              </VExpansionPanelText>
+            </VExpansionPanel>
+          </VExpansionPanels>    
+</template>

src/components/ProposalProcess.vue

@@ -24,10 +24,10 @@ const veto = computed(() => (format.calculatePercent(props.tally?.no_with_veto,
 </script>
 <template>
 <div class="progress">
-  <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
+  <div class="progress-bar bg-success" :style="`width: ${yes}`"> {{ yes }}</div>
-  <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
+  <div class="progress-bar bg-error" :style="`width: ${no}`">{{ no }} </div>
-  <div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"></div>
+  <div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"> {{ veto }} </div>
-  <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
+  <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"> </div>
 </div>
 </template>
 <style scoped>

src/components/dynamic/DynamicComponent.vue

@@ -4,8 +4,8 @@ import TextElement from './TextElement.vue'
 import ObjectElement from './ObjectElement.vue'
 import { select } from './index'
 
-const props = defineProps(["value"]);
+const props = defineProps(["value", "direct"]);
 </script>
 <template>
-    <Component :is="select(value)" :value="value"></Component>
+    <Component :is="select(value, direct)" :value="value"></Component>
 </template>

src/layouts/components/ChainProfile.vue

@@ -4,6 +4,11 @@ import { useBlockchain, useBaseStore } from '@/stores';
 const chainStore = useBlockchain()
 const baseStore = useBaseStore()
 chainStore.initial()
+chainStore.$subscribe((m, s) => {
+  if(!Array.isArray(m.events) && m.events.key === 'endpoint') {
+    chainStore.initial()
+  }
+})
 </script>
 
 <template>

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

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useGovStore } from '@/stores';
+import ProposalListItem from '@/components/ProposalListItem.vue';
+
+const tab = ref("")
+const store = useGovStore()
+store.fetchProposals("2")
+</script>
+<template>
+    <div>
+        <VTabs v-model="tab">
+            <VTab value="2">Voting</VTab>
+            <VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
+            <VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
+        </VTabs>
+        <VWindow v-model="tab" class="mt-5">
+            <VWindowItem value="2">
+                <ProposalListItem :proposals="store.proposals['2']"/>
+            </VWindowItem>  
+
+            <VWindowItem value="3">
+                <ProposalListItem :proposals="store.proposals['3']"/>
+            </VWindowItem>
+
+            <VWindowItem value="4">
+                <ProposalListItem :proposals="store.proposals['4']"/>
+            </VWindowItem>
+        </VWindow>
+    </div>
+</template>
+<route>
+    {
+      meta: {
+        i18n: 'governance'
+      }
+    }
+  </route>

src/modules/[chain]/index.vue

@@ -8,7 +8,7 @@ import { useIndexModule } from './indexStore';
 import { computed } from '@vue/reactivity';
 
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
-import ProposalProcess from '@/components/ProposalProcess.vue';
+import ProposalListItem from '@/components/ProposalListItem.vue';
 
 const blockchain = useBlockchain()
 const store = useIndexModule()
@@ -143,37 +143,7 @@ function shortName(name: string, id: string) {
           <VCardTitle>Active Proposals</VCardTitle>
         </VCardItem>
         <VCardItem>
-          <VExpansionPanels variant="accordion">
+          <ProposalListItem :proposals="store.proposals"/>      
-            <VExpansionPanel v-for="(x, i) in store.proposals">
-              <VExpansionPanelTitle disable-icon-rotate>
-                    <VChip label color="primary" class="mr-2">{{x.proposal_id}}</VChip>
-                    <div class="w-100">{{ x.content?.title }}
-                      <div class="d-flex mt-1">
-                        <small class="text-secondary me-auto"> {{ format.toDay(x.voting_end_time, 'from') }}</small>      
-                        <ProposalProcess style="width:300px;" :pool="store.pool" :tally="store.tally[x.proposal_id]"></ProposalProcess> 
-                        <span></span>
-                      </div>              
-                    </div>
-                <template #actions>    
-                  <VIcon
-                    icon="mdi-check"
-                    color="success"
-                    class="ml-2"
-                  />
-                </template>
-              </VExpansionPanelTitle>
-              <VExpansionPanelText>
-                <VCard class="card-box">         
-                  <VCardText>
-                    <MdEditor :model-value="x.content?.description" previewOnly></MdEditor> 
-                  </VCardText>
-                  <div class="text-center w-100 my-2">
-                    <VBtn color="primary" variant="flat">Vote</VBtn>
-                  </div>
-                </VCard>
-              </VExpansionPanelText>
-            </VExpansionPanel>
-          </VExpansionPanels>          
         </VCardItem>   
         <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
     </VCard>

src/modules/[chain]/indexStore.ts

@@ -2,7 +2,7 @@ import { useBlockchain, useCoingecko, useBaseStore, useBankStore, useFormatter,
 import { useDistributionStore } from "@/stores/useDistributionStore";
 import { useMintStore } from "@/stores/useMintStore";
 import { useStakingStore } from "@/stores/useStakingStore";
-import type { GovProposal, Tally } from "@/types";
+import type { GovProposal, PaginatedProposals, Tally } from "@/types";
 import numeral from "numeral";
 import { defineStore } from "pinia";
 
@@ -65,7 +65,7 @@ export const useIndexModule = defineStore('module-index', {
                 total_volumes: [] as number[],
             },
             communityPool: [] as {amount: string, denom: string}[],
-            proposals: [] as GovProposal[],
+            proposals: {} as PaginatedProposals,
             tally: {} as Record<string, Tally>
         }
     },
@@ -187,14 +187,8 @@ export const useIndexModule = defineStore('module-index', {
                 }))
             })
             const gov = useGovStore()
-            gov.fetchProposals(2).then(x => {
+            gov.fetchProposals("2").then(x => {
-                this.proposals = x.proposals
+                this.proposals = x
-                x.proposals.forEach(x1 => {
-                    gov.fetchTally(x1.proposal_id).then(t => {
-                        console.log("log: ", t)
-                        if(t.tally) this.tally[x1.proposal_id] = t.tally
-                    })
-                })
             })
         },
         tickerColor(color: string) {

src/modules/[chain]/test.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>Hello module</div>
-</template>

src/modules/[chain]/tx/[hash].vue

@@ -48,7 +48,7 @@ const messages = computed(() => {
                     <div><DynamicComponent :value="msg" /></div>                  
                 </div>
                 <div v-if="messages.length === 0">
-                    <VIcon icon="mdi-empty"/>
+                    No messages
                 </div>
             </VCardItem>
         </VCard>

src/plugins/pinia/dashboardPlugin.ts

@@ -1,10 +0,0 @@
-import type { PiniaPluginContext } from "pinia"
-
-export function DashboardPlugin(context: PiniaPluginContext) {
-    context.pinia // the pinia created with `createPinia()`
-    context.app // the current app created with `createApp()` (Vue 3 only)
-    context.store // the store the plugin is augmenting
-    context.options // the options object defining the store passed to `defineStore()`
-    // ...
-    context.store.$subscribe((m, s) => console.log(m, s))
-}

src/stores/useFormatter.ts

@@ -151,7 +151,10 @@ export const useFormatter = defineStore('formatter', {
                   })
                   return output.join(', ')
             }
-        },                 
+        },
+        multiLine(v: string) {
+            return v? v.replaceAll("\\n","\n"): ""
+        }                 
     }
 })
 

src/stores/useGovStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { useBlockchain } from "./useBlockchain";
-import type { PageRequest } from "@/types";
+import type { PageRequest, PaginatedProposals } from "@/types";
+import { LoadingStatus } from "./useDashboard";
 
 export const useGovStore = defineStore('govStore', {
     state: () => {
@@ -9,7 +10,9 @@ export const useGovStore = defineStore('govStore', {
                 deposit: {},
                 voting: {},
                 tally: {},
-            }
+            },
+            proposals: {} as Record<string, PaginatedProposals>,
+            loading: {} as Record<string, LoadingStatus>
         }
     },
     getters: {
@@ -22,8 +25,22 @@ export const useGovStore = defineStore('govStore', {
             this.fetchParams()
         },
         async fetchProposals( status: string, pagination?: PageRequest ) {
-            const proposals = await this.blockchain.rpc.getGovProposals(status)
+            if(!this.loading[status]) {
-            return proposals
+                this.loading[status] = LoadingStatus.Loading
+                const proposals = await this.blockchain.rpc.getGovProposals(status)
+                this.loading[status] = LoadingStatus.Loaded
+                this.proposals[status] = proposals
+
+            if(status === '2') {
+                proposals.proposals.forEach(x1 => {
+                    this.fetchTally(x1.proposal_id).then(t => {
+                        x1.final_tally_result = t.tally
+                        this.proposals[status] = proposals 
+                    })
+                })
+            }
+            }
+            return this.proposals[status]
         },
         async fetchParams() {
             // this.blockchain.rpc.getGovParamsDeposit().then(x => {

src/types/common.ts

@@ -3,6 +3,12 @@ export interface Key {
     "key": string,
 }
 
+export enum LoadingStatus {
+    UNLOADED,
+    LOADING,
+    LOADED,
+}
+
 export interface Pagination {
     key?: string;
     total?: string;

tsconfig.json

@@ -3,7 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
     "lib": [      
-      "es2017",
+      "es2022",
       "dom"
     ],
     "baseUrl": ".",