add blocks

src/components/Countdown.vue

@@ -3,6 +3,7 @@ import Countdown from '@chenfengyuan/vue-countdown';
 
 const props = defineProps({
   time: { type: Number },
+  css: { type: String },
 });
 </script>
 <template>
@@ -11,6 +12,9 @@ const props = defineProps({
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
   >
-    {{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds
+    <span class="text-primary font-bold" :class="css">{{ days }}</span> days 
+    <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours 
+    <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes 
+    <span class="text-primary font-bold" :class="css">{{ seconds }}</span> seconds
   </Countdown>
 </template>

src/components/dynamic/ArrayObjectElement.vue

@@ -19,15 +19,15 @@ const header = computed(() => {
 </script>
 <template>
   <div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
-    <table class="table table-compact w-full">
+    <table class="table table-compact table-pin-rows w-full">
       <thead v-if="thead">
         <tr>
           <th
             v-for="(item, index) in header"
             :key="index"
-            class="text-left text-capitalize"
+            class="text-left capitalize"
           >
-            {{ item }} 
+            {{ item }} -
           </th>
         </tr>
       </thead>

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

@@ -1,24 +1,50 @@
 <script lang="ts" setup>
+import { onMounted, ref, watchEffect } from 'vue';
 import { Icon } from '@iconify/vue';
 import TxsElement from '@/components/dynamic/TxsElement.vue';
-import { useBlockModule } from './block';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { computed } from '@vue/reactivity';
 import { onBeforeRouteUpdate } from 'vue-router';
-import { useBaseStore } from '@/stores';
-import { ref } from 'vue';
+import { useBaseStore, useFormatter } from '@/stores';
 import type { Block } from '@/types';
+import Countdown from '@/components/Countdown.vue';
+
 const props = defineProps(['height', 'chain']);
 
 const store = useBaseStore();
-const tab = ref('summary');
+const format = useFormatter()
 const current = ref({} as Block)
-store.fetchBlock(props.height).then(x => current.value = x)
 
 const height = computed(() => {
   return Number(current.value.block?.header?.height || props.height || 0);
 });
 
+const isFutureBlock = computed({
+  get: () => {
+    const latest = store.latest?.block?.header.height
+    const isFuture = latest ? Number(props.height) > Number(latest): true
+    if(!isFuture) store.fetchBlock(props.height).then(x => current.value = x)
+    return isFuture
+  },
+  set: val => {
+    console.log(val)
+  }
+})
+
+const remainingBlocks = computed(() => {
+  const latest = store.latest?.block?.header.height
+  return latest ? Number(props.height) - Number(latest) : 0
+})
+
+const estimateTime = computed(() => {
+  const seconds = remainingBlocks.value * Number((store.blocktime / 1000).toFixed()) * 1000
+  return seconds
+})
+
+const estimateDate = computed(() => {
+  return new Date(new Date().getTime() + estimateTime.value)
+})
+
 onBeforeRouteUpdate(async (to, from, next) => {
   if (from.path !== to.path) {
     store.fetchBlock(String(to.params.height)).then(x => current.value = x);
@@ -28,42 +54,62 @@ onBeforeRouteUpdate(async (to, from, next) => {
 </script>
 <template>
   <div>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title flex flex-row justify-between">
-        <p class="">#{{ current.block?.header?.height }}</p>
-        <div class="flex" v-if="props.height">
-          <RouterLink
-            :to="`/${store.blockchain.chainName}/block/${height - 1}`"
-            class="btn btn-primary btn-sm p-1 text-2xl mr-2"
-          >
-            <Icon icon="mdi-arrow-left" class="w-full h-full" />
-          </RouterLink>
-          <RouterLink
-            :to="`/${store.blockchain.chainName}/block/${height + 1}`"
-            class="btn btn-primary btn-sm p-1 text-2xl"
-          >
-            <Icon icon="mdi-arrow-right" class="w-full h-full" />
-          </RouterLink>
-        </div>
-      </h2>
-      <div>
-        <DynamicComponent :value="current.block_id" />
+    <div v-if="isFutureBlock" class="text-center pt-28">
+      <Countdown :time="estimateTime" css="text-5xl font-sans md:mx-5"/>
+      <div class="my-5">Estimated Time: {{ format.toLocaleDate(estimateDate) }}</div>
+      <div class="pt-10 flex justify-center">
+        <table class="table table-compact rounded-lg">
+          <tbody>
+            <tr class="hover">
+              <td>Countdown For Block:</td><td class="text-right"><span class=" ml-40">#{{ height }}</span></td>
+            </tr>
+            <tr class="hover">
+              <td>Current Height:</td><td class="text-right">#{{ store.latest?.block?.header.height }}</td>
+            </tr>
+            <tr class="hover">
+              <td>Remaining Blocks:</td><td class="text-right">{{ remainingBlocks }}</td>
+            </tr>
+            <tr class="hover">
+              <td>Average Block Time:</td><td class="text-right">{{ (store.blocktime/1000).toFixed(1) }}s</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
+    <div v-else>
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title flex flex-row justify-between">
+          <p class="">#{{ current.block?.header?.height }}</p>
+          <div class="flex" v-if="props.height">
+            <RouterLink :to="`/${store.blockchain.chainName}/block/${height - 1}`"
+              class="btn btn-primary btn-sm p-1 text-2xl mr-2">
+              <Icon icon="mdi-arrow-left" class="w-full h-full" />
+            </RouterLink>
+            <RouterLink :to="`/${store.blockchain.chainName}/block/${height + 1}`"
+              class="btn btn-primary btn-sm p-1 text-2xl">
+              <Icon icon="mdi-arrow-right" class="w-full h-full" />
+            </RouterLink>
+          </div>
+        </h2>
+        <div>
+          <DynamicComponent :value="current.block_id" />
+        </div>
+      </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title flex flex-row justify-between">Block Header</h2>
-      <DynamicComponent :value="current.block?.header" />
-    </div>
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title flex flex-row justify-between">Block Header</h2>
+        <DynamicComponent :value="current.block?.header" />
+      </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title flex flex-row justify-between">Transactions</h2>
-      <TxsElement :value="current.block?.data?.txs" />
-    </div>
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title flex flex-row justify-between">Transactions</h2>
+        <TxsElement :value="current.block?.data?.txs" />
+      </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-      <h2 class="card-title flex flex-row justify-between">Last Commit</h2>
-      <DynamicComponent :value="current.block?.last_commit" />
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+        <h2 class="card-title flex flex-row justify-between">Last Commit</h2>
+        <DynamicComponent :value="current.block?.last_commit" />
+      </div>
     </div>
   </div>
 </template>

src/stores/useBaseStore.ts

@@ -27,7 +27,8 @@ export const useBaseStore = defineStore('baseStore', {
                     const diff = dayjs(this.latest.block?.header?.time).diff(
                         this.earlest.block?.header?.time
                     );
-                    return diff;
+                    const blocks = Number(this.latest.block.header.height) - Number(this.earlest.block.header.height)
+                    return diff / (blocks);
                 }
             }
             return 6000;