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

feat: block ui

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-05 09:01:31 +08:00
parent 45eb49175c
commit 3f42e542f5
2 changed files with 116 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/modules/[chain]/block/[height].vue
View File

@ -1,26 +1,26 @@
<script lang="ts" setup> <script lang="ts" setup>
import TxsElement from '@/components/dynamic/TxsElement.vue'; import TxsElement from '@/components/dynamic/TxsElement.vue';
import { useBlockModule } from './block' import { useBlockModule } from './block';
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue'; import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
import { computed } from '@vue/reactivity'; import { computed } from '@vue/reactivity';
import { onBeforeRouteUpdate } from 'vue-router'; import { onBeforeRouteUpdate } from 'vue-router';
const props = defineProps(["height", "chain"]); const props = defineProps(['height', 'chain']);
const store = useBlockModule() const store = useBlockModule()
store.fetchBlock(props.height) const store = useBlockModule();
const tab = ref('summary') store.fetchBlock(props.height);
const tab = ref('summary');
const height = computed(() => { const height = computed(() => {
return Number(store.current.block?.header?.height || props.height || 0) return Number(store.current.block?.header?.height || props.height || 0);
}) });
onBeforeRouteUpdate(async (to, from, next) => { onBeforeRouteUpdate(async (to, from, next) => {
if (from.path !== to.path) { if (from.path !== to.path) {
store.fetchBlock(String(to.params.height)) store.fetchBlock(String(to.params.height));
next() next();
} }
}) });
</script> </script>
<template> <template>
<div> <div>
@ -28,8 +28,17 @@ onBeforeRouteUpdate(async (to, from, next) => {
<VCardTitle class="d-flex justify-space-between"> <VCardTitle class="d-flex justify-space-between">
<span class="mt-2">#{{ store.current.block?.header?.height }}</span> <span class="mt-2">#{{ store.current.block?.header?.height }}</span>
<span v-if="props.height" class="mt-2"> <span v-if="props.height" class="mt-2">
<VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height - 1}`" class="mr-2"><VIcon icon="mdi-arrow-left"/></VBtn> <VBtn
<VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height + 1}`"><VIcon icon="mdi-arrow-right"/></VBtn> size="32"
:to="`/${store.blockchain.chainName}/block/${height - 1}`"
class="mr-2"
><VIcon icon="mdi-arrow-left"
/></VBtn>
<VBtn
size="32"
:to="`/${store.blockchain.chainName}/block/${height + 1}`"
><VIcon icon="mdi-arrow-right"
/></VBtn>
</span> </span>
</VCardTitle> </VCardTitle>
<VCardItem class="pt-0"> <VCardItem class="pt-0">

40
src/modules/[chain]/block/index.vue
View File

@ -11,15 +11,22 @@ const tab = ref('blocks');
const format = useFormatter(); const format = useFormatter();
</script> </script>
<template> <template>
<VCard> <div class="tabs tabs-boxed bg-transparent mb-4">
<VCardTitle class="d-flex justify-space-between"> <a
<VTabs v-model="tab"> class="tab text-gray-400 uppercase"
<VTab value="blocks">Blocks</VTab> :class="{ 'tab-active': tab === 'blocks' }"
<VTab value="transactions">Transactions</VTab> @click="tab = 'blocks'"
</VTabs> >Blocks</a
</VCardTitle> >
<VWindow v-model="tab"> <a
<VWindowItem value="blocks"> class="tab text-gray-400 uppercase"
:class="{ 'tab-active': tab === 'transactions' }"
@click="tab = 'transactions'"
>Transactions</a
>
</div>
<div v-if="tab === 'blocks'" class="bg-base-100 rounded">
<VTable> <VTable>
<thead> <thead>
<tr> <tr>
@ -47,8 +54,9 @@ const format = useFormatter();
</tr> </tr>
</tbody> </tbody>
</VTable> </VTable>
</VWindowItem> </div>
<VWindowItem value="transactions">
<div class="bg-base-100 rounded" v-if="tab === 'transactions'">
<VTable> <VTable>
<thead> <thead>
<tr> <tr>
@ -69,18 +77,14 @@ const format = useFormatter();
</tr> </tr>
</tbody> </tbody>
</VTable> </VTable>
<div class="p-4">
<VCardItem>
<v-alert <v-alert
type="info" type="info"
text="Only show txs in recent blocks" text="Only show txs in recent blocks"
variant="tonal" variant="tonal"
></v-alert> ></v-alert>
</VCardItem> </div>
</VWindowItem> </div>
</VWindow>
<VCardActions> </VCardActions>
</VCard>
</template> </template>
<route> <route>