From 3f42e542f5061a476bdd6fa70c732c3e2f736baf Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 5 May 2023 09:01:31 +0800
Subject: [PATCH] feat: block ui

---
 src/modules/[chain]/block/[height].vue |  77 ++++++++------
 src/modules/[chain]/block/index.vue    | 142 +++++++++++++------------
 2 files changed, 116 insertions(+), 103 deletions(-)

diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index 4665d785..eac2db23 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@@ -1,58 +1,67 @@
 <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()
-    }
-}) 
-
+  if (from.path !== to.path) {
+    store.fetchBlock(String(to.params.height));
+    next();
+  }
+});
 </script>
 <template>
-<div>
+  <div>
     <VCard>
-        <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>
-            </span>
-        </VCardTitle>
-        <VCardItem class="pt-0">
-            <DynamicComponent :value="store.current.block_id"/>
-        </VCardItem>
+      <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>
+        </span>
+      </VCardTitle>
+      <VCardItem class="pt-0">
+        <DynamicComponent :value="store.current.block_id" />
+      </VCardItem>
     </VCard>
 
     <VCard title="Block Header" class="my-5">
-        <VCardItem class="pt-0">
-            <DynamicComponent :value="store.current.block?.header"/>
-        </VCardItem>
+      <VCardItem class="pt-0">
+        <DynamicComponent :value="store.current.block?.header" />
+      </VCardItem>
     </VCard>
 
     <VCard title="Transactions">
-        <VCardItem class="pt-0">
-            <TxsElement :value="store.current.block?.data?.txs"/>
-        </VCardItem>
+      <VCardItem class="pt-0">
+        <TxsElement :value="store.current.block?.data?.txs" />
+      </VCardItem>
     </VCard>
 
     <VCard title="Last Commit" class="mt-5">
-        <VCardItem class="pt-0">
-            <DynamicComponent :value="store.current.block?.last_commit"/>
-        </VCardItem>
+      <VCardItem class="pt-0">
+        <DynamicComponent :value="store.current.block?.last_commit" />
+      </VCardItem>
     </VCard>
-</div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 7b2d9986..00b7ef7e 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -11,76 +11,80 @@ 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">
-        <VTable>
-          <thead>
-            <tr>
-              <th>Height</th>
-              <th>Hash</th>
-              <th>Proposer</th>
-              <th>Txs</th>
-              <th>Time</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in store.recents">
-              <td class="text-sm text-primary">
-                <RouterLink
-                  :to="`/${props.chain}/block/${item.block?.header?.height}`"
-                  >{{ item.block?.header?.height }}</RouterLink
-                >
-              </td>
-              <td>{{ item.block_id?.hash }}</td>
-              <td>
-                {{ format.validator(item.block?.header?.proposer_address) }}
-              </td>
-              <td>{{ item.block?.data?.txs.length }}</td>
-              <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
-            </tr>
-          </tbody>
-        </VTable>
-      </VWindowItem>
-      <VWindowItem value="transactions">
-        <VTable>
-          <thead>
-            <tr>
-              <th>Hash</th>
-              <th>Messages</th>
-              <th>Fees</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in store.txsInRecents">
-              <td>
-                <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
-                  item.hash
-                }}</RouterLink>
-              </td>
-              <td>{{ format.messages(item.tx.body.messages) }}</td>
-              <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
-            </tr>
-          </tbody>
-        </VTable>
+  <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>
 
-        <VCardItem>
-          <v-alert
-            type="info"
-            text="Only show txs in recent blocks"
-            variant="tonal"
-          ></v-alert>
-        </VCardItem>
-      </VWindowItem>
-    </VWindow>
-    <VCardActions> </VCardActions>
-  </VCard>
+  <div v-if="tab === 'blocks'" class="bg-base-100 rounded">
+    <VTable>
+      <thead>
+        <tr>
+          <th>Height</th>
+          <th>Hash</th>
+          <th>Proposer</th>
+          <th>Txs</th>
+          <th>Time</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in store.recents">
+          <td class="text-sm text-primary">
+            <RouterLink
+              :to="`/${props.chain}/block/${item.block?.header?.height}`"
+              >{{ item.block?.header?.height }}</RouterLink
+            >
+          </td>
+          <td>{{ item.block_id?.hash }}</td>
+          <td>
+            {{ format.validator(item.block?.header?.proposer_address) }}
+          </td>
+          <td>{{ item.block?.data?.txs.length }}</td>
+          <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
+        </tr>
+      </tbody>
+    </VTable>
+  </div>
+
+  <div class="bg-base-100 rounded" v-if="tab === 'transactions'">
+    <VTable>
+      <thead>
+        <tr>
+          <th>Hash</th>
+          <th>Messages</th>
+          <th>Fees</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in store.txsInRecents">
+          <td>
+            <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
+              item.hash
+            }}</RouterLink>
+          </td>
+          <td>{{ format.messages(item.tx.body.messages) }}</td>
+          <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+        </tr>
+      </tbody>
+    </VTable>
+    <div class="p-4">
+      <v-alert
+        type="info"
+        text="Only show txs in recent blocks"
+        variant="tonal"
+      ></v-alert>
+    </div>
+  </div>
 </template>
 
 <route>