feat: display add validator message on tables of empty dashboards

- prevent fetching data on empty-dashboard tables

See: BEDS: 1509

Author: enzo-bitfly

frontend/components/dashboard/table/DashboardTableClConsolidations.vue

@@ -20,6 +20,12 @@ const { width } = useWindowSize()
 const isMobile = computed(() => {
   return width.value < 768
 })
+
+const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
+const {
+  hasValidators,
+} = storeToRefs(validatorDashboardOverviewStore)
+
 const {
   getTimestampFromSlot,
 } = useNetworkStore()
@@ -266,6 +272,9 @@ const setSearch = (value?: string) => {
               </div>
             </div>
           </template>
+          <template #empty>
+            <DashboardTableAddValidator v-if="!hasValidators" />
+          </template>
         </BcTable>
       </ClientOnly>
     </template>

frontend/components/dashboard/table/DashboardTableClWithdrawals.vue

@@ -29,6 +29,11 @@ const isMobile = computed(() => {
   return width.value < 768
 })
 
+const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
+const {
+  hasValidators,
+} = storeToRefs(validatorDashboardOverviewStore)
+
 const clWithdrawalsWithIdentifiers = computed(() =>
   addIdentifier(clWithdrawals, 'slot', 'slot_index'),
 )
@@ -388,6 +393,9 @@ const getGroupName = (groupId: number) => {
               </div>
             </div>
           </template>
+          <template #empty>
+            <DashboardTableAddValidator v-if="!hasValidators" />
+          </template>
         </BcTable>
       </ClientOnly>
     </template>

frontend/components/dashboard/table/DashboardTableElConsolidations.vue

@@ -20,6 +20,11 @@ const isMobile = computed(() => {
   return width.value < 768
 })
 
+const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
+const {
+  hasValidators,
+} = storeToRefs(validatorDashboardOverviewStore)
+
 const query = defineModel<TableQueryParams>('query')
 
 const onSort = (sort: DataTableSortEvent) => {
@@ -330,6 +335,9 @@ const setSearch = (value?: string) => {
               </div>
             </div>
           </template>
+          <template #empty>
+            <DashboardTableAddValidator v-if="!hasValidators" />
+          </template>
         </BcTable>
       </ClientOnly>
     </template>

frontend/components/dashboard/table/DashboardTableElWithdrawals.vue

@@ -23,6 +23,11 @@ const {
 } = useDashboardKey()
 const { t: $t } = useTranslation()
 
+const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
+const {
+  hasValidators,
+} = storeToRefs(validatorDashboardOverviewStore)
+
 const { width } = useWindowSize()
 const isMobile = computed(() => {
   return width.value < 768
@@ -354,6 +359,9 @@ const getGroupName = (groupId: number) => {
               </div>
             </div>
           </template>
+          <template #empty>
+            <DashboardTableAddValidator v-if="!hasValidators" />
+          </template>
         </BcTable>
       </ClientOnly>
     </template>

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

@@ -84,6 +84,7 @@ useBcSeo(seoTitle, true)
 
 const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
 const {
+  hasValidators,
   overview,
 } = storeToRefs(validatorDashboardOverviewStore)
 const {
@@ -363,6 +364,8 @@ const route = useRoute()
 const activeTab = computed(() => route.hash)
 
 const refreshActiveTab = () => {
+  if (!hasValidators.value) return
+
   switch (activeTab.value) {
     case '#consolidations':
       refreshElConsolidationsData()