feat: add CL consolidations table

See: BEDS-1351

Author: enzo-bitfly

frontend/composables/useDashboardData.ts

@@ -1,5 +1,7 @@
 import type {
+  GetValidatorDashboardConsensusLayerConsolidationsResponse,
   GetValidatorDashboardConsensusLayerDepositsResponse,
+  GetValidatorDashboardExecutionLayerConsolidationsResponse,
   GetValidatorDashboardExecutionLayerDepositsResponse,
   GetValidatorDashboardTotalConsensusDepositsResponse,
   GetValidatorDashboardTotalExecutionDepositsResponse,
@@ -60,10 +62,40 @@ export const useDashboardData = () => {
 
     return res
   }
+  async function fetchElConsolidations(
+    dashboardKey: DashboardKey,
+    query?: TableQueryParams,
+  ) {
+    const res
+      = await fetch<GetValidatorDashboardExecutionLayerConsolidationsResponse>(
+        'DASHBOARD_EL_CONSOLIDATIONS',
+        undefined,
+        { dashboardKey },
+        query,
+      )
+
+    return res
+  }
+  async function fetchClConsolidations(
+    dashboardKey: DashboardKey,
+    query?: TableQueryParams,
+  ) {
+    const res
+      = await fetch<GetValidatorDashboardConsensusLayerConsolidationsResponse>(
+        'DASHBOARD_CL_CONSOLIDATIONS',
+        undefined,
+        { dashboardKey },
+        query,
+      )
+
+    return res
+  }
 
   return {
+    fetchClConsolidations,
     fetchClDeposits,
     fetchClDpositsTotalAmount,
+    fetchElConsolidations,
     fetchELDeposits,
     fetchELDpositsTotalAmount,
   }

frontend/i18n/locales/en.json

@@ -225,6 +225,30 @@
                 "search_placeholder_public": "Index, Public Key",
                 "title": "Blocks"
             },
+            "cl_consolidations": {
+                "info_slot_processed_estimated": "This is an estimation since this consolidation is still queued.",
+                "reject_reason": {
+                    "full_queue": "The consolidation queue is full.",
+                    "insufficient_consolidation_churn": "Not enough churn capacity available to consolidate.",
+                    "source_address_mismatch": "The source address doesn't match",
+                    "source_equals_target": "Source and target must be different.",
+                    "source_exiting": "The source is currently exiting and cannot be used for consolidation.",
+                    "source_inactive": "The source is inactive and cannot be used for consolidation.",
+                    "source_no_execution_withdrawal_credentials": "The source has no execution withdrawal credentials.",
+                    "source_pending_withdrawals": "The source has pending withdrawals that must be completed before consolidating.",
+                    "source_slashed": "The source has been slashed and cannot be used for consolidation.",
+                    "source_too_young": "The source is too new to be eligible for consolidation.",
+                    "source_unknown_pubkey": "The source public key could not be found.",
+                    "target_exiting": "The target is currently exiting and cannot receive consolidation.",
+                    "target_inactive": "The target is inactive and cannot receive consolidation.",
+                    "target_not_compounding": "The target is not compounding.",
+                    "target_unknown_pubkey": "The target public key could not be found."
+                },
+                "search_placeholder": "Index, Slot",
+                "slot_processed": "Slot Processed",
+                "slot_queued": "Slot Queued",
+                "title": "Consensus Layer"
+            },
             "cl_deposits": {
                 "info_slot_processed_estimated": "This is an estimation since this deposit is still queued.",
                 "search_placeholder_guest_dashboard": "Index, Slot, Withdrawal Credential",

frontend/pages/dashboard/[[id]]/index.vue

@@ -259,13 +259,61 @@ const clDeposits = computed(() => {
 })
 const clDepositsTotalAmount = computed(() => clDepositsData.value?.[1])
 
+// Execution Layer Consolidations data
+const elConsolidationsQueryParams = ref<TableQueryParams>({
+  limit: 5, sort: 'block_processed:desc',
+})
+const {
+  data: elConsolidationsData,
+  refresh: refreshElConsolidationsData,
+  status: elConsolidationsDataStatus,
+} = useAsyncData('el_consolidations', () => {
+  return dashboardData.fetchElConsolidations(
+    dashboardKey.value,
+    elConsolidationsQueryParams.value,
+  )
+},
+{
+  immediate: false,
+  watch: [ elConsolidationsQueryParams ],
+})
+const elConsolidations = computed(() => {
+  return elConsolidationsData.value || undefined
+})
+
+// Consolidations Layer Consolidations data
+const clConsolidationsQueryParams = ref<TableQueryParams>({
+  limit: 5, sort: 'timestamp:desc',
+})
+const {
+  data: clConsolidationsData,
+  refresh: refreshClConsolidationsData,
+  status: clConsolidationsDataStatus,
+} = useAsyncData('cl_consolidations', () => {
+  return dashboardData.fetchClConsolidations(
+    dashboardKey.value,
+    clConsolidationsQueryParams.value,
+  )
+},
+{
+  immediate: false,
+  watch: [ clConsolidationsQueryParams ],
+})
+const clConsolidations = computed(() => {
+  return clConsolidationsData.value || undefined
+})
+
 // tabs
 const route = useRoute()
 
 const activeTab = computed(() => route.hash)
 
 const refreshActiveTab = () => {
   switch (activeTab.value) {
+    case '#consolidations':
+      refreshElConsolidationsData()
+      refreshClConsolidationsData()
+      break
     case '#deposits':
       refreshElDepositsData()
       refreshClDepositsData()
@@ -347,6 +395,22 @@ watch(
             :is-loading="clDepositsDataStatus === 'pending'"
           />
         </template>
+        <template #tab-panel-consolidations>
+          <DashboardTableElConsolidations
+            v-model:query="elConsolidationsQueryParams"
+            :el-consolidations
+            :is-loading="elConsolidationsDataStatus === 'pending'"
+          />
+          <BcIcon
+            name="arrow-down"
+            class="down_icon"
+          />
+          <DashboardTableClConsolidations
+            v-model:query="clConsolidationsQueryParams"
+            :cl-consolidations
+            :is-loading="clConsolidationsDataStatus === 'pending'"
+          />
+        </template>
       </BcTabList>
     </BcPageWrapper>
   </div>