Merge pull request #374 from alisaweb3/v3-single
UI refactor: DynamicComponent,ObjectHorizontalElement,Cosmwasm,Dashboard
This commit is contained in:
commit
5c35cecc58
@ -26,15 +26,32 @@ const series = computed(() => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function changeChart(type: string) {
|
||||||
|
kind.value = type;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VTabs v-model="kind" align-tabs="end"
|
<div class="tabs tabs-boxed bg-transparent justify-end">
|
||||||
><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs
|
<a
|
||||||
>
|
class="tab text-xs mr-2 text-gray-400 uppercase"
|
||||||
|
:class="{ 'tab-active': kind === 'price' }"
|
||||||
|
@click="changeChart('price')"
|
||||||
|
>
|
||||||
|
Price
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="tab text-xs text-gray-400 uppercase"
|
||||||
|
:class="{ 'tab-active': kind === 'volume' }"
|
||||||
|
@click="changeChart('volume')"
|
||||||
|
>
|
||||||
|
Volume
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<VueApexCharts
|
<VueApexCharts
|
||||||
type="area"
|
type="area"
|
||||||
height="261"
|
height="230"
|
||||||
:options="chartConfig"
|
:options="chartConfig"
|
||||||
:series="series"
|
:series="series"
|
||||||
/>
|
/>
|
||||||
|
@ -7,8 +7,8 @@ const props = defineProps({
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-for="v in props.value">
|
<div v-for="(item,index) of props.value" :key="index">
|
||||||
{{ toBase64(v) }}
|
{{ toBase64(item) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -18,32 +18,34 @@ const header = computed(() => {
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VTable
|
<div class="overflow-x-auto">
|
||||||
v-if="header.length > 0"
|
<VTable
|
||||||
density="compact"
|
v-if="header.length > 0"
|
||||||
height="300px"
|
density="compact"
|
||||||
fixed-header
|
height="300px"
|
||||||
hover
|
fixed-header
|
||||||
>
|
hover
|
||||||
<thead v-if="thead">
|
>
|
||||||
<tr>
|
<thead v-if="thead">
|
||||||
<th
|
<tr>
|
||||||
v-for="(item, index) in header"
|
<th
|
||||||
:key="index"
|
v-for="(item, index) in header"
|
||||||
class="text-left text-capitalize"
|
:key="index"
|
||||||
>
|
class="text-left text-capitalize"
|
||||||
{{ item }}
|
>
|
||||||
</th>
|
{{ item }}
|
||||||
</tr>
|
</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr v-for="(item, index) in value" :key="index">
|
<tbody>
|
||||||
<td v-for="(el, key) in header" :key="key">
|
<tr v-for="(item, index) in value" :key="index">
|
||||||
<DynamicComponent :value="item[el]" />
|
<td v-for="(el, key) in header" :key="key">
|
||||||
</td>
|
<DynamicComponent :value="item[el]" />
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</VTable>
|
</tbody>
|
||||||
|
</VTable>
|
||||||
|
|
||||||
<div v-else class="h-[300px]"></div>
|
<div v-else class="h-[300px]"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,19 +1,27 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import DynamicComponent from './DynamicComponent.vue';
|
import DynamicComponent from './DynamicComponent.vue';
|
||||||
import { select } from './index';
|
import { select } from './index';
|
||||||
|
import { ref} from 'vue'
|
||||||
const props = defineProps(['value']);
|
const props = defineProps(['value']);
|
||||||
const tab = ref('');
|
const tab = ref(Object.keys(props.value)[0] || '');
|
||||||
|
|
||||||
|
const changeTab = (val: string) => {
|
||||||
|
tab.value = val;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<VTabs v-model="tab">
|
<div class="tabs">
|
||||||
<VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
|
<a class="tab tab-bordered text-gray-400 uppercase"
|
||||||
</VTabs>
|
v-for="(item, index) of value" :value="index"
|
||||||
<VWindow v-model="tab" style="min-height: 25px">
|
:class="{ 'tab-active':tab === String(index) }"
|
||||||
<VWindowItem v-for="(v, k) of value" :value="k"
|
@click="changeTab(String(index))"
|
||||||
><DynamicComponent :value="v"
|
>{{ index }}</a>
|
||||||
/></VWindowItem>
|
</div>
|
||||||
</VWindow>
|
<div class="min-h-[25px] mt-4">
|
||||||
|
<div v-for="(v, k) of value" :value="k">
|
||||||
|
<DynamicComponent :value="v" v-show="tab === String(k)"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -21,31 +21,33 @@ const format = useFormatter();
|
|||||||
const chain = useBlockchain();
|
const chain = useBlockchain();
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VTable density="compact" v-if="txs.length > 0">
|
<div class="overflow-x-auto mt-4">
|
||||||
<thead>
|
<table class="table w-full" density="compact" v-if="txs.length > 0">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Hash</th>
|
<tr>
|
||||||
<th>Msgs</th>
|
<th style="position: relative">Hash</th>
|
||||||
<th>Memo</th>
|
<th>Msgs</th>
|
||||||
</tr>
|
<th>Memo</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr v-for="item in txs">
|
<tbody class="text-sm">
|
||||||
<td>
|
<tr v-for="item in txs">
|
||||||
<RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
|
<td>
|
||||||
item.hash
|
<RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
|
||||||
}}</RouterLink>
|
item.hash
|
||||||
</td>
|
}}</RouterLink>
|
||||||
<td>
|
</td>
|
||||||
{{
|
<td>
|
||||||
format.messages(
|
{{
|
||||||
item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
|
format.messages(
|
||||||
)
|
item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
|
||||||
}}
|
)
|
||||||
</td>
|
}}
|
||||||
<td>{{ item.tx.body.memo }}</td>
|
</td>
|
||||||
</tr>
|
<td>{{ item.tx.body.memo }}</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</VTable>
|
</tbody>
|
||||||
<div v-else>[]</div>
|
</table>
|
||||||
|
<div v-else>[]</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -93,29 +93,39 @@ const result = ref('');
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<VCard>
|
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||||
<VCardTitle>Contract List of Code: {{ props.code_id }}</VCardTitle>
|
<h2 class="card-title truncate w-full">Contract List of Code: {{ props.code_id }}</h2>
|
||||||
<VTable>
|
<div class="overflow-x-auto">
|
||||||
<thead>
|
<table class="table w-full mt-4">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Contract List</th>
|
<tr>
|
||||||
<th>Actions</th>
|
<th style="position: relative;">Contract List</th>
|
||||||
</tr>
|
<th>Actions</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr v-for="v in response.contracts">
|
<tbody>
|
||||||
<td>{{ v }}</td>
|
<tr v-for="v in response.contracts">
|
||||||
<td>
|
<td>{{ v }}</td>
|
||||||
<VBtn size="small" @click="showInfo(v)">contract</VBtn>
|
<td>
|
||||||
<VBtn size="small" @click="showState(v)" class="ml-2"
|
<button
|
||||||
>States</VBtn
|
class="btn btn-primary btn-sm text-xs mr-2"
|
||||||
>
|
@click="showInfo(v)"
|
||||||
<VBtn size="small" @click="showQuery(v)" class="ml-2">Query</VBtn>
|
>contract</button>
|
||||||
</td>
|
<button
|
||||||
</tr>
|
class="btn btn-primary btn-sm text-xs mr-2"
|
||||||
</tbody>
|
@click="showState(v)"
|
||||||
</VTable>
|
>States</button>
|
||||||
</VCard>
|
<button
|
||||||
|
class="btn btn-primary btn-sm text-xs"
|
||||||
|
@click="showQuery(v)"
|
||||||
|
>Query</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<v-dialog v-model="infoDialog" width="auto">
|
<v-dialog v-model="infoDialog" width="auto">
|
||||||
<v-card>
|
<v-card>
|
||||||
<VCardTitle>Contract Detail</VCardTitle>
|
<VCardTitle>Contract Detail</VCardTitle>
|
||||||
|
@ -14,13 +14,13 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||||
<VCard>
|
<h2 class="card-title truncate w-full">Cosmos Wasm Smart Contracts</h2>
|
||||||
<VCardTitle>Cosmos Wasm Smart Contracts</VCardTitle>
|
<div class="overflow-x-auto">
|
||||||
<VTable>
|
<table class="table w-full mt-4 text-sm">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Code Id</th>
|
<th style="position: relative;">Code Id</th>
|
||||||
<th>Code Hash</th>
|
<th>Code Hash</th>
|
||||||
<th>Creator</th>
|
<th>Creator</th>
|
||||||
<th>Permissions</th>
|
<th>Permissions</th>
|
||||||
@ -47,8 +47,8 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</VTable>
|
</table>
|
||||||
</VCard>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -291,7 +291,7 @@ const processList = computed(()=>{
|
|||||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||||
<h2 class="card-title">Votes</h2>
|
<h2 class="card-title">Votes</h2>
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="table w-full ">
|
<table class="table w-full">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="(item,index) of votes" :key="index">
|
<tr v-for="(item,index) of votes" :key="index">
|
||||||
<td>{{ item.voter }}</td>
|
<td>{{ item.voter }}</td>
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
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 { Icon } from '@iconify/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';
|
||||||
@ -38,150 +39,155 @@ function shortName(name: string, id: string) {
|
|||||||
? id
|
? id
|
||||||
: name;
|
: name;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const comLinks = [
|
||||||
|
{
|
||||||
|
name: 'Website',
|
||||||
|
icon: 'mdi-web',
|
||||||
|
href: store.homepage,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Twitter',
|
||||||
|
icon: 'mdi-twitter',
|
||||||
|
href: store.twitter,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Telegram',
|
||||||
|
icon: 'mdi-telegram',
|
||||||
|
href: store.telegram,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Github',
|
||||||
|
icon: 'mdi-github',
|
||||||
|
href: store.github,
|
||||||
|
},
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<VCard v-if="coinInfo && coinInfo.name" class="mb-5">
|
<div
|
||||||
<VRow>
|
v-if="coinInfo && coinInfo.name"
|
||||||
<VCol md="5">
|
class="bg-base-100 rounded shadow mb-4"
|
||||||
<VCardItem>
|
>
|
||||||
<VCardTitle>
|
<div class="flex p-4">
|
||||||
{{ coinInfo.name }} (
|
<div class="flex-1 mr-10">
|
||||||
<span class="text-uppercase">{{ coinInfo.symbol }}</span>
|
<div class="text-xl font-semibold text-main">
|
||||||
)
|
{{ coinInfo.name }} (<span class="uppercase">{{
|
||||||
</VCardTitle>
|
coinInfo.symbol
|
||||||
<VCardSubtitle>
|
}}</span
|
||||||
Rank:
|
>)
|
||||||
<VChip color="error" size="x-small"
|
</div>
|
||||||
>#{{ coinInfo.market_cap_rank }}</VChip
|
<div class="text-xs mt-2">
|
||||||
>
|
Rank:
|
||||||
</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>
|
|
||||||
</VCardItem>
|
|
||||||
<VCardItem>
|
|
||||||
<!-- SECTION upgrade plan banner -->
|
|
||||||
<div
|
<div
|
||||||
class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
|
class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
|
||||||
>
|
>
|
||||||
<h3 class="plan-details me-3" :class="store.priceColor">
|
#{{ coinInfo.market_cap_rank }}
|
||||||
{{ store.priceChange }}
|
</div>
|
||||||
<small>%</small>
|
</div>
|
||||||
</h3>
|
|
||||||
|
|
||||||
<VMenu open-on-hover>
|
<div class="mt-4 flex items-center">
|
||||||
<template #activator="{ props }">
|
<a
|
||||||
<div class="d-flex flex-column align-start" v-bind="props">
|
v-for="(item, index) of comLinks"
|
||||||
<h3 class="text-base font-weight-semibold">
|
:key="index"
|
||||||
|
:href="item.href"
|
||||||
|
class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center"
|
||||||
|
>
|
||||||
|
<Icon :icon="item?.icon" />
|
||||||
|
<span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="dropdown dropdown-hover w-full mt-[16px] md:mt-[32px]">
|
||||||
|
<label>
|
||||||
|
<div
|
||||||
|
class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="font-semibold text-xl text-[#666] dark:text-white"
|
||||||
|
>
|
||||||
{{ ticker?.market?.name || '' }}
|
{{ ticker?.market?.name || '' }}
|
||||||
</h3>
|
</div>
|
||||||
<span class="text-primary text-xs">
|
<div class="text-info text-sm">
|
||||||
{{ shortName(ticker?.base, ticker.coin_id) }}/{{
|
{{ shortName(ticker?.base, ticker.coin_id) }}/{{
|
||||||
shortName(ticker?.target, ticker.target_coin_id)
|
shortName(ticker?.target, ticker.target_coin_id)
|
||||||
}}
|
}}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
<VList style="max-height: 300px">
|
<div class="text-right">
|
||||||
<VListItem
|
<div
|
||||||
v-for="(item, i) in store.coinInfo.tickers"
|
class="text-xl font-semibold text-[#666] dark:text-white"
|
||||||
:key="i"
|
>
|
||||||
rounded
|
${{ ticker.converted_last.usd }}
|
||||||
@click="store.selectTicker(i)"
|
</div>
|
||||||
>
|
<div class="text-sm" :class="store.priceColor">
|
||||||
<template #prepend></template>
|
{{ store.priceChange }}%
|
||||||
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
|
</div>
|
||||||
<VListItemTitle v-text="item.market.name" />
|
</div>
|
||||||
<VListItemSubtitle>
|
</div>
|
||||||
{{ shortName(item?.base, item.coin_id) }}/{{
|
</label>
|
||||||
shortName(item?.target, item.target_coin_id)
|
<div class="dropdown-content pt-1">
|
||||||
}}
|
<div class="h-64 overflow-auto w-full shadow rounded">
|
||||||
</VListItemSubtitle>
|
<ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
|
||||||
<template #append>
|
<li
|
||||||
<span
|
v-for="(item, index) in store.coinInfo.tickers"
|
||||||
class="ml-3"
|
:key="index"
|
||||||
:class="`text-${store.tickerColor(item.trust_score)}`"
|
@click="store.selectTicker(index)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-between hover:bg-base-100"
|
||||||
>
|
>
|
||||||
{{ item.converted_last.usd }}
|
<div class="text-main text-sm">
|
||||||
</span>
|
{{ shortName(item?.base, item.coin_id) }}/{{
|
||||||
</template>
|
shortName(item?.target, item.target_coin_id)
|
||||||
</VListItem>
|
}}
|
||||||
</VList>
|
</div>
|
||||||
</VMenu>
|
|
||||||
|
|
||||||
<VSpacer />
|
<div class="text-base text-main">
|
||||||
|
${{ item.converted_last.usd }}
|
||||||
<div class="d-flex align-center">
|
</div>
|
||||||
<sub>
|
</div>
|
||||||
<h6 class="text-xs font-weight-regular">$</h6>
|
</li>
|
||||||
</sub>
|
</ul>
|
||||||
<span class="text-h5">{{ ticker.converted_last.usd }}</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<VSpacer />
|
|
||||||
<VBtn
|
<a
|
||||||
block
|
|
||||||
:color="store.trustColor"
|
:color="store.trustColor"
|
||||||
class="mt-3"
|
class="mt-5 text-white btn btn-success w-full flex items-center"
|
||||||
:href="ticker.trade_url"
|
:href="ticker.trade_url"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
Buy {{ coinInfo.symbol || '' }}
|
Buy {{ coinInfo.symbol || '' }}
|
||||||
</VBtn>
|
</a>
|
||||||
</VCardItem>
|
</div>
|
||||||
</VCol>
|
</div>
|
||||||
<VCol md="7">
|
|
||||||
<VCardItem>
|
<div class="flex-1 hidden md:block">
|
||||||
<PriceMarketChart />
|
<PriceMarketChart />
|
||||||
</VCardItem>
|
</div>
|
||||||
</VCol>
|
</div>
|
||||||
</VRow>
|
<div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
|
||||||
<VDivider />
|
<div class="max-h-[250px] overflow-auto p-4 text-sm">
|
||||||
<VCardText style="max-height: 250px; overflow: auto">
|
|
||||||
<MdEditor
|
<MdEditor
|
||||||
:model-value="coinInfo.description?.en"
|
:model-value="coinInfo.description?.en"
|
||||||
previewOnly
|
previewOnly
|
||||||
></MdEditor>
|
></MdEditor>
|
||||||
</VCardText>
|
</div>
|
||||||
<VCardItem>
|
<div class="mx-4 flex flex-wrap items-center">
|
||||||
<VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{
|
<div
|
||||||
tag
|
v-for="tag in coinInfo.categories"
|
||||||
}}</VChip>
|
class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
|
||||||
</VCardItem>
|
>
|
||||||
</VCard>
|
{{ tag }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
|
||||||
<div v-for="item in store.stats">
|
<div v-for="item in store.stats">
|
||||||
@ -189,30 +195,26 @@ function shortName(name: string, id: string) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<VCard class="my-5">
|
<div class="bg-base-100 rounded mt-4 shadow">
|
||||||
<VCardItem class="pb-0">
|
<div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
|
||||||
<VCardTitle>Active Proposals</VCardTitle>
|
Active Proposals
|
||||||
</VCardItem>
|
</div>
|
||||||
<VCardItem>
|
<div class="px-4 pb-4">
|
||||||
<ProposalListItem :proposals="store?.proposals" />
|
<ProposalListItem :proposals="store?.proposals" />
|
||||||
</VCardItem>
|
</div>
|
||||||
<VCardText v-if="store.proposals.length === 0"
|
<div class="pl-4 pb-8 py-4" v-if="store.proposals?.length === 0">
|
||||||
>No active proposals</VCardText
|
No active proposals
|
||||||
>
|
</div>
|
||||||
</VCard>
|
</div>
|
||||||
|
|
||||||
<VBtn block color="secondary" variant="outlined" class="mt-5"
|
<div
|
||||||
>Connect Wallet</VBtn
|
class="btn btn-primary w-full mt-5 flex items-center bg-transparent text-primary hover:bg-gray-100 hover:bg-transparent"
|
||||||
>
|
>
|
||||||
|
Connect Wallet
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.card-box {
|
|
||||||
border: 1px solid rgb(var(--v-theme-primary));
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<route>
|
<route>
|
||||||
{
|
{
|
||||||
meta: {
|
meta: {
|
||||||
|
Loading…
Reference in New Issue
Block a user