feat: block ui

src/modules/[chain]/block/[height].vue

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

src/modules/[chain]/block/index.vue

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