feat: Microblock details hints (#379)

Co-authored-by: luekromanowicz <lromanowicz1@gmail.com>
aeternity · Jul 26, 2023 · b04cf59 · b04cf59
1 parent 6bb0996
commit b04cf59
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/src/components/DashboardMicroblocksPanel.vue b/src/components/DashboardMicroblocksPanel.vue
@@ -7,9 +7,7 @@
         title="Microblocks"
         icon-name="microblocks">
         <template #tooltip>
-          Microblocks can be created every 3 seconds by the current leader, are linked to a specific keyblock
-          and include all types of on-chain transactions. The next leader is incentivized to keep the
-          microblocks in the blockchain as he receives 40% of the fees of the transactions.
+          {{ microblocksHints.microblock }}
         </template>
         <template #header>
           <div class="dashboard-microblocks-panel__summary dashboard-microblocks-panel__summary--desktop">
@@ -39,6 +37,7 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { microblocksHints } from '@/utils/hints/microblocksHints'
 import AppPanel from '@/components/AppPanel'
 import DashboardTransactionPanel from '@/components/DashboardTransactionPanel'
 import MicroblocksSequence from '@/components/MicroblocksSequence'

diff --git a/src/components/MicroblockDetailsPanel.vue b/src/components/MicroblockDetailsPanel.vue
@@ -19,6 +19,9 @@
         <tr class="microblock-details-panel__row">
           <th class="microblock-details-panel__table-header">
             Keyblock
+            <hint-tooltip>
+              {{ microblocksHints.keyblock }}
+            </hint-tooltip>
           </th>
           <td class="microblock-details-panel__data">
             <app-link :to="`/keyblocks/${microblockDetails.prev_key_hash}`">
@@ -34,6 +37,9 @@
         <tr class="microblock-details-panel__row">
           <th class="microblock-details-panel__table-header">
             Height
+            <hint-tooltip>
+              {{ microblocksHints.microblockHeight }}
+            </hint-tooltip>
           </th>
           <td class="microblock-details-panel__data">
             <app-link :to="`/keyblocks/${microblockDetails.height}`">
@@ -44,6 +50,9 @@
         <tr class="microblock-details-panel__row">
           <th class="microblock-details-panel__table-header">
             Time
+            <hint-tooltip>
+              {{ microblocksHints.time }}
+            </hint-tooltip>
           </th>
           <td class="microblock-details-panel__data">
             <datetime-label :datetime="microblockDetails.time"/>
@@ -52,6 +61,9 @@
         <tr class="microblock-details-panel__row">
           <th class="microblock-details-panel__table-header">
             Transactions Count
+            <hint-tooltip>
+              {{ microblocksHints.transactionsCount }}
+            </hint-tooltip>
           </th>
           <td class="microblock-details-panel__data">
             {{ formatNumber(microblockDetails.transactions_count) }}
@@ -60,6 +72,9 @@
         <tr class="microblock-details-panel__row">
           <th class="microblock-details-panel__table-header">
             API Links
+            <hint-tooltip>
+              {{ microblocksHints.apiLinks }}
+            </hint-tooltip>
           </th>
           <td class="microblock-details-panel__data">
             <div class="microblock-details-panel__container">
@@ -89,6 +104,7 @@
 </template>
 
 <script setup>
+import { microblocksHints } from '@/utils/hints/microblocksHints'
 import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import AppIcon from '@/components/AppIcon'

diff --git a/src/pages/microblocks/[id].vue b/src/pages/microblocks/[id].vue
@@ -5,6 +5,9 @@
 
   <page-header>
     Microblock
+    <template #tooltip>
+      {{ microblocksHints.microblock }}
+    </template>
   </page-header>
 
   <microblock-details-panel
@@ -17,6 +20,8 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useRoute } from 'nuxt/app'
+
+import { microblocksHints } from '@/utils/hints/microblocksHints'
 import { useMicroblockDetailsStore } from '@/stores/microblockDetails'
 import PageHeader from '@/components/PageHeader'
 import MicroblockDetailsPanel from '@/components/MicroblockDetailsPanel'

diff --git a/src/utils/hints/microblocksHints.js b/src/utils/hints/microblocksHints.js
@@ -1,4 +1,10 @@
 export const microblocksHints = {
+  microblock: 'Microblocks can be created every 3 seconds by the current leader, are linked to a specific keyblock, and include all types of on-chain transactions. The next leader is incentivized to keep the microblocks in the blockchain as he receives 40% of the fees of the transactions.',
+  keyblock: 'Parent keyblock id to which the microblock is linked.',
+  microblockHeight: 'Parent keyblock height to which the microblock is linked.',
+  time: 'Date and time when the microblock has been mined.',
+  transactionsCount: 'Number of transactions in the microblock.',
+  apiLinks: 'Links to sources of the microblock data.',
   transactionHash: 'Unique identifier of the transaction.',
   transactionTime: 'Keyblock height and exact date and time when the transaction was executed by inclusion into a microblock.',
   transactionType: 'The type of the transaction depends on its purpose in the æternity ecosystem.',