feat: adapt CL deposits table for Pectra

enzo-bitfly · enzo-bitfly · commit c328c71c8b85 · 2025-04-29T11:05:47.000+02:00
-Move fetching logic to `dashboard` root page component
-Ensure immediate fetch for active tab on first page load

See: BEDS-1362
diff --git a/frontend/components/dashboard/table/DashboardTableClDeposits.vue b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
@@ -25,8 +25,6 @@ const {
   isGuestDashboard,
 } = useDashboardKey()
 
-const cursor = ref<Cursor>()
-const pageSize = ref<number>(5)
 const { t: $t } = useTranslation()
 
 const {
@@ -120,8 +118,8 @@ const {
           data-key="index"
           expandable
           table-class="cl-deposits-table"
-          :cursor
-          :page-size
+          :cursor="query?.cursor"
+          :page-size="query?.limit"
           :row-class="getRowClass"
           :is-row-expandable
           :is-loading
diff --git a/frontend/composables/useDashboardData.ts b/frontend/composables/useDashboardData.ts
@@ -1,14 +1,8 @@
 import type {
-  GetValidatorDashboardConsensusLayerConsolidationsResponse,
   GetValidatorDashboardConsensusLayerDepositsResponse,
-  GetValidatorDashboardConsensusLayerWithdrawalsResponse,
-  GetValidatorDashboardExecutionLayerConsolidationsResponse,
   GetValidatorDashboardExecutionLayerDepositsResponse,
-  GetValidatorDashboardExecutionLayerWithdrawalsResponse,
   GetValidatorDashboardTotalConsensusDepositsResponse,
-  GetValidatorDashboardTotalConsensusWithdrawalsResponse,
   GetValidatorDashboardTotalExecutionDepositsResponse,
-  GetValidatorDashboardTotalExecutionWithdrawalsResponse,
 } from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import type { TableQueryParams } from '~/types/datatable'
@@ -66,101 +60,11 @@ 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
-  }
-
-  async function fetchElWithdrawals(
-    dashboardKey: DashboardKey,
-    query?: TableQueryParams,
-  ) {
-    const res
-      = await fetch<GetValidatorDashboardExecutionLayerWithdrawalsResponse>(
-        'DASHBOARD_EL_WITHDRAWALS',
-        undefined,
-        { dashboardKey },
-        query,
-      )
-
-    return res
-  }
-
-  async function fetchElWithdrawalsTotalAmount(
-    dashboardKey: DashboardKey,
-  ) {
-    const res
-      = await fetch<GetValidatorDashboardTotalExecutionWithdrawalsResponse>(
-        'DASHBOARD_EL_WITHDRAWALS_TOTAL',
-        undefined,
-        { dashboardKey },
-      )
-
-    return res
-  }
-
-  async function fetchClWithdrawals(
-    dashboardKey: DashboardKey,
-    query?: TableQueryParams,
-  ) {
-    const res
-      = await fetch<GetValidatorDashboardConsensusLayerWithdrawalsResponse>(
-        'DASHBOARD_CL_WITHDRAWALS',
-        undefined,
-        { dashboardKey },
-        query,
-      )
-
-    return res
-  }
-
-  async function fetchClWithdrawalsTotalAmount(
-    dashboardKey: DashboardKey,
-  ) {
-    const res
-      = await fetch<GetValidatorDashboardTotalConsensusWithdrawalsResponse>(
-        'DASHBOARD_CL_WITHDRAWALS_TOTAL',
-        undefined,
-        { dashboardKey },
-      )
-
-    return res
-  }
 
   return {
-    fetchClConsolidations,
     fetchClDeposits,
     fetchClDpositsTotalAmount,
-    fetchClWithdrawals,
-    fetchClWithdrawalsTotalAmount,
-    fetchElConsolidations,
     fetchELDeposits,
     fetchELDpositsTotalAmount,
-    fetchElWithdrawals,
-    fetchElWithdrawalsTotalAmount,
   }
 }
diff --git a/frontend/i18n/locales/en.json b/frontend/i18n/locales/en.json
@@ -225,34 +225,10 @@
                 "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, Address",
-                "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, Address",
-                "search_placeholder_private_dashboard": "Index, Slot, Address, Group",
+                "search_placeholder_guest_dashboard": "Index, Slot, Withdrawal Credential",
+                "search_placeholder_private_dashboard": "Index, Slot, Withdrawal Credential, Group",
                 "title": "Consensus Layer",
                 "type": {
                     "auto": "Auto",
@@ -515,7 +491,6 @@
                 "status_text": {
                     "completed": "Completed",
                     "invalid": "Invalid",
-                    "processed": "Processed",
                     "queued": "Queued",
                     "rejected": "Rejected",
                     "valid": "Valid"
@@ -1217,11 +1192,8 @@
         "last": "Last",
         "of": "of",
         "showing": "Showing {from} to {to} of {total}",
-        "source": "Source",
         "status": "Status",
-        "target":"Target",
-        "validity": "Validity",
-        "withdrawal_request_fee": "Withdrawal Request Fee"
+        "validity": "Validity"
     },
     "time_duration": {
         "days": "{amount} day | {amount} days",
diff --git a/frontend/pages/dashboard/[[id]]/index.vue b/frontend/pages/dashboard/[[id]]/index.vue
@@ -259,123 +259,17 @@ const clDeposits = computed(() => {
 })
 const clDepositsTotalAmount = computed(() => clDepositsData.value?.[1])
 
-// Execution Layer Withdrawals data
-const elWithdrawalsQueryParams = ref<TableQueryParams>({
-  limit: 5,
-  sort: 'timestamp:desc',
-})
-const {
-  data: elWithdrawalsData,
-  refresh: refreshElWithdrawalsData,
-  status: elWithdrawalsDataStatus,
-} = useAsyncData('el_withdrawals', () => {
-  return Promise.all([
-    dashboardData.fetchElWithdrawals(
-      dashboardKey.value,
-      elWithdrawalsQueryParams.value,
-    ),
-    dashboardData.fetchElWithdrawalsTotalAmount(dashboardKey.value),
-  ])
-},
-{
-  immediate: false,
-  watch: [ elWithdrawalsQueryParams ],
-})
-const elWithdrawals = computed(() => {
-  return elWithdrawalsData.value?.[0]
-})
-const elWithdrawalsTotalAmount = computed(() => elWithdrawalsData.value?.[1])
-
-// Consensus Layer Withdrawals data
-const clWithdrawalsQueryParams = ref<TableQueryParams>({
-  limit: 5,
-  sort: 'timestamp:desc',
-})
-const {
-  data: clWithdrawalsData,
-  refresh: refreshClWithdrawalsData,
-  status: clWithdrawalsDataStatus,
-} = useAsyncData('cl_withdrawals', () => {
-  return Promise.all([
-    dashboardData.fetchClWithdrawals(
-      dashboardKey.value,
-      clWithdrawalsQueryParams.value,
-    ),
-    dashboardData.fetchClWithdrawalsTotalAmount(dashboardKey.value),
-  ])
-},
-{
-  immediate: false,
-  watch: [ clWithdrawalsQueryParams ],
-})
-const clWithdrawals = computed(() => {
-  return clWithdrawalsData.value?.[0]
-})
-const clWithdrawalsTotalAmount = computed(() => clWithdrawalsData.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
-})
-
-// Consensus 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()
       break
-    case '#withdrawals':
-      refreshElWithdrawalsData()
-      refreshClWithdrawalsData()
-      break
   }
 }
 
@@ -453,40 +347,6 @@ watch(
             :is-loading="clDepositsDataStatus === 'pending'"
           />
         </template>
-        <template #tab-panel-withdrawals>
-          <DashboardTableElWithdrawals
-            v-model:query="elWithdrawalsQueryParams"
-            :el-withdrawals
-            :el-withdrawals-total-amount
-            :is-loading="elWithdrawalsDataStatus === 'pending'"
-          />
-          <BcIcon
-            name="arrow-down"
-            class="down_icon"
-          />
-          <DashboardTableClWithdrawals
-            v-model:query="clWithdrawalsQueryParams"
-            :cl-withdrawals
-            :cl-withdrawals-total-amount
-            :is-loading="clWithdrawalsDataStatus === '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>
