cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dashboard Dashboard Community Pool Content exceeds

Browse Source
This commit is contained in:
alisa 2023-04-25 21:02:58 +08:00
parent 6bbe2b2c61
commit 674810d513
6 changed files with 263 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dashboard/src/components/ProposalProcess.vue
View File

@ -37,10 +37,7 @@ const veto = computed(() =>
<div class="progress"> <div class="progress">
<div class="progress-bar bg-success" :style="`width: ${yes}`"></div> <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
<div class="progress-bar bg-error" :style="`width: ${no}`"></div> <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
<div <div class="progress-bar bg-[#B71C1C]" :style="`width: ${veto};`"></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-secondary" :style="`width: ${abstain}`"></div>
</div> </div>
</template> </template>

247
packages/dashboard/src/modules/[chain]/index.vue
View File

@ -1,40 +1,45 @@
<script lang="ts" setup> <script lang="ts" setup>
import MdEditor from 'md-editor-v3'; import MdEditor from "md-editor-v3";
import PriceMarketChart from '@/components/charts/PriceMarketChart.vue' import PriceMarketChart from "@/components/charts/PriceMarketChart.vue";
import { useBlockchain, useFormatter } from '@/stores'; import { useBlockchain, useFormatter } from "@/stores";
import { onMounted, ref } from 'vue'; import { onMounted, ref } from "vue";
import { useIndexModule } from './indexStore'; import { useIndexModule } from "./indexStore";
import { computed } from '@vue/reactivity'; import { computed } from "@vue/reactivity";
import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue'; import CardStatisticsVertical from "@/components/CardStatisticsVertical.vue";
import ProposalProcess from '@/components/ProposalProcess.vue'; import ProposalProcess from "@/components/ProposalProcess.vue";
const blockchain = useBlockchain() const blockchain = useBlockchain();
const store = useIndexModule() const store = useIndexModule();
const coinInfo = computed(() => { const coinInfo = computed(() => {
return store.coinInfo return store.coinInfo;
}) });
onMounted(() => { onMounted(() => {
store.loadDashboard() store.loadDashboard();
}) });
const format = useFormatter() const format = useFormatter();
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]) const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
blockchain.$subscribe((m, s) => { blockchain.$subscribe((m, s) => {
console.log('index:', m) console.log("index:", m);
if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) { if (
console.log(m.events.key) !Array.isArray(m.events) &&
store.loadDashboard() ["chainName", "endpoint"].includes(m.events.key)
) {
console.log(m.events.key);
store.loadDashboard();
} }
}) });
function shortName(name: string, id: string) { function shortName(name: string, id: string) {
return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id: name return name.toLowerCase().startsWith("ibc/") ||
name.toLowerCase().startsWith("0x")
? id
: name;
} }
</script> </script>
<template> <template>
@ -44,58 +49,97 @@ function shortName(name: string, id: string) {
<VCol md="5"> <VCol md="5">
<VCardItem> <VCardItem>
<VCardTitle> <VCardTitle>
{{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>) {{ coinInfo.name }} (<span class="text-uppercase">{{
coinInfo.symbol
}}</span
>)
</VCardTitle> </VCardTitle>
<VCardSubtitle> <VCardSubtitle>
Rank: <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip> Rank:
<VChip color="error" size="x-small"
>#{{ coinInfo.market_cap_rank }}</VChip
>
</VCardSubtitle> </VCardSubtitle>
</VCardItem> </VCardItem>
<VDivider/> <VDivider />
<VCardItem> <VCardItem>
<VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">Website</VBtn> <VBtn
<VBtn variant="text" size="small" :href="store.twitter" prependIcon="mdi-twitter">Twitter</VBtn> variant="text"
<VBtn variant="text" size="small" :href="store.telegram" prependIcon="mdi-telegram">Telegram</VBtn> size="small"
<VBtn variant="text" size="small" :href="store.github" prependIcon="mdi-github">Github</VBtn> :href="store.homepage"
prependIcon="mdi-web"
>Website</VBtn
>
<VBtn
variant="text"
size="small"
:href="store.twitter"
prependIcon="mdi-twitter"
>Twitter</VBtn
>
<VBtn
variant="text"
size="small"
:href="store.telegram"
prependIcon="mdi-telegram"
>Telegram</VBtn
>
<VBtn
variant="text"
size="small"
:href="store.github"
prependIcon="mdi-github"
>Github</VBtn
>
</VCardItem> </VCardItem>
<VCardItem> <VCardItem>
<!-- SECTION upgrade plan banner --> <!-- SECTION upgrade plan banner -->
<div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"> <div
<h3 class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
class="plan-details me-3" >
:class="store.priceColor" <h3 class="plan-details me-3" :class="store.priceColor">
>
{{ store.priceChange }}<small>%</small> {{ store.priceChange }}<small>%</small>
</h3> </h3>
<VMenu open-on-hover> <VMenu open-on-hover>
<template #activator="{ props }"> <template #activator="{ props }">
<div class="d-flex flex-column align-start" v-bind="props"> <div class="d-flex flex-column align-start" v-bind="props">
<h3 class="text-base font-weight-semibold"> <h3 class="text-base font-weight-semibold">
{{ ticker?.market?.name || ''}} {{ ticker?.market?.name || "" }}
</h3> </h3>
<span class="text-primary text-xs">{{ shortName(ticker?.base, ticker.coin_id) }}/{{ shortName(ticker?.target, ticker.target_coin_id) }}</span> <span class="text-primary text-xs"
>{{ shortName(ticker?.base, ticker.coin_id) }}/{{
shortName(ticker?.target, ticker.target_coin_id)
}}</span
>
</div> </div>
</template> </template>
<VList style="max-height: 300px;"> <VList style="max-height: 300px">
<VListItem <VListItem
v-for="(item, i) in store.coinInfo.tickers" v-for="(item, i) in store.coinInfo.tickers"
:key="i" :key="i"
rounded rounded
@click="store.selectTicker(i)" @click="store.selectTicker(i)"
> >
<template #prepend> <template #prepend> </template>
</template>
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component --> <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
<VListItemTitle v-text="item.market.name" /> <VListItemTitle v-text="item.market.name" />
<VListItemSubtitle>{{ shortName(item?.base, item.coin_id) }}/{{ shortName(item?.target, item.target_coin_id) }}</VListItemSubtitle> <VListItemSubtitle
>{{ shortName(item?.base, item.coin_id) }}/{{
shortName(item?.target, item.target_coin_id)
}}</VListItemSubtitle
>
<template #append> <template #append>
<span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">{{ item.converted_last.usd }}</span> <span
class="ml-3"
:class="`text-${store.tickerColor(item.trust_score)}`"
>{{ item.converted_last.usd }}</span
>
</template> </template>
</VListItem> </VListItem>
</VList> </VList>
</VMenu> </VMenu>
<VSpacer /> <VSpacer />
<div class="d-flex align-center"> <div class="d-flex align-center">
@ -107,14 +151,14 @@ function shortName(name: string, id: string) {
</div> </div>
<!-- !SECTION --> <!-- !SECTION -->
<VSpacer /> <VSpacer />
<VBtn <VBtn
block block
:color="store.trustColor" :color="store.trustColor"
class="mt-3" class="mt-3"
:href="ticker.trade_url" :href="ticker.trade_url"
> >
Buy {{ coinInfo.symbol || '' }} Buy {{ coinInfo.symbol || "" }}
</VBtn> </VBtn>
</VCardItem> </VCardItem>
</VCol> </VCol>
<VCol md="7"> <VCol md="7">
@ -124,9 +168,16 @@ function shortName(name: string, id: string) {
</VCol> </VCol>
</VRow> </VRow>
<VDivider /> <VDivider />
<VCardText class="" style="max-height: 250px; overflow:auto;"><MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor></VCardText> <VCardText class="" style="max-height: 250px; overflow: auto"
><MdEditor
:model-value="coinInfo.description?.en"
previewOnly
></MdEditor
></VCardText>
<VCardItem> <VCardItem>
<VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ tag }}</VChip> <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{
tag
}}</VChip>
</VCardItem> </VCardItem>
</VCard> </VCard>
@ -139,46 +190,56 @@ function shortName(name: string, id: string) {
</VRow> </VRow>
<VCard class="my-5"> <VCard class="my-5">
<VCardItem class="pb-0"> <VCardItem class="pb-0">
<VCardTitle>Active Proposals</VCardTitle> <VCardTitle>Active Proposals</VCardTitle>
</VCardItem> </VCardItem>
<VCardItem> <VCardItem>
<VExpansionPanels variant="accordion"> <VExpansionPanels variant="accordion">
<VExpansionPanel v-for="(x, i) in store.proposals"> <VExpansionPanel v-for="(x, i) in store.proposals">
<VExpansionPanelTitle disable-icon-rotate> <VExpansionPanelTitle disable-icon-rotate>
<VChip label color="primary" class="mr-2">{{x.proposalId}}</VChip> <VChip label color="primary" class="mr-2">{{
<div class="w-100">{{ x.content?.title }} x.proposalId
<div class="d-flex mt-1"> }}</VChip>
<small class="text-secondary me-auto"> {{ format.toDay(x.votingEndTime, 'from') }}</small> <div class="w-100">
<ProposalProcess style="width:300px;" :pool="store.pool" :tally="store.tally[Number(x.proposalId)]"></ProposalProcess> {{ x.content?.title }}
<span></span> <div class="d-flex mt-1">
</div> <small class="text-secondary me-auto">
</div> {{ format.toDay(x.votingEndTime, "from") }}</small
<template #actions> >
<VIcon <ProposalProcess
icon="mdi-check" style="width: 300px"
color="success" :pool="store.pool"
class="ml-2" :tally="store.tally[Number(x.proposalId)]"
/> ></ProposalProcess>
</template> <span></span>
</VExpansionPanelTitle> </div>
<VExpansionPanelText> </div>
<VCard class="card-box"> <template #actions>
<VCardText> <VIcon icon="mdi-check" color="success" class="ml-2" />
<MdEditor :model-value="x.content?.description" previewOnly></MdEditor> </template>
</VCardText> </VExpansionPanelTitle>
<div class="text-center w-100 my-2"> <VExpansionPanelText>
<VBtn color="primary" variant="flat">Vote</VBtn> <VCard class="card-box">
</div> <VCardText>
</VCard> <MdEditor
</VExpansionPanelText> :model-value="x.content?.description"
</VExpansionPanel> previewOnly
</VExpansionPanels> ></MdEditor>
</VCardItem> </VCardText>
<VCardText v-if="store.proposals.length === 0">No active proposals</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> </VCard>
<VBtn block color='secondary' variant="outlined" class="mt-5"> <VBtn block color="secondary" variant="outlined" class="mt-5">
Connect Wallet Connect Wallet
</VBtn> </VBtn>
</div> </div>

38
src/components/CardStatisticsVertical.vue
View File

@ -1,34 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
title: string title: string;
color?: string color?: string;
icon: string icon: string;
stats: string stats: string;
change?: number change?: number;
subtitle?: string subtitle?: string;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
color: 'primary', color: 'primary',
}) });
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change||0) === 1) const isPositive = controlledComputed(
() => props.change,
() => Math.sign(props.change || 0) === 1
);
</script> </script>
<template> <template>
<VCard class="h-full flex-col content-between"> <VCard class="h-full flex-col content-between">
<VCardText class="d-flex align-center justify-between"> <VCardText class="d-flex align-center justify-between">
<VAvatar <VAvatar v-if="props.icon" rounded size="38" variant="tonal" :color="props.color">
v-if="props.icon" <VIcon :icon="props.icon" size="24" />
rounded
size="38"
variant="tonal"
:color="props.color"
>
<VIcon
:icon="props.icon"
size="24"
/>
</VAvatar> </VAvatar>
<div <div
@ -50,11 +44,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
{{ props.title }} {{ props.title }}
</p> </p>
<VChip <VChip v-if="props.subtitle" size="x-small" class="font-weight-medium">
v-if="props.subtitle"
size="x-small"
class="font-weight-medium"
>
<span class="text-truncate">{{ props.subtitle }}</span> <span class="text-truncate">{{ props.subtitle }}</span>
</VChip> </VChip>
</VCardText> </VCardText>

31
src/components/ProposalListItem.vue
View File

@ -1,14 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import MdEditor from 'md-editor-v3';
import { useBlockchain, useFormatter, useStakingStore } from '@/stores'; import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
import type { GovProposal, PaginatedProposals } from '@/types'; import type { PaginatedProposals } from '@/types';
import ProposalProcess from './ProposalProcess.vue'; import ProposalProcess from './ProposalProcess.vue';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
const props = defineProps({ defineProps({
proposals: { type: Object as PropType<PaginatedProposals> }, proposals: { type: Object as PropType<PaginatedProposals> },
}); });
// const list = computed(()=> proposl)
const format = useFormatter(); const format = useFormatter();
const staking = useStakingStore(); const staking = useStakingStore();
const chain = useBlockchain(); const chain = useBlockchain();
@ -48,12 +47,26 @@ const statusMap: Record<string, string> = {
</div> </div>
</div> </div>
<div <div
class=" flex items-center mb-3" class="flex items-center mb-3"
:class="statusMap?.[item?.status] === 'PASSED'?'text-yes':statusMap?.[item?.status] === 'REJECTED' ?'text-no':'text-inProgress'"> :class="
<div statusMap?.[item?.status] === 'PASSED'
? 'text-yes'
: statusMap?.[item?.status] === 'REJECTED'
? 'text-no'
: 'text-info'
"
>
<div
class="w-1 h-1 rounded-full mr-2" class="w-1 h-1 rounded-full mr-2"
:class="statusMap?.[item?.status] === 'PASSED'?'bg-yes':statusMap?.[item?.status] === 'REJECTED' ?'bg-no':'bg-inProgress'"></div> :class="
statusMap?.[item?.status] === 'PASSED'
? 'bg-yes'
: statusMap?.[item?.status] === 'REJECTED'
? 'bg-no'
: 'bg-info'
"
></div>
<div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div> <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
</div> </div>

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

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import MdEditor from 'md-editor-v3'; import MdEditor from 'md-editor-v3';
import PriceMarketChart from '@/components/charts/PriceMarketChart.vue' import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
import { useBlockchain, useFormatter } from '@/stores'; import { useBlockchain, useFormatter } from '@/stores';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
@ -10,31 +10,30 @@ import { computed } from '@vue/reactivity';
import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue'; import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
import ProposalListItem from '@/components/ProposalListItem.vue'; import ProposalListItem from '@/components/ProposalListItem.vue';
const blockchain = useBlockchain() const blockchain = useBlockchain();
const store = useIndexModule() const store = useIndexModule();
const coinInfo = computed(() => { const coinInfo = computed(() => {
return store.coinInfo return store.coinInfo;
}) });
onMounted(() => { onMounted(() => {
store.loadDashboard() store.loadDashboard();
}) });
const format = useFormatter() const format = useFormatter();
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]) const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
blockchain.$subscribe((m, s) => { blockchain.$subscribe((m, s) => {
console.log('index:', m) console.log('index:', m);
if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) { if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
console.log(m.events.key) console.log(m.events.key);
store.loadDashboard() store.loadDashboard();
} }
}) });
function shortName(name: string, id: string) { function shortName(name: string, id: string) {
return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id: name return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id : name;
} }
</script> </script>
<template> <template>
@ -44,58 +43,75 @@ function shortName(name: string, id: string) {
<VCol md="5"> <VCol md="5">
<VCardItem> <VCardItem>
<VCardTitle> <VCardTitle>
{{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>) {{ coinInfo.name }} (
<span class="text-uppercase">{{ coinInfo.symbol }}</span>
)
</VCardTitle> </VCardTitle>
<VCardSubtitle> <VCardSubtitle>
Rank: <VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip> Rank:
<VChip color="error" size="x-small">#{{ coinInfo.market_cap_rank }}</VChip>
</VCardSubtitle> </VCardSubtitle>
</VCardItem> </VCardItem>
<VDivider/> <VDivider />
<VCardItem> <VCardItem>
<VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">Website</VBtn> <VBtn variant="text" size="small" :href="store.homepage" prependIcon="mdi-web">
<VBtn variant="text" size="small" :href="store.twitter" prependIcon="mdi-twitter">Twitter</VBtn> Website
<VBtn variant="text" size="small" :href="store.telegram" prependIcon="mdi-telegram">Telegram</VBtn> </VBtn>
<VBtn variant="text" size="small" :href="store.github" prependIcon="mdi-github">Github</VBtn> <VBtn variant="text" size="small" :href="store.twitter" prependIcon="mdi-twitter">
Twitter
</VBtn>
<VBtn variant="text" size="small" :href="store.telegram" prependIcon="mdi-telegram">
Telegram
</VBtn>
<VBtn variant="text" size="small" :href="store.github" prependIcon="mdi-github">
Github
</VBtn>
</VCardItem> </VCardItem>
<VCardItem> <VCardItem>
<!-- SECTION upgrade plan banner --> <!-- SECTION upgrade plan banner -->
<div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"> <div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3">
<h3 <h3 class="plan-details me-3" :class="store.priceColor">
class="plan-details me-3" {{ store.priceChange }}
:class="store.priceColor" <small>%</small>
>
{{ store.priceChange }}<small>%</small>
</h3> </h3>
<VMenu open-on-hover> <VMenu open-on-hover>
<template #activator="{ props }"> <template #activator="{ props }">
<div class="d-flex flex-column align-start" v-bind="props"> <div class="d-flex flex-column align-start" v-bind="props">
<h3 class="text-base font-weight-semibold"> <h3 class="text-base font-weight-semibold">
{{ ticker?.market?.name || ''}} {{ ticker?.market?.name || '' }}
</h3> </h3>
<span class="text-primary text-xs">{{ shortName(ticker?.base, ticker.coin_id) }}/{{ shortName(ticker?.target, ticker.target_coin_id) }}</span> <span class="text-primary text-xs">
{{ shortName(ticker?.base, ticker.coin_id) }}/{{
shortName(ticker?.target, ticker.target_coin_id)
}}
</span>
</div> </div>
</template> </template>
<VList style="max-height: 300px;"> <VList style="max-height: 300px">
<VListItem <VListItem
v-for="(item, i) in store.coinInfo.tickers" v-for="(item, i) in store.coinInfo.tickers"
:key="i" :key="i"
rounded rounded
@click="store.selectTicker(i)" @click="store.selectTicker(i)"
> >
<template #prepend> <template #prepend></template>
</template>
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component --> <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
<VListItemTitle v-text="item.market.name" /> <VListItemTitle v-text="item.market.name" />
<VListItemSubtitle>{{ shortName(item?.base, item.coin_id) }}/{{ shortName(item?.target, item.target_coin_id) }}</VListItemSubtitle> <VListItemSubtitle>
{{ shortName(item?.base, item.coin_id) }}/{{
shortName(item?.target, item.target_coin_id)
}}
</VListItemSubtitle>
<template #append> <template #append>
<span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">{{ item.converted_last.usd }}</span> <span class="ml-3" :class="`text-${store.tickerColor(item.trust_score)}`">
{{ item.converted_last.usd }}
</span>
</template> </template>
</VListItem> </VListItem>
</VList> </VList>
</VMenu> </VMenu>
<VSpacer /> <VSpacer />
<div class="d-flex align-center"> <div class="d-flex align-center">
@ -107,14 +123,9 @@ function shortName(name: string, id: string) {
</div> </div>
<!-- !SECTION --> <!-- !SECTION -->
<VSpacer /> <VSpacer />
<VBtn <VBtn block :color="store.trustColor" class="mt-3" :href="ticker.trade_url">
block Buy {{ coinInfo.symbol || '' }}
:color="store.trustColor" </VBtn>
class="mt-3"
:href="ticker.trade_url"
>
Buy {{ coinInfo.symbol || '' }}
</VBtn>
</VCardItem> </VCardItem>
</VCol> </VCol>
<VCol md="7"> <VCol md="7">
@ -124,31 +135,31 @@ function shortName(name: string, id: string) {
</VCol> </VCol>
</VRow> </VRow>
<VDivider /> <VDivider />
<VCardText style="max-height: 250px; overflow:auto;"><MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor></VCardText> <VCardText style="max-height: 250px; overflow: auto">
<MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor>
</VCardText>
<VCardItem> <VCardItem>
<VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ tag }}</VChip> <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ tag }}</VChip>
</VCardItem> </VCardItem>
</VCard> </VCard>
<VRow> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
<VCol v-for="item in store.stats" cols="12" sm="6" md="2"> <div v-for="item in store.stats">
<CardStatisticsVertical v-bind="item" /> <CardStatisticsVertical v-bind="item" />
</VCol> </div>
</VRow> </div>
<VCard class="my-5"> <VCard class="my-5">
<VCardItem class="pb-0"> <VCardItem class="pb-0">
<VCardTitle>Active Proposals</VCardTitle> <VCardTitle>Active Proposals</VCardTitle>
</VCardItem> </VCardItem>
<VCardItem> <VCardItem>
<ProposalListItem :proposals="store.proposals"/> <ProposalListItem :proposals="store.proposals" />
</VCardItem> </VCardItem>
<VCardText v-if="store.proposals.length === 0">No active proposals</VCardText> <VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
</VCard> </VCard>
<VBtn block color='secondary' variant="outlined" class="mt-5"> <VBtn block color="secondary" variant="outlined" class="mt-5">Connect Wallet</VBtn>
Connect Wallet
</VBtn>
</div> </div>
</template> </template>

1
tailwind.config.js
View File

@ -7,7 +7,6 @@ module.exports = {
colors: { colors: {
main: '#5973fe', main: '#5973fe',
yes: '#3fb68b', yes: '#3fb68b',
inProgress: '#4472de',
no: '#ff5353', no: '#ff5353',
info: '#00b2ff', info: '#00b2ff',
textMain: '#333', textMain: '#333',