From 950aa3b079fe78ebca80927ea622f96998d8b92b Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Mon, 24 Jul 2023 11:29:59 +0200
Subject: [PATCH] feat: Keyblock microblocks table (#382)

Co-authored-by: luekromanowicz <lromanowicz1@gmail.com>
---
 src/components/KeyblockMicroblocksPanel.vue   | 74 ++++++++++++++
 src/components/KeyblockMicroblocksTable.vue   | 50 ++++++++++
 .../KeyblockMicroblocksTableCondensed.vue     | 96 +++++++++++++++++++
 src/pages/keyblocks/[id].vue                  | 11 ++-
 src/stores/keyblockDetails.js                 | 15 ++-
 src/utils/adapters.js                         | 15 +++
 src/utils/hints/keyblocksHints.js             |  5 +
 7 files changed, 264 insertions(+), 2 deletions(-)
 create mode 100644 src/components/KeyblockMicroblocksPanel.vue
 create mode 100644 src/components/KeyblockMicroblocksTable.vue
 create mode 100644 src/components/KeyblockMicroblocksTableCondensed.vue
 create mode 100644 src/utils/hints/keyblocksHints.js

diff --git a/src/components/KeyblockMicroblocksPanel.vue b/src/components/KeyblockMicroblocksPanel.vue
new file mode 100644
index 000000000..5036a6ca0
--- /dev/null
+++ b/src/components/KeyblockMicroblocksPanel.vue
@@ -0,0 +1,74 @@
+<template>
+  <app-panel
+    v-if="microblocks"
+    class="keyblock-microblock-panel">
+    <paginated-content
+      v-model:page-index="pageIndex"
+      pagination-style="history"
+      :entities="microblocks"
+      :total-count="keyblockDetails.micro_blocks_count"
+      :limit="limit"
+      @prev-clicked="loadPrevMicroblocks"
+      @next-clicked="loadNextMicroblocks">
+      <keyblock-microblocks-table
+        :microblocks="microblocks"
+        class="keyblock-microblock-panel__table"/>
+      <keyblock-microblocks-table-condensed
+        :microblocks="microblocks"
+        class="keyblock-microblock-panel__table-condensed"/>
+    </paginated-content>
+  </app-panel>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import { useKeyblockDetailsStore } from '@/stores/keyblockDetails'
+import PaginatedContent from '@/components/PaginatedContent'
+import KeyblockMicroblocksTable from '@/components/KeyblockMicroblocksTable'
+import KeyblockMicroblocksTableCondensed from '@/components/KeyblockMicroblocksTableCondensed'
+import { isDesktop } from '@/utils/screen'
+
+const { keyblockMicroblocks: microblocks, keyblockDetails } = storeToRefs(useKeyblockDetailsStore())
+const { fetchKeyblockMicroblocks } = useKeyblockDetailsStore()
+const route = useRoute()
+
+const limit = computed(() => isDesktop() ? 10 : 3)
+
+if (process.client) {
+  fetchKeyblockMicroblocks({
+    limit: limit.value,
+    keyblockHash: route.params.id,
+  })
+}
+
+const pageIndex = ref(1)
+const loadPrevMicroblocks = () =>
+  fetchKeyblockMicroblocks(
+    { queryParameters: microblocks.value.prev })
+const loadNextMicroblocks = () =>
+  fetchKeyblockMicroblocks(
+    { queryParameters: microblocks.value.next })
+</script>
+
+<style scoped>
+.keyblock-microblock-panel {
+  padding: var(--space-4) var(--space-1) var(--space-4);
+  margin-top: var(--space-2);
+  @media (--desktop) {
+    padding: var(--space-4) var(--space-4) var(--space-4);
+  }
+
+  &__table {
+    display: none;
+    @media (--desktop) {
+      display: revert;
+    }
+  }
+
+  &__table-condensed {
+    @media (--desktop) {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/KeyblockMicroblocksTable.vue b/src/components/KeyblockMicroblocksTable.vue
new file mode 100644
index 000000000..a073bba7b
--- /dev/null
+++ b/src/components/KeyblockMicroblocksTable.vue
@@ -0,0 +1,50 @@
+<template>
+  <table>
+    <tr>
+      <th>
+        Hash
+        <hint-tooltip>
+          {{ keyblocksHints.microblockHash }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Time
+        <hint-tooltip>
+          {{ keyblocksHints.time }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Transactions Count
+        <hint-tooltip>
+          {{ keyblocksHints.transactionsCount }}
+        </hint-tooltip>
+      </th>
+    </tr>
+    <tr
+      v-for="microblock in microblocks.data"
+      :key="microblock.hash">
+      <td>
+        <value-hash-ellipsed
+          :link-to="`/microblocks/${microblock.hash}`"
+          :hash="microblock.hash"/>
+      </td>
+      <td>
+        <datetime-label :datetime="microblock.time"/>
+      </td>
+      <td>
+        {{ microblock.transactionsCount }}
+      </td>
+    </tr>
+  </table>
+</template>
+<script setup>
+import { keyblocksHints } from '@/utils/hints/keyblocksHints'
+import DatetimeLabel from '@/components/DatetimeLabel'
+
+defineProps({
+  microblocks: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
diff --git a/src/components/KeyblockMicroblocksTableCondensed.vue b/src/components/KeyblockMicroblocksTableCondensed.vue
new file mode 100644
index 000000000..2cb2bc426
--- /dev/null
+++ b/src/components/KeyblockMicroblocksTableCondensed.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="keyblock-microblocks-table-condensed">
+    <table
+      v-for="microblock in microblocks.data"
+      :key="microblock.hash"
+      class="keyblock-microblocks-table-condensed__table">
+      <tbody>
+        <tr class="keyblock-microblocks-table-condensed__row">
+          <th class="keyblock-microblocks-table-condensed__header">
+            <app-tooltip>
+              Hash
+              <template #tooltip>
+                {{ keyblocksHints.microblockHash }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="keyblock-microblocks-table-condensed__data">
+            <value-hash-ellipsed
+              :hash="microblock.hash"
+              :link-to="`/microblocks/${microblock.hash}`"/>
+          </td>
+        </tr>
+        <tr class="keyblock-microblocks-table-condensed__row">
+          <th class="keyblock-microblocks-table-condensed__header">
+            <app-tooltip>
+              Time
+              <template #tooltip>
+                {{ keyblocksHints.time }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="keyblock-microblocks-table-condensed__data">
+            <datetime-label :datetime="microblock.time"/>
+          </td>
+        </tr>
+        <tr class="keyblock-microblocks-table-condensed__row">
+          <th class="keyblock-microblocks-table-condensed__header">
+            <app-tooltip>
+              Transactions Count
+              <template #tooltip>
+                {{ keyblocksHints.transactionsCount }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="keyblock-microblocks-table-condensed__data">
+            <div>
+              {{ microblock.transactionsCount }}
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script setup>
+import { keyblocksHints } from '@/utils/hints/keyblocksHints'
+import DatetimeLabel from '@/components/DatetimeLabel'
+
+defineProps({
+  microblocks: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.keyblock-microblocks-table-condensed {
+  &__table {
+    background: var(--color-white);
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+
+    &:last-of-type {
+      margin-bottom: var(--space-2);
+    }
+  }
+
+  &__header {
+    vertical-align: top;
+    border-bottom: 1px solid var(--color-midnight-15);
+    padding-right: var(--space-4);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+    font-family: var(--font-monospaced);
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+</style>
diff --git a/src/pages/keyblocks/[id].vue b/src/pages/keyblocks/[id].vue
index a70e77b07..a923e7836 100644
--- a/src/pages/keyblocks/[id].vue
+++ b/src/pages/keyblocks/[id].vue
@@ -10,14 +10,23 @@
   <keyblock-details-panel
     v-if="keyblockDetails"
     :keyblock-details="keyblockDetails"/>
+
+  <app-tabs>
+    <app-tab title="Microblocks">
+      <keyblock-microblocks-panel/>
+    </app-tab>
+  </app-tabs>
 </template>
 
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useRoute } from 'nuxt/app'
-import { useKeyblockDetailsStore } from '@/stores/keyblockDetails'
 import PageHeader from '@/components/PageHeader'
 import KeyblockDetailsPanel from '@/components/KeyblockDetailsPanel'
+import KeyblockMicroblocksPanel from '@/components/KeyblockMicroblocksPanel'
+import { useKeyblockDetailsStore } from '@/stores/keyblockDetails'
+import AppTabs from '~/components/AppTabs'
+import AppTab from '~/components/AppTab'
 
 const keyblockDetailsStore = useKeyblockDetailsStore()
 const { keyblockDetails } = storeToRefs(keyblockDetailsStore)
diff --git a/src/stores/keyblockDetails.js b/src/stores/keyblockDetails.js
index e64b39349..9a54a8210 100644
--- a/src/stores/keyblockDetails.js
+++ b/src/stores/keyblockDetails.js
@@ -1,17 +1,21 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
 import { useRuntimeConfig } from 'nuxt/app'
-import { adaptKeyblock } from '@/utils/adapters'
+import { adaptKeyblock, adaptKeyblockMicroblocks } from '@/utils/adapters'
 
 export const useKeyblockDetailsStore = defineStore('keyblockDetails', () => {
   const { MIDDLEWARE_URL } = useRuntimeConfig().public
 
   const rawKeyblock = ref(null)
   const keyblockDeltaStats = ref(null)
+  const rawKeyblockMicroblocks = ref(null)
 
   const keyblockDetails = computed(() => {
     return rawKeyblock.value?.hash ? adaptKeyblock(rawKeyblock.value, keyblockDeltaStats.value) : rawKeyblock.value
   })
+  const keyblockMicroblocks = computed(() => {
+    return rawKeyblockMicroblocks.value ? adaptKeyblockMicroblocks(rawKeyblockMicroblocks.value) : null
+  })
 
   async function fetchKeyblock(keyblockId) {
     await fetchKeyblockDetails(keyblockId)
@@ -33,6 +37,13 @@ export const useKeyblockDetailsStore = defineStore('keyblockDetails', () => {
     }
   }
 
+  async function fetchKeyblockMicroblocks({ queryParameters, limit, keyblockHash } = {}) {
+    rawKeyblockMicroblocks.value = null
+    const defaultParameters = `/v2/key-blocks/${keyblockHash}/micro-blocks?limit=${limit ?? 10}`
+    const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
+    rawKeyblockMicroblocks.value = data
+  }
+
   async function fetchKeyblockDeltaStats(keyblockHeight) {
     keyblockDeltaStats.value = null
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/deltastats?scope=gen:${keyblockHeight}`)
@@ -56,6 +67,8 @@ export const useKeyblockDetailsStore = defineStore('keyblockDetails', () => {
     keyblockDeltaStats,
     keyblockDetails,
     fetchKeyblock,
+    fetchKeyblockMicroblocks,
+    keyblockMicroblocks,
     isKeyblockAvailable,
   }
 })
diff --git a/src/utils/adapters.js b/src/utils/adapters.js
index 574daca00..81703fe70 100644
--- a/src/utils/adapters.js
+++ b/src/utils/adapters.js
@@ -21,6 +21,21 @@ export function adaptKeyblock(keyblock, keyblockDeltaStats = null) {
   return keyblock
 }
 
+export function adaptKeyblockMicroblocks(keyblockMicroblocks) {
+  const formattedData = keyblockMicroblocks.data.map(microblock => {
+    return {
+      time: DateTime.fromMillis(microblock.time),
+      transactionsCount: microblock.transactions_count,
+      hash: microblock.hash,
+    }
+  })
+  return {
+    next: keyblockMicroblocks.next,
+    data: formattedData,
+    prev: keyblockMicroblocks.prev,
+  }
+}
+
 export function adaptMicroblock(microblock) {
   return {
     ...microblock,
diff --git a/src/utils/hints/keyblocksHints.js b/src/utils/hints/keyblocksHints.js
new file mode 100644
index 000000000..114427120
--- /dev/null
+++ b/src/utils/hints/keyblocksHints.js
@@ -0,0 +1,5 @@
+export const keyblocksHints = {
+  microblockHash: 'Unique identifier of the microblock.',
+  time: 'Date and time when the microblock was created.',
+  transactionsCount: 'Amount of transactions in the microblock.',
+}