chore: upgrade nuxt to v4

Including necessary adaptions

Author: marcel-bitfly

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/ad/AdComponent.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/bc/ad/AdControl.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/bc/toggle/SingleBar.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/DashboardControls.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/DashboardHeader.vue

@@ -282,7 +282,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,
@@ -295,7 +295,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,
@@ -361,13 +361,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'
           ? '-'
@@ -392,8 +392,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')