feat: Create a cell component to display block height and time (#529)

aeternity · Oct 19, 2023 · 1bac63d · 1bac63d
1 parent eb9284d
commit 1bac63d
Show file tree

Hide file tree

Showing 44 changed files with 166 additions and 358 deletions.
diff --git a/src/components/AccountActivitiesTable.vue b/src/components/AccountActivitiesTable.vue
@@ -48,13 +48,9 @@
           </template>
         </td>
         <td>
-          <div>
-            <app-link
-              :to="`/keyblocks/${activity.height}`">
-              {{ activity.height }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="activity.time"/>
+          <block-time-cell
+            :height="activity.height"
+            :datetime="activity.time"/>
         </td>
         <td>
           <account-activity-type-cell
@@ -80,7 +76,6 @@
 import AccountActivityCell from '@/components/AccountActivityCell'
 import AccountActivityTypeCell from '@/components/AccountActivityTypeCell'
 import AccountActivityDataCell from '@/components/AccountActivityDataCell'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { accountHints } from '@/utils/hints/accountHints'
 import HintTooltip from '@/components/HintTooltip'

diff --git a/src/components/AccountActivitiesTableCondensed.vue b/src/components/AccountActivitiesTableCondensed.vue
@@ -34,13 +34,9 @@
             </app-tooltip>
           </th>
           <td class="account-activities-table-condensed__data">
-            <div>
-              <app-link
-                :to="`/keyblocks/${activity.height}`">
-                {{ activity.height }}
-              </app-link>
-            </div>
-            <datetime-label :datetime="activity.time"/>
+            <block-time-cell
+              :height="activity.height"
+              :datetime="activity.time"/>
           </td>
         </tr>
         <tr class="account-activities-table-condensed__row">
@@ -97,7 +93,6 @@
 import AccountActivityCell from '@/components/AccountActivityCell'
 import AccountActivityTypeCell from '@/components/AccountActivityTypeCell'
 import AccountActivityDataCell from '@/components/AccountActivityDataCell'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { accountHints } from '@/utils/hints/accountHints'
 import AppTooltip from '@/components/AppTooltip'

diff --git a/src/components/AccountNamesTable.vue b/src/components/AccountNamesTable.vue
@@ -32,13 +32,9 @@
           </app-link>
         </td>
         <td>
-          <div>
-            <app-link
-              :to="`/keyblocks/${name.expirationHeight}`">
-              {{ name.expirationHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="name.expires"/>
+          <block-time-cell
+            :height="name.expirationHeight"
+            :datetime="name.expiration"/>
         </td>
         <td>
           <value-hash-ellipsed
@@ -55,7 +51,6 @@
 <script setup>
 import AppLink from '@/components/AppLink'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import { accountHints } from '@/utils/hints/accountHints'
 import HintTooltip from '@/components/HintTooltip'
 

diff --git a/src/components/AccountNamesTableCondensed.vue b/src/components/AccountNamesTableCondensed.vue
@@ -32,13 +32,9 @@
             </app-tooltip>
           </th>
           <td class="account-names-table-condensed__data">
-            <div>
-              <app-link
-                :to="`/keyblocks/${name.expirationHeight}`">
-                {{ name.expirationHeight }}
-              </app-link>
-            </div>
-            <datetime-label :datetime="name.expires"/>
+            <block-time-cell
+              :height="name.expirationHeight"
+              :datetime="name.expiration"/>
           </td>
         </tr>
         <tr class="account-names-table-condensed__row">
@@ -73,7 +69,6 @@
 import AppLink from '@/components/AppLink'
 import AppTooltip from '@/components/AppTooltip'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import { accountHints } from '@/utils/hints/accountHints'
 
 defineProps({

diff --git a/src/components/AccountTransactionsTable.vue b/src/components/AccountTransactionsTable.vue
@@ -38,13 +38,9 @@
             :link-to="`/transactions/${transaction.hash}`"/>
         </td>
         <td>
-          <div>
-            <app-link
-              :to="`/keyblocks/${transaction.createdHeight}`">
-              {{ transaction.createdHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="transaction.created"/>
+          <block-time-cell
+            :height="transaction.createdHeight"
+            :datetime="transaction.created"/>
         </td>
         <td>
           {{ transaction.type }}
@@ -64,7 +60,6 @@
 
 <script setup>
 import TransactionCell from '@/components/TransactionCell'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { accountHints } from '@/utils/hints/accountHints'
 import HintTooltip from '@/components/HintTooltip'

diff --git a/src/components/AccountTransactionsTableCondensed.vue b/src/components/AccountTransactionsTableCondensed.vue
@@ -30,13 +30,9 @@
             </app-tooltip>
           </th>
           <td class="account-transactions-table-condensed__data">
-            <div>
-              <app-link
-                :to="`/keyblocks/${transaction.createdHeight}`">
-                {{ transaction.createdHeight }}
-              </app-link>
-            </div>
-            <datetime-label :datetime="transaction.created"/>
+            <block-time-cell
+              :height="transaction.createdHeight"
+              :datetime="transaction.created"/>
           </td>
         </tr>
         <tr class="account-transactions-table-condensed__row">
@@ -82,7 +78,6 @@ import { transactionsHints } from '@/utils/hints/transactionsHints'
 import { accountHints } from '@/utils/hints/accountHints'
 import TransactionCell from '@/components/TransactionCell'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import AppTooltip from '@/components/AppTooltip'
 
 defineProps({

diff --git a/src/components/BlockTimeCell.vue b/src/components/BlockTimeCell.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <app-link
+      :to="`/keyblocks/${height}`">
+      {{ height }}
+    </app-link>
+  </div>
+  <datetime-label :datetime="datetime"/>
+</template>
+
+<script setup>
+defineProps({
+  height: {
+    type: String,
+    required: true,
+  },
+  datetime: {
+    type: Object,
+    required: true,
+  },
+})
+
+</script>
diff --git a/src/components/ContractCallTransactionsTable.vue b/src/components/ContractCallTransactionsTable.vue
@@ -38,13 +38,9 @@
             :link-to="`/transactions/${transaction.hash}`"/>
         </td>
         <td>
-          <div>
-            <app-link
-              :to="`/keyblocks/${transaction.createdHeight}`">
-              {{ transaction.createdHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="transaction.created"/>
+          <block-time-cell
+            :height="transaction.createdHeight"
+            :datetime="transaction.created"/>
         </td>
         <td>
           <value-hash-ellipsed
@@ -68,7 +64,6 @@
 
 <script setup>
 import { contractsHints } from '@/utils/hints/contractsHints'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import AppChip from '@/components/AppChip'
 

diff --git a/src/components/ContractCallTransactionsTableCondensed.vue b/src/components/ContractCallTransactionsTableCondensed.vue
@@ -29,13 +29,9 @@
           </app-tooltip>
         </th>
         <td class="contract-call-transactions-table-condensed__data">
-          <div>
-            <app-link
-              :to="`/keyblocks/${transaction.createdHeight}`">
-              {{ transaction.createdHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="transaction.created"/>
+          <block-time-cell
+            :height="transaction.createdHeight"
+            :datetime="transaction.created"/>
         </td>
       </tr>
       <tr class="contract-call-transactions-table-condensed__row">
@@ -78,7 +74,6 @@
 </template>
 
 <script setup>
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import AppChip from '@/components/AppChip'
 import { contractsHints } from '@/utils/hints/contractsHints'

diff --git a/src/components/ContractEventsTable.vue b/src/components/ContractEventsTable.vue
@@ -36,13 +36,9 @@
             :link-to="`/transactions/${event.callTxHash}`"/>
         </td>
         <td :class="[{'contract-events-table__data--expanded': isExpanded.includes(index)}]">
-          <div>
-            <app-link
-              :to="`/keyblocks/${event.createdHeight}`">
-              {{ event.createdHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="event.created"/>
+          <block-time-cell
+            :height="event.createdHeight"
+            :datetime="event.created"/>
         </td>
         <td :class="[{'contract-events-table__data--expanded': isExpanded.includes(index)}]">
           {{ event.eventName || 'N/A' }}
@@ -78,7 +74,6 @@
 
 <script setup>
 import { contractsHints } from '@/utils/hints/contractsHints'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import EventDataPanel from '@/components/EventDataPanel'
 import ExpandButton from '@/components/ExpandButton'

diff --git a/src/components/ContractEventsTableCondensed.vue b/src/components/ContractEventsTableCondensed.vue
@@ -29,13 +29,9 @@
           </app-tooltip>
         </th>
         <td class="contract-events-table-condensed__data">
-          <div>
-            <app-link
-              :to="`/keyblocks/${event.createdHeight}`">
-              {{ event.createdHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="event.created"/>
+          <block-time-cell
+            :height="event.createdHeight"
+            :datetime="event.created"/>
         </td>
       </tr>
       <tr class="contract-events-table-condensed__row">
@@ -95,7 +91,6 @@
 <script setup>
 import { contractsHints } from '@/utils/hints/contractsHints'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import ExpandButton from '@/components/ExpandButton'
 
 const props = defineProps({

diff --git a/src/components/ContractsTable.vue b/src/components/ContractsTable.vue
@@ -38,13 +38,9 @@
             :hash="contract.contractId"/>
         </td>
         <td class="contracts-table__data">
-          <div>
-            <app-link
-              :to="`/keyblocks/${contract.createdHeight}`">
-              {{ contract.createdHeight }}
-            </app-link>
-          </div>
-          <datetime-label :datetime="contract.created"/>
+          <block-time-cell
+            :height="contract.createdHeight"
+            :datetime="contract.created"/>
         </td>
         <td class="contracts-table__data">
           <value-hash-ellipsed
@@ -63,7 +59,6 @@
 <script setup>
 import { contractsHints } from '@/utils/hints/contractsHints'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import HintTooltip from '@/components/HintTooltip'
 
 defineProps({

diff --git a/src/components/ContractsTableCondensed.vue b/src/components/ContractsTableCondensed.vue
@@ -30,13 +30,9 @@
             </app-tooltip>
           </th>
           <td class="contracts-table-condensed__data">
-            <div>
-              <app-link
-                :to="`/keyblocks/${contract.createdHeight}`">
-                {{ contract.createdHeight }}
-              </app-link>
-            </div>
-            <datetime-label :datetime="contract.created"/>
+            <block-time-cell
+              :height="contract.createdHeight"
+              :datetime="contract.created"/>
           </td>
         </tr>
         <tr class="contracts-table-condensed__row">
@@ -76,7 +72,6 @@
 
 <script setup>
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import { contractsHints } from '@/utils/hints/contractsHints'
 
 defineProps({

diff --git a/src/components/DashboardAuctionsTable.vue b/src/components/DashboardAuctionsTable.vue
@@ -49,13 +49,9 @@
         </td>
         <td>
           <div class="dashboard-auctions-table__blocks">
-            <app-link
-              :to="`/keyblocks/${auction.expirationHeight}`">
-              {{ auction.expirationHeight }}
-            </app-link>
-          </div>
-          <div>
-            <datetime-label :datetime="auction.expiration"/>
+            <block-time-cell
+              :height="auction.expirationHeight"
+              :datetime="auction.expiration"/>
           </div>
         </td>
       </tr>
@@ -69,7 +65,6 @@ import { namesHints } from '@/utils/hints/namesHints'
 import { useNamesStore } from '@/stores/names'
 import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 
 const { auctionsEndingSoon } = storeToRefs(useNamesStore())
 </script>

diff --git a/src/components/DashboardNamesTable.vue b/src/components/DashboardNamesTable.vue
@@ -52,13 +52,9 @@
         </td>
         <td>
           <div class="dashboard-names-table__blocks">
-            <app-link
-              :to="`/keyblocks/${name.activatedHeight}`">
-              {{ name.activatedHeight }}
-            </app-link>
-          </div>
-          <div>
-            <datetime-label :datetime="name.activated"/>
+            <block-time-cell
+              :height="name.activatedHeight"
+              :datetime="name.activated"/>
           </div>
         </td>
       </tr>
@@ -72,7 +68,6 @@ import { namesHints } from '@/utils/hints/namesHints'
 import { useNamesStore } from '@/stores/names'
 import { formatAePrice, formatNullable } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import DatetimeLabel from '@/components/DatetimeLabel'
 
 const { recentlyActivatedNames } = storeToRefs(useNamesStore())
 </script>