hide add validator, center notification (#371)

gobitfly · Jun 4, 2024 · e0b2f4b · e0b2f4b
1 parent 3d5dc09
commit e0b2f4b
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }
 }