zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

add gov

Browse Source
This commit is contained in:
liangping 2023-04-07 10:11:48 +08:00
parent 8c31935432
commit d3a7c6f176
14 changed files with 142 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/ProposalListItem.vue Normal file
View File

@ -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>

8
src/components/ProposalProcess.vue
View File

@ -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-error" :style="`width: ${no}`"></div>
<div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"></div>
<div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
<div class="progress-bar bg-success" :style="`width: ${yes}`"> {{ yes }}</div>
<div class="progress-bar bg-error" :style="`width: ${no}`">{{ no }} </div>
<div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"> {{ veto }} </div>
<div class="progress-bar bg-secondary" :style="`width: ${abstain}`"> </div>
</div>
</template>
<style scoped>

4
src/components/dynamic/DynamicComponent.vue
View File

@ -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>

5
src/layouts/components/ChainProfile.vue
View File

@ -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>

37
src/modules/[chain]/gov/index.vue Normal file
View File

@ -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>

34
src/modules/[chain]/index.vue
View File

@ -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">
<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>
<ProposalListItem :proposals="store.proposals"/>
</VCardItem>
<VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
</VCard>

14
src/modules/[chain]/indexStore.ts
View File

@ -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 => {
this.proposals = x.proposals
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
})
})
gov.fetchProposals("2").then(x => {
this.proposals = x
})
},
tickerColor(color: string) {

3
src/modules/[chain]/test.vue
View File

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

2
src/modules/[chain]/tx/[hash].vue
View File

@ -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>

10
src/plugins/pinia/dashboardPlugin.ts
View File

@ -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))
}

3
src/stores/useFormatter.ts
View File

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

23
src/stores/useGovStore.ts
View File

@ -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 ) {
if(!this.loading[status]) {
this.loading[status] = LoadingStatus.Loading
const proposals = await this.blockchain.rpc.getGovProposals(status)
return proposals
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 => {

6
src/types/common.ts
View File

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

2
tsconfig.json
View File

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