wip

Author: marcel-bitfly

frontend/components/BcNavigation.vue

@@ -17,13 +17,9 @@ useApi('/api/bff/latest-state', {
   immediate: true,
   watch: [ counter ],
 })
-const {
-  data: userData,
-} = await useApi('/api/bff/users/me', {
-  key: 'user',
-})
 
 const {
+  isLoggedIn,
   logout,
 } = useUser()
 
@@ -144,7 +140,7 @@ const loginUrl = useLoginUrl()
           :show-currency-icon="!isMobileScreen"
         />
         <div
-          v-if="!userData"
+          v-if="!isLoggedIn"
           class="logged-out"
         >
           <BcLink

frontend/components/DashboardIndex.vue

@@ -4,6 +4,7 @@
 //   isGuestDashboardKey, isSharedDashboardKey,
 // } from '~/utils/dashboard/key'
 import type { HashTab } from '~/components/bc/tab/BcTabList.vue'
+import type { ValidatorDashboard } from '~/types/api/dashboard'
 import type { SlotVizEpoch } from '~/types/api/slot_viz'
 import type { VDBOverviewData } from '~/types/api/validator_dashboard'
 // import type { TableQueryParams } from '~/types/datatable'
@@ -207,6 +208,7 @@ const tabs: HashTab[] = [
 defineProps<{
   overview: null | VDBOverviewData,
   slotVizEpochs: null | SlotVizEpoch[],
+  validatorDashboards: null | ValidatorDashboard[],
 }>()
 const visible = ref(false)
 const onShowCreation = () => {
@@ -227,40 +229,42 @@ const emit = defineEmits<{
 // const onTabChange = (value: string) => {
 //   tab.value = value
 // }
+const { key } = useDashboard()
 </script>
 
 <template>
   <!-- <NuxtLayout v-if="!dashboardKey && !dashboards?.validator_dashboards?.length">
-      <DashboardCreationController
-        class="panel-controller"
-        :display-mode="'panel'"
-        :initially-visible="true"
-      />
-    </NuxtLayout> -->
+    <DashboardCreationController
+      class="panel-controller"
+      :display-mode="'panel'"
+      :initially-visible="true"
+    />
+  </NuxtLayout> -->
   <NuxtLayout name="default">
     <BcDialog v-model="visible">
-      <DashboardCreationController
+      <LazyDashboardCreationController
         v-if="visible"
         ref="dashboardCreationControllerModal"
         class="modal-controller"
       />
     </BcDialog>
     <template #banner>
-      <BcNotificationBanner
+      <LazyBcNotificationBanner
         v-if=" overview?.is_above_effective_balance_limit"
         :title="$t('dashboard.subsciprion_limit_reached_title')"
       >
-        <BcTranslation
+        <LazyBcTranslation
+          v-if=" overview?.is_above_effective_balance_limit"
           keypath="dashboard.subsciprion_limit_reached.template"
           linkpath="dashboard.subsciprion_limit_reached._link"
           to="/pricing"
         />
-      </BcNotificationBanner>
+      </LazyBcNotificationBanner>
     </template>
     <DashboardHeader @show-creation="onShowCreation()" />
     <DashboardControls
       v-model:is-visible-management-modal="isVisibleManagementModal"
-      :dashboard-title="overview?.name"
+      :validator-dashboards
       @change-validators=" emit('change-validators', $event)"
     />
     <DashboardValidatorOverview
@@ -278,54 +282,54 @@ const emit = defineEmits<{
       class="dashboard-tab-view"
       panels-class="dashboard-tab-panels"
     >
-      <template #tab-panel-summary>
-        <DashboardTableSummary
-          @add-validator="onAddValidator"
+      <template #tab-panel-summary="{ isActive }">
+        <LazyDashboardTableSummary
+          v-if="key && isActive"
         />
       </template>
-      <template #tab-panel-rewards>
-        <DashboardTableRewards
-          @add-validator="onAddValidator"
+      <template #tab-panel-rewards="{ isActive }">
+        <LazyDashboardTableRewards
+          v-if="key && isActive"
         />
       </template>
-      <template #tab-panel-blocks>
-        <DashboardTableBlocks
-          @add-validator="onAddValidator"
+      <template #tab-panel-blocks="{ isActive }">
+        <LazyDashboardTableBlocks
+          v-if="key && isActive"
         />
       </template>
-      <template #tab-panel-deposits>
-        <DashboardTableElDeposits
-          @add-validator="onAddValidator"
-        />
-        <BcIcon
-          name="arrow-down"
-          class="down_icon"
-        />
-        <DashboardTableClDeposits
-          @add-validator="onAddValidator"
-        />
+      <template #tab-panel-deposits="{ isActive }">
+        <div v-if="key && isActive">
+          <LazyDashboardTableElDeposits />
+          <LazyBcIcon
+            name="arrow-down"
+            class="down_icon"
+          />
+          <LazyDashboardTableClDeposits />
+        </div>
       </template>
-      <template #tab-panel-withdrawals>
-        <DashboardTableElWithdrawals
-          @add-validator="onAddValidator"
-        />
-        <BcIcon
-          name="arrow-down"
-          class="down_icon"
-        />
-        <DashboardTableClWithdrawals
-          @add-validator="onAddValidator"
-        />
+      <template #tab-panel-withdrawals="{ isActive }">
+        <div v-if="key && isActive">
+          <LazyDashboardTableElWithdrawals />
+          <LazyBcIcon
+            name="arrow-down"
+            class="down_icon"
+          />
+          <LazyDashboardTableClWithdrawals />
+        </div>
       </template>
-      <template #tab-panel-consolidations>
-        <DashboardTableElConsolidations
-          @add-validator="onAddValidator"
-        />
-        <BcIcon
-          name="arrow-down"
-          class="down_icon"
-        />
-        <DashboardTableClConsolidations
+      <template #tab-panel-consolidations="{ isActive }">
+        <div v-if="key && isActive">
+          <LazyDashboardTableElConsolidations />
+          <LazyBcIcon
+            name="arrow-down"
+            class="down_icon"
+          />
+          <LazyDashboardTableClConsolidations />
+        </div>
+      </template>
+      <template #empty>
+        <LazyDashboardTableAddValidator
+          v-if="!key"
           @add-validator="onAddValidator"
         />
       </template>

frontend/components/bc/BcButtonIcon.vue

@@ -10,6 +10,7 @@ const { variant = 'plain' } = defineProps<{
    *
    * ♿️ screenreader text
    * every button with just an icon has to describe what it does
+   *
    */
   screenreaderText: TranslationInput,
   variant?: 'flat' | 'plain',

frontend/components/bc/tab/BcTabList.vue

@@ -67,21 +67,35 @@ const onUpdateValue = () => {
       <TabPanel
         v-for="tab in tabs"
         :key="tab.key"
+        class="tab-panel"
         :value="tab.key"
       >
-        <slot :name="`tab-panel-${tab.key}`">
+        <slot
+          :name="`tab-panel-${tab.key}`"
+          v-bind="{ isActive: activeTab === tab.key }"
+        >
           <component
             :is="tab.component"
             v-if="tab.component"
           />
           <div v-else-if="tab.placeholder">
             {{ tab.placeholder }}
           </div>
-          <div v-else>
+          <slot
+            v-else
+            name="empty"
+          >
             tab-panel-{{ tab.key }}
-          </div>
+          </slot>
         </slot>
       </TabPanel>
     </TabPanels>
   </Tabs>
 </template>
+
+<style lang="scss" scoped>
+:deep(.tab-panel) {
+  min-height: inherit;
+  display: grid;
+}
+</style>

frontend/components/bc/table/BcTable.vue

@@ -103,6 +103,7 @@ const changeCursor = (value: string | undefined) => {
 const query = defineModel<Query>('query', {
   required: true,
 })
+
 const onSort = (event: DataTableSortEvent) => {
   const {
     sortField,
@@ -112,18 +113,23 @@ const onSort = (event: DataTableSortEvent) => {
     query.value.sort = `${sortField}:${sortOrder === -1 ? 'asc' : 'desc'}`
   }
 }
+
+// to correctly display the initial sort order
+const sortField = computed(() => query.value.sort?.split(':')[0] ?? '')
+const sortOrder = computed(() => query.value.sort?.split(':')[1] === 'desc' ? 1 : -1)
 </script>
 
 <template>
   <DataTable
     v-model:expanded-rows="expandedRows"
     class="bc-table"
     sort-mode="single"
-    lazy
     :value="data?.data"
     :data-key
     :loading="isLoading"
     :table-class
+    :sort-field
+    :sort-order
     @sort="onSort"
   >
     <Column