forked from cerc-io/cosmos-explorer
feat: dashboard Dashboard Community Pool Content exceeds
This commit is contained in:
alisa
parent
6bbe2b2c61
commit
674810d513
@ -37,10 +37,7 @@ const veto = computed(() =>
|
||||
<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-[#B71C1C]" :style="`width: ${veto};`"></div>
|
||||
<div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,40 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import MdEditor from 'md-editor-v3';
|
||||
import PriceMarketChart from '@/components/charts/PriceMarketChart.vue'
|
||||
import MdEditor from "md-editor-v3";
|
||||
import PriceMarketChart from "@/components/charts/PriceMarketChart.vue";
|
||||
|
||||
import { useBlockchain, useFormatter } from '@/stores';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useIndexModule } from './indexStore';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { useBlockchain, useFormatter } from "@/stores";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useIndexModule } from "./indexStore";
|
||||
import { computed } from "@vue/reactivity";
|
||||
|
||||
import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
|
||||
import ProposalProcess from '@/components/ProposalProcess.vue';
|
||||
import CardStatisticsVertical from "@/components/CardStatisticsVertical.vue";
|
||||
import ProposalProcess from "@/components/ProposalProcess.vue";
|
||||
|
||||
const blockchain = useBlockchain()
|
||||
const store = useIndexModule()
|
||||
const blockchain = useBlockchain();
|
||||
const store = useIndexModule();
|
||||
|
||||
const coinInfo = computed(() => {
|
||||
return store.coinInfo
|
||||
})
|
||||
return store.coinInfo;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
store.loadDashboard()
|
||||
})
|
||||
store.loadDashboard();
|
||||
});
|
||||
|
||||
const format = useFormatter()
|
||||
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex])
|
||||
const format = useFormatter();
|
||||
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
|
||||
|
||||
blockchain.$subscribe((m, s) => {
|
||||
console.log('index:', m)
|
||||
if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
|
||||
console.log(m.events.key)
|
||||
store.loadDashboard()
|
||||
console.log("index:", m);
|
||||
if (
|
||||
!Array.isArray(m.events) &&
|
||||
["chainName", "endpoint"].includes(m.events.key)
|
||||
) {
|
||||
console.log(m.events.key);
|
||||
store.loadDashboard();
|
||||
}
|
||||
})
|
||||
});
|
||||
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>
|
||||
|
||||
<template>
|
||||
@ -44,58 +49,97 @@ function shortName(name: string, id: string) {
|
||||
<VCol md="5">
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
{{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>)
|
||||
{{ coinInfo.name }} (<span class="text-uppercase">{{
|
||||
coinInfo.symbol
|
||||
}}</span
|
||||
>)
|
||||
</VCardTitle>
|
||||
<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>
|
||||
</VCardItem>
|
||||
<VDivider/>
|
||||
<VCardItem>
|
||||
<VBtn variant="text" size="small" :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>
|
||||
<VDivider />
|
||||
<VCardItem>
|
||||
<VBtn
|
||||
variant="text"
|
||||
size="small"
|
||||
: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>
|
||||
<!-- SECTION upgrade plan banner -->
|
||||
<div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3">
|
||||
<h3
|
||||
class="plan-details me-3"
|
||||
:class="store.priceColor"
|
||||
>
|
||||
<div
|
||||
class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
|
||||
>
|
||||
<h3 class="plan-details me-3" :class="store.priceColor">
|
||||
{{ store.priceChange }}<small>%</small>
|
||||
</h3>
|
||||
|
||||
|
||||
<VMenu open-on-hover>
|
||||
<template #activator="{ props }">
|
||||
<div class="d-flex flex-column align-start" v-bind="props">
|
||||
<h3 class="text-base font-weight-semibold">
|
||||
{{ ticker?.market?.name || ''}}
|
||||
{{ ticker?.market?.name || "" }}
|
||||
</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>
|
||||
</template>
|
||||
<VList style="max-height: 300px;">
|
||||
<VList style="max-height: 300px">
|
||||
<VListItem
|
||||
v-for="(item, i) in store.coinInfo.tickers"
|
||||
:key="i"
|
||||
rounded
|
||||
@click="store.selectTicker(i)"
|
||||
>
|
||||
<template #prepend>
|
||||
</template>
|
||||
<template #prepend> </template>
|
||||
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
|
||||
<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>
|
||||
<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>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex align-center">
|
||||
@ -107,14 +151,14 @@ function shortName(name: string, id: string) {
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
block
|
||||
:color="store.trustColor"
|
||||
class="mt-3"
|
||||
:href="ticker.trade_url"
|
||||
>
|
||||
Buy {{ coinInfo.symbol || '' }}
|
||||
</VBtn>
|
||||
<VBtn
|
||||
block
|
||||
:color="store.trustColor"
|
||||
class="mt-3"
|
||||
:href="ticker.trade_url"
|
||||
>
|
||||
Buy {{ coinInfo.symbol || "" }}
|
||||
</VBtn>
|
||||
</VCardItem>
|
||||
</VCol>
|
||||
<VCol md="7">
|
||||
@ -124,9 +168,16 @@ function shortName(name: string, id: string) {
|
||||
</VCol>
|
||||
</VRow>
|
||||
<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>
|
||||
<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>
|
||||
</VCard>
|
||||
|
||||
@ -139,46 +190,56 @@ function shortName(name: string, id: string) {
|
||||
</VRow>
|
||||
|
||||
<VCard class="my-5">
|
||||
<VCardItem class="pb-0">
|
||||
<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.proposalId}}</VChip>
|
||||
<div class="w-100">{{ x.content?.title }}
|
||||
<div class="d-flex mt-1">
|
||||
<small class="text-secondary me-auto"> {{ format.toDay(x.votingEndTime, 'from') }}</small>
|
||||
<ProposalProcess style="width:300px;" :pool="store.pool" :tally="store.tally[Number(x.proposalId)]"></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>
|
||||
<VCardItem class="pb-0">
|
||||
<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.proposalId
|
||||
}}</VChip>
|
||||
<div class="w-100">
|
||||
{{ x.content?.title }}
|
||||
<div class="d-flex mt-1">
|
||||
<small class="text-secondary me-auto">
|
||||
{{ format.toDay(x.votingEndTime, "from") }}</small
|
||||
>
|
||||
<ProposalProcess
|
||||
style="width: 300px"
|
||||
:pool="store.pool"
|
||||
:tally="store.tally[Number(x.proposalId)]"
|
||||
></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>
|
||||
|
||||
<VBtn block color='secondary' variant="outlined" class="mt-5">
|
||||
<VBtn block color="secondary" variant="outlined" class="mt-5">
|
||||
Connect Wallet
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
@ -1,34 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
color?: string
|
||||
icon: string
|
||||
stats: string
|
||||
change?: number
|
||||
subtitle?: string
|
||||
title: string;
|
||||
color?: string;
|
||||
icon: string;
|
||||
stats: string;
|
||||
change?: number;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<VCard class="h-full flex-col content-between">
|
||||
<VCardText class="d-flex align-center justify-between">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
rounded
|
||||
size="38"
|
||||
variant="tonal"
|
||||
:color="props.color"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
size="24"
|
||||
/>
|
||||
<VAvatar v-if="props.icon" rounded size="38" variant="tonal" :color="props.color">
|
||||
<VIcon :icon="props.icon" size="24" />
|
||||
</VAvatar>
|
||||
|
||||
<div
|
||||
@ -50,11 +44,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
|
||||
{{ props.title }}
|
||||
</p>
|
||||
|
||||
<VChip
|
||||
v-if="props.subtitle"
|
||||
size="x-small"
|
||||
class="font-weight-medium"
|
||||
>
|
||||
<VChip v-if="props.subtitle" size="x-small" class="font-weight-medium">
|
||||
<span class="text-truncate">{{ props.subtitle }}</span>
|
||||
</VChip>
|
||||
</VCardText>
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import MdEditor from 'md-editor-v3';
|
||||
import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
|
||||
import type { GovProposal, PaginatedProposals } from '@/types';
|
||||
import type { PaginatedProposals } from '@/types';
|
||||
import ProposalProcess from './ProposalProcess.vue';
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
proposals: { type: Object as PropType<PaginatedProposals> },
|
||||
});
|
||||
// const list = computed(()=> proposl)
|
||||
|
||||
const format = useFormatter();
|
||||
const staking = useStakingStore();
|
||||
const chain = useBlockchain();
|
||||
@ -48,12 +47,26 @@ const statusMap: Record<string, string> = {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" flex items-center mb-3"
|
||||
:class="statusMap?.[item?.status] === 'PASSED'?'text-yes':statusMap?.[item?.status] === 'REJECTED' ?'text-no':'text-inProgress'">
|
||||
<div
|
||||
<div
|
||||
class="flex items-center mb-3"
|
||||
:class="
|
||||
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="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>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
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 { onMounted, ref } from 'vue';
|
||||
@ -10,31 +10,30 @@ import { computed } from '@vue/reactivity';
|
||||
import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
|
||||
import ProposalListItem from '@/components/ProposalListItem.vue';
|
||||
|
||||
const blockchain = useBlockchain()
|
||||
const store = useIndexModule()
|
||||
const blockchain = useBlockchain();
|
||||
const store = useIndexModule();
|
||||
|
||||
const coinInfo = computed(() => {
|
||||
return store.coinInfo
|
||||
})
|
||||
return store.coinInfo;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
store.loadDashboard()
|
||||
})
|
||||
store.loadDashboard();
|
||||
});
|
||||
|
||||
const format = useFormatter()
|
||||
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex])
|
||||
const format = useFormatter();
|
||||
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
|
||||
|
||||
blockchain.$subscribe((m, s) => {
|
||||
console.log('index:', m)
|
||||
if(!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
|
||||
console.log(m.events.key)
|
||||
store.loadDashboard()
|
||||
console.log('index:', m);
|
||||
if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
|
||||
console.log(m.events.key);
|
||||
store.loadDashboard();
|
||||
}
|
||||
})
|
||||
});
|
||||
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>
|
||||
|
||||
<template>
|
||||
@ -44,58 +43,75 @@ function shortName(name: string, id: string) {
|
||||
<VCol md="5">
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
{{ coinInfo.name }} (<span class="text-uppercase">{{ coinInfo.symbol }}</span>)
|
||||
{{ coinInfo.name }} (
|
||||
<span class="text-uppercase">{{ coinInfo.symbol }}</span>
|
||||
)
|
||||
</VCardTitle>
|
||||
<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>
|
||||
</VCardItem>
|
||||
<VDivider/>
|
||||
<VCardItem>
|
||||
<VBtn variant="text" size="small" :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>
|
||||
<VDivider />
|
||||
<VCardItem>
|
||||
<VBtn variant="text" size="small" :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>
|
||||
<!-- SECTION upgrade plan banner -->
|
||||
<div class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3">
|
||||
<h3
|
||||
class="plan-details me-3"
|
||||
:class="store.priceColor"
|
||||
>
|
||||
{{ store.priceChange }}<small>%</small>
|
||||
<h3 class="plan-details me-3" :class="store.priceColor">
|
||||
{{ store.priceChange }}
|
||||
<small>%</small>
|
||||
</h3>
|
||||
|
||||
|
||||
<VMenu open-on-hover>
|
||||
<template #activator="{ props }">
|
||||
<div class="d-flex flex-column align-start" v-bind="props">
|
||||
<h3 class="text-base font-weight-semibold">
|
||||
{{ ticker?.market?.name || ''}}
|
||||
{{ ticker?.market?.name || '' }}
|
||||
</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>
|
||||
</template>
|
||||
<VList style="max-height: 300px;">
|
||||
<VList style="max-height: 300px">
|
||||
<VListItem
|
||||
v-for="(item, i) in store.coinInfo.tickers"
|
||||
:key="i"
|
||||
rounded
|
||||
@click="store.selectTicker(i)"
|
||||
>
|
||||
<template #prepend>
|
||||
</template>
|
||||
<template #prepend></template>
|
||||
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
|
||||
<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>
|
||||
<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>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex align-center">
|
||||
@ -107,14 +123,9 @@ function shortName(name: string, id: string) {
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
block
|
||||
:color="store.trustColor"
|
||||
class="mt-3"
|
||||
:href="ticker.trade_url"
|
||||
>
|
||||
Buy {{ coinInfo.symbol || '' }}
|
||||
</VBtn>
|
||||
<VBtn block :color="store.trustColor" class="mt-3" :href="ticker.trade_url">
|
||||
Buy {{ coinInfo.symbol || '' }}
|
||||
</VBtn>
|
||||
</VCardItem>
|
||||
</VCol>
|
||||
<VCol md="7">
|
||||
@ -124,31 +135,31 @@ function shortName(name: string, id: string) {
|
||||
</VCol>
|
||||
</VRow>
|
||||
<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>
|
||||
<VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{ tag }}</VChip>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VRow>
|
||||
<VCol v-for="item in store.stats" cols="12" sm="6" md="2">
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
|
||||
<div v-for="item in store.stats">
|
||||
<CardStatisticsVertical v-bind="item" />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VCard class="my-5">
|
||||
<VCardItem class="pb-0">
|
||||
<VCardTitle>Active Proposals</VCardTitle>
|
||||
</VCardItem>
|
||||
<VCardItem>
|
||||
<ProposalListItem :proposals="store.proposals"/>
|
||||
</VCardItem>
|
||||
<VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
|
||||
<VCardItem class="pb-0">
|
||||
<VCardTitle>Active Proposals</VCardTitle>
|
||||
</VCardItem>
|
||||
<VCardItem>
|
||||
<ProposalListItem :proposals="store.proposals" />
|
||||
</VCardItem>
|
||||
<VCardText v-if="store.proposals.length === 0">No active proposals</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VBtn block color='secondary' variant="outlined" class="mt-5">
|
||||
Connect Wallet
|
||||
</VBtn>
|
||||
<VBtn block color="secondary" variant="outlined" class="mt-5">Connect Wallet</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ module.exports = {
|
||||
colors: {
|
||||
main: '#5973fe',
|
||||
yes: '#3fb68b',
|
||||
inProgress: '#4472de',
|
||||
no: '#ff5353',
|
||||
info: '#00b2ff',
|
||||
textMain: '#333',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user