chore: upgrade nuxt to v4

frontend/app.vue

@@ -26,7 +26,7 @@ const exchangeRates = computed(() => latestState.value?.exchange_rates ?? [])
 const exchangeRateLengthOnTestNetworks = 1
 if (exchangeRates.value.length === exchangeRateLengthOnTestNetworks) {
   const { selectedCurrencyMain } = useCurrency()
-  selectedCurrencyMain.value = exchangeRates.value[0].code as CurrencyCode
+  selectedCurrencyMain.value = exchangeRates.value[0]?.code as CurrencyCode
 }
 </script>
 

frontend/assets/css/prime.scss

@@ -241,7 +241,7 @@ div.p-checkbox {
       }
     }
 
-    .p-toggleswitch-slider:before {
+    .p-toggleswitch-handle {
       background: var(--switch-slider-color) !important;
       width: 20px;
       height: 20px;
@@ -251,7 +251,7 @@ div.p-checkbox {
       transition-duration: 0.2s;
     }
 
-    &.p-toggleswitch-checked .p-toggleswitch-slider:before {
+    &.p-toggleswitch-checked .p-toggleswitch-handle {
       transform: translateX(20.6px);
     }
 

frontend/components/bc/PageWrapper.vue

@@ -15,7 +15,6 @@ defineProps<{
     <slot name="banner" />
     <main class="content">
       <slot name="top" />
-      <!-- <BcAdControl /> -->
       <slot />
       <div id="bottom_banner" />
       <slot name="bottom" />

frontend/components/bc/toggle/SingleBar.vue

@@ -59,7 +59,7 @@ function onButtonClicked(value: string) {
       :icon="button.icon"
       :text="button.text"
       :sub-text="button.subText"
-      :selected="values[button.value]"
+      :selected="values[button.value] ?? false"
       :tooltip="button.tooltip"
       :disabled="button.disabled"
       :class="[layout, button.className]"

frontend/components/dashboard/DashboardControls.vue

@@ -293,12 +293,12 @@ const deleteAction = async (
     }
 
     if ((preferedDashboards?.length ?? 0) > 0) {
-      setDashboardKey(`${preferedDashboards[0].id}`)
+      setDashboardKey(`${preferedDashboards[0]?.id}`)
       return
     }
 
     if ((fallbackDashboards.length ?? 0) > 0) {
-      await navigateTo(`${fallbackUrl}${fallbackDashboards[0].id}`)
+      await navigateTo(`${fallbackUrl}${fallbackDashboards[0]?.id}`)
       return
     }
   }

frontend/components/dashboard/DashboardHeader.vue

@@ -54,12 +54,12 @@ const items = computed<MenuBarEntry[]>(() => {
       const count = hasMoreItems && width.value >= 520 ? ` (${items.length})` : ''
       buttons.push({
         active: !!active,
-        command: !hasMoreItems ? items[0].command : undefined,
-        disabledTooltip: !hasMoreItems ? items[0].disabledTooltip : undefined,
+        command: !hasMoreItems ? items[0]?.command : undefined,
+        disabledTooltip: !hasMoreItems ? items[0]?.disabledTooltip : undefined,
         dropdown: hasMoreItems,
         items: hasMoreItems ? items : undefined,
         label: label + count,
-        route: !hasMoreItems ? items[0].route : undefined,
+        route: !hasMoreItems ? items[0]?.route : undefined,
       })
     }
   }

frontend/components/dashboard/DashboardValidatorManagementModalSearch.vue

@@ -42,7 +42,7 @@ const isLoading = computed(() => status.value === 'pending')
 
 const handleSearch = (input: string) => {
   if (!input.length) return
-  error.value = null
+  error.value = undefined
   execute()
 }
 const emit = defineEmits<{

frontend/components/dashboard/chart/DashboardChartRewards.vue

@@ -279,7 +279,7 @@ const getGroupInfo = (series: ChartSeries<number, string>[], currentIndex: numbe
         name: groups.value.find(group => group.id === id)?.name ?? '',
         value: data[currentIndex] === '0' || data[currentIndex] === null
           ? '-'
-          : formatAmount(data[currentIndex], {
+          : formatAmount(data[currentIndex] ?? '0', {
               hasCurrencyDisplay: true,
               hasHigherPrecision: true,
               hasUnitDisplay: true,
@@ -292,7 +292,7 @@ const getGroupInfo = (series: ChartSeries<number, string>[], currentIndex: numbe
       name: groups.value.find(group => group.id === id)?.name ?? '',
       value: data[currentIndex] === '0' || data[currentIndex] === null
         ? '-'
-        : formatAmount(data[currentIndex], {
+        : formatAmount(data[currentIndex] ?? '0', {
             hasCurrencyDisplay: true,
             hasHigherPrecision: true,
             hasUnitDisplay: true,
@@ -358,13 +358,13 @@ const option = computed<EChartsOption>(() => {
 
         const paramsConsensusLayer = params.find(param => param.seriesId === seriesId.cl)
         const paramsExecutionLayer = params.find(param => param.seriesId === seriesId.el)
-        const currentIndex = params[0].dataIndex
+        const currentIndex = params[0]?.dataIndex
         const currentEpoch = {
-          index: params[0].name,
-          timestamp: Number(params[0].name),
+          index: params[0]?.name ?? '0',
+          timestamp: Number(params[0]?.name),
         }
-        const currentGroupTotalCl = clSeriesGroupTotal.value[currentIndex]
-        const currentGroupTotalEl = elSeriesGroupTotal.value[currentIndex]
+        const currentGroupTotalCl = clSeriesGroupTotal.value[currentIndex ?? 0]
+        const currentGroupTotalEl = elSeriesGroupTotal.value[currentIndex ?? 0]
 
         const consensusLayerRewardSum = currentGroupTotalCl === '0'
           ? '-'
@@ -389,8 +389,8 @@ const option = computed<EChartsOption>(() => {
         const executionLayerRewardSumLabel = paramsExecutionLayer?.seriesName ?? ''
 
         const groupInfo = {
-          cl: getGroupInfo(clSeries.value, currentIndex),
-          el: getGroupInfo(elSeries.value, currentIndex),
+          cl: getGroupInfo(clSeries.value, currentIndex ?? 0),
+          el: getGroupInfo(elSeries.value, currentIndex ?? 0),
         }
 
         const d = document.createElement('div')

frontend/components/dashboard/chart/DashboardChartSummary.vue

@@ -337,7 +337,7 @@ const option = computed<EChartsOption>(() => {
       extraCssText: 'z-index: 100;',
       formatter(params) {
         if (!Array.isArray(params)) return ''
-        const ts = parseInt(params[0].name)
+        const ts = parseInt(params[0]?.name ?? '0')
         let lastDif = 0
         let highlightGroup = ''
         const groupInfos = params.map((param: any) => {

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

@@ -38,12 +38,12 @@ const mostRecentScheduledSlotId = computed(() => {
 
   for (let i = 0; i < slotViz.value.length; i++) {
     const row = slotViz.value[i]
-    if (!row.slots?.length) {
+    if (!row?.slots?.length) {
       continue
     }
     for (let j = row.slots.length - 1; j >= 0; j--) {
-      if (row.slots[j].status === 'scheduled') {
-        id = row.slots[j].slot
+      if (row?.slots[j]?.status === 'scheduled') {
+        id = row?.slots[j]?.slot ?? 0
       }
       else {
         return id

frontend/components/dashboard/slot-viz/DashboardSlotVizDutyVisibilityToggle.vue

@@ -80,7 +80,7 @@ watch(() => overview.value, () => {
 watch(() => persistedSelectedCategories.value[storageDashboardKey.value],
   () => {
     if (persistedSelectedCategories.value[storageDashboardKey.value]) {
-      emit('updateCategories', persistedSelectedCategories.value[storageDashboardKey.value])
+      emit('updateCategories', persistedSelectedCategories.value[storageDashboardKey.value] ?? [])
     }
   },
   { immediate: true },
@@ -97,7 +97,7 @@ watch(() => persistedSelectedCategories.value[storageDashboardKey.value],
     </div>
     <ClientOnly v-else>
       <BcToggleMultiBar
-        v-model="persistedSelectedCategories[storageDashboardKey]"
+        v-model="persistedSelectedCategories[storageDashboardKey] as []"
         :buttons="icons"
       />
     </ClientOnly>

frontend/components/dashboard/slot-viz/DashboardSlotVizTile.vue

@@ -132,13 +132,13 @@ const data = computed(() => {
         />
         <LazyDashboardSlotVizDutyIcon
           v-if="data.icons?.length"
-          :icon="data.icons[0]"
+          :icon="data.icons[0]!"
           class="first_icon"
           :class="data.firstIconClass"
         />
         <LazyDashboardSlotVizDutyIcon
           v-if="data.icons?.length === 2"
-          :icon="data.icons[1]"
+          :icon="data.icons[1]!"
           class="second_icon"
         />
       </div>

frontend/components/dashboard/table/DashboardTableSummary.vue

@@ -243,7 +243,7 @@ watch(
               <template #body="{ data }">
                 <DashboardTableSummaryValidators
                   :validators="data.validators"
-                  :is-absolute="showAbsoluteValuesPersisted[storageDashboardKey]"
+                  :is-absolute="showAbsoluteValuesPersisted[storageDashboardKey] ?? false"
                   :row="data"
                   :group-id="data.group_id"
                   :dashboard-key

frontend/components/dashboard/table/DashboardTableSummaryDetails.vue

@@ -59,7 +59,7 @@ const summarySections = computed<SummaryRow[][]>(() => {
       property,
       title,
     }
-    sections[index].push(row)
+    sections[index]?.push(row)
   }
 
   const addSummaryPropertiesToSection = (

frontend/components/dashboard/validator/subset/DashboardValidatorSubsetList.vue

@@ -62,7 +62,7 @@ function createDutyLabels(dutyObjects?: number[]) {
   switch (props.category) {
     case 'exiting':
     case 'pending':
-      return getRelativeTime(dutyObjects[0])
+      return getRelativeTime(dutyObjects[0] ?? 0)
     case 'got_slashed':
       return $t('dashboard.validator.subset_dialog.got_slashed') + ':'
     case 'has_slashed':

frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue

@@ -200,7 +200,7 @@ const subsets = computed<ValidatorSubset[]>(() => {
               xWithdrawing,
             ],
           ]
-          baseSubset.validators.forEach((v) => {
+          baseSubset?.validators.forEach((v) => {
             subsets.forEach(([
               origin,
               merged,