From e0b2f4b7ef98bad1cc4e7e697483110697316d22 Mon Sep 17 00:00:00 2001
From: MauserBitfly <125363940+MauserBitfly@users.noreply.github.com>
Date: Tue, 4 Jun 2024 11:04:48 +0200
Subject: [PATCH] hide add validator, center notification (#371)

---
 frontend/components/dashboard/DashboardHeader.vue        | 2 +-
 .../components/dashboard/table/DashboardTableBlocks.vue  | 3 ++-
 .../dashboard/table/DashboardTableClDeposits.vue         | 4 ++--
 .../dashboard/table/DashboardTableElDeposits.vue         | 4 ++--
 .../components/dashboard/table/DashboardTableRewards.vue | 4 ++--
 .../components/dashboard/table/DashboardTableSummary.vue | 4 ++--
 .../dashboard/table/DashboardTableWithdrawals.vue        | 3 ++-
 .../dashboard/useValidatorDashboardOverviewStore.ts      | 9 ++++++++-
 8 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/components/dashboard/DashboardHeader.vue b/frontend/components/dashboard/DashboardHeader.vue
index 43c06457b..e8bd68201 100644
--- a/frontend/components/dashboard/DashboardHeader.vue
+++ b/frontend/components/dashboard/DashboardHeader.vue
@@ -153,7 +153,7 @@ const editDashboard = () => {
     <div class="dashboard-buttons">
       <Menubar :class="menuBarClass" :model="items" breakpoint="0px">
         <template #item="{ item }">
-          <BcTooltip v-if="item.disabledTooltip" :text="item.disabledTooltip" @click.stop.prevent="() => undefined">
+          <BcTooltip v-if="item.disabledTooltip" :text="item.disabledTooltip" class="button-content" @click.stop.prevent="() => undefined">
             <span class="text-disabled">{{ item.label }}</span>
           </BcTooltip>
           <BcLink v-else-if="item.route" :to="item.route" class="pointer" :class="{ 'p-active': item.active }">
diff --git a/frontend/components/dashboard/table/DashboardTableBlocks.vue b/frontend/components/dashboard/table/DashboardTableBlocks.vue
index 261109340..558ccdc19 100644
--- a/frontend/components/dashboard/table/DashboardTableBlocks.vue
+++ b/frontend/components/dashboard/table/DashboardTableBlocks.vue
@@ -16,6 +16,7 @@ const { blocks, query: lastQuery, isLoading, getBlocks } = useValidatorDashboard
 const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
 const { groups } = useValidatorDashboardGroups()
+const { hasValidators } = useValidatorDashboardOverviewStore()
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -263,7 +264,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
               </div>
             </template>
             <template #empty>
-              <DashboardTableAddValidator />
+              <DashboardTableAddValidator v-if="!hasValidators" />
             </template>
           </BcTable>
         </ClientOnly>
diff --git a/frontend/components/dashboard/table/DashboardTableClDeposits.vue b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
index ce9309dca..163811443 100644
--- a/frontend/components/dashboard/table/DashboardTableClDeposits.vue
+++ b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
@@ -17,7 +17,7 @@ const { slotToEpoch } = useNetwork()
 const { deposits, query: lastQuery, getDeposits, getTotalAmount, totalAmount, isLoadingDeposits, isLoadingTotal } = useValidatorDashboardClDepositsStore()
 const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
-const { overview } = useValidatorDashboardOverviewStore()
+const { overview, hasValidators } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
 
 const { width } = useWindowSize()
@@ -303,7 +303,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
               </div>
             </template>
             <template #empty>
-              <DashboardTableAddValidator />
+              <DashboardTableAddValidator v-if="!hasValidators" />
             </template>
           </BcTable>
         </ClientOnly>
diff --git a/frontend/components/dashboard/table/DashboardTableElDeposits.vue b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
index c8bb2b7b6..3760bfae8 100644
--- a/frontend/components/dashboard/table/DashboardTableElDeposits.vue
+++ b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
@@ -15,7 +15,7 @@ const { t: $t } = useI18n()
 const { deposits, query: lastQuery, getDeposits, getTotalAmount, totalAmount, isLoadingDeposits, isLoadingTotal } = useValidatorDashboardElDepositsStore()
 const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
-const { overview } = useValidatorDashboardOverviewStore()
+const { overview, hasValidators } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
 
 const { width } = useWindowSize()
@@ -286,7 +286,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
               </div>
             </template>
             <template #empty>
-              <DashboardTableAddValidator />
+              <DashboardTableAddValidator v-if="!hasValidators" />
             </template>
           </BcTable>
         </ClientOnly>
diff --git a/frontend/components/dashboard/table/DashboardTableRewards.vue b/frontend/components/dashboard/table/DashboardTableRewards.vue
index ec24795ed..a623964b5 100644
--- a/frontend/components/dashboard/table/DashboardTableRewards.vue
+++ b/frontend/components/dashboard/table/DashboardTableRewards.vue
@@ -21,7 +21,7 @@ const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<Tab
 const { slotViz } = useValidatorSlotVizStore()
 
 const { groups } = useValidatorDashboardGroups()
-const { overview } = useValidatorDashboardOverviewStore()
+const { overview, hasValidators } = useValidatorDashboardOverviewStore()
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -247,7 +247,7 @@ const wrappedRewards = computed(() => {
               />
             </template>
             <template #empty>
-              <DashboardTableAddValidator />
+              <DashboardTableAddValidator v-if="!hasValidators" />
             </template>
           </BcTable>
         </ClientOnly>
diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue
index 1a3eccb83..04406939a 100644
--- a/frontend/components/dashboard/table/DashboardTableSummary.vue
+++ b/frontend/components/dashboard/table/DashboardTableSummary.vue
@@ -16,7 +16,7 @@ const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 const { summary, query: lastQuery, isLoading, getSummary } = useValidatorDashboardSummaryStore()
 const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
-const { overview } = useValidatorDashboardOverviewStore()
+const { overview, hasValidators } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
 
 const { width } = useWindowSize()
@@ -167,7 +167,7 @@ const getRowClass = (row: VDBSummaryTableRow) => {
               <DashboardTableSummaryDetails :row="slotProps.data" />
             </template>
             <template #empty>
-              <DashboardTableAddValidator />
+              <DashboardTableAddValidator v-if="!hasValidators" />
             </template>
           </BcTable>
         </ClientOnly>
diff --git a/frontend/components/dashboard/table/DashboardTableWithdrawals.vue b/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
index 68fd6a38d..c5ff31ea0 100644
--- a/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
+++ b/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
@@ -22,6 +22,7 @@ const { withdrawals, query: lastQuery, getWithdrawals, totalAmount, getTotalAmou
 const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 const totalIdentifier = 'total'
 
+const { hasValidators } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
 
 const { width } = useWindowSize()
@@ -333,7 +334,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               </div>
             </template>
             <template #empty>
-              <DashboardTableAddValidator />
+              <DashboardTableAddValidator v-if="!hasValidators" />
             </template>
           </BcTable>
         </ClientOnly>
diff --git a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
index 195ee7127..ee2344b84 100644
--- a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
@@ -33,5 +33,12 @@ export function useValidatorDashboardOverviewStore () {
     clearRewardDetails()
   }
 
-  return { overview, refreshOverview }
+  const hasValidators = computed<boolean>(() => {
+    if (!overview.value?.validators) {
+      return false
+    }
+    return !!overview.value.validators.online || !!overview.value.validators.exited || !!overview.value.validators.offline || !!overview.value.validators.pending || !!overview.value.validators.slashed
+  })
+
+  return { overview, refreshOverview, hasValidators }
 }