style(eslint): add object and array formatting rules

Putting items on new lines should make editing more `efficient` and
 make it easier to check for changes when reviewing

See: BEDS-128

frontend/app.vue

@@ -5,13 +5,11 @@ import { generateUUID } from '~/utils/misc'
 provide('app-uuid', { value: generateUUID() })
 useHead(
   {
-    script: [
-      {
-        async: false,
-        key: 'revive',
-        src: '../js/revive.min.js',
-      },
-    ],
+    script: [ {
+      async: false,
+      key: 'revive',
+      src: '../js/revive.min.js',
+    } ],
   },
   { mode: 'client' },
 )

frontend/app/router.options.ts

@@ -2,8 +2,12 @@ export default {
   scrollBehavior(
     _to: any,
     _from: any,
-    savedPosition: { left: number, top: number } | null,
+    savedPosition: { left: number
+      top: number } | null,
   ) {
-    return { _to, ...savedPosition }
+    return {
+      _to,
+      ...savedPosition,
+    }
   },
 }

frontend/components/bc/BcContentFilter.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import {
-  faMagnifyingGlass,
-} from '@fortawesome/pro-solid-svg-icons'
+import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type InputText from 'primevue/inputtext'
 

frontend/components/bc/BcCurrencySelection.vue

@@ -5,7 +5,9 @@ defineProps<{
   showCurrencyIcon: boolean
 }>()
 
-const { currency, setCurrency, withLabel } = useCurrency()
+const {
+  currency, setCurrency, withLabel,
+} = useCurrency()
 </script>
 
 <template>

frontend/components/bc/BcMaintenanceBanner.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { warn } from 'vue'
 
-const {
-  public: { maintenanceTS },
-} = useRuntimeConfig()
+const { public: { maintenanceTS } } = useRuntimeConfig()
 const { tick } = useInterval(60)
 const { t: $t } = useTranslation()
 
@@ -24,9 +22,7 @@ const maintenanceLabel = computed(() => {
   }
   const ts = new Date(parsed * 1000).getTime()
   if (ts > tick.value) {
-    return $t('maintenance.planned', {
-      date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true),
-    })
+    return $t('maintenance.planned', { date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true) })
   }
   else {
     return $t('maintenance.ongoing')

frontend/components/bc/BcTooltip.vue

@@ -26,8 +26,12 @@ const bcTooltipOwner = ref<HTMLElement | null>(null)
 const bcTooltip = ref<HTMLElement | null>(null)
 let scrollParents: HTMLElement[] = []
 const tooltipAddedTimeout = ref<NodeJS.Timeout | null>(null)
-const { doSelect, selected } = useTooltipStore()
-const { height, width } = useWindowSize()
+const {
+  doSelect, selected,
+} = useTooltipStore()
+const {
+  height, width,
+} = useWindowSize()
 
 // this const will be avaiable on template
 const slots = useSlots()
@@ -52,7 +56,11 @@ const isOpen = computed(
   () => isSelected.value || hover.value || hoverTooltip.value,
 )
 
-const pos = ref<{ left: string, top: string }>({ left: '0', top: '0' })
+const pos = ref<{ left: string
+  top: string }>({
+  left: '0',
+  top: '0',
+})
 
 const classList = computed(() => {
   return [
@@ -102,7 +110,10 @@ const setPosition = () => {
   }
   left = Math.max(0, Math.min(left, width.value - ttWidth))
   top = Math.max(0, Math.min(top, height.value - ttHeight))
-  pos.value = { left: `${left}px`, top: `${top}px` }
+  pos.value = {
+    left: `${left}px`,
+    top: `${top}px`,
+  }
   if (bcTooltip.value) {
     let centerX = -5 + Math.abs(left - rect.left) + rect.width / 2
     if (rect.width > ttWidth) {
@@ -204,7 +215,10 @@ const removeScrollParent = () => {
 }
 
 watch(
-  () => [props.title, props.text],
+  () => [
+    props.title,
+    props.text,
+  ],
   () => {
     if (isOpen.value) {
       requestAnimationFrame(() => {

frontend/components/bc/CookieModal.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
+import {
+  COOKIE_KEY, type CookiesPreference,
+} from '~/types/cookie'
 import { Target } from '~/types/links'
 
 const cookiePreference = useCookie<CookiesPreference>(

frontend/components/bc/DataWrapper.vue

@@ -4,11 +4,11 @@
 const { getUser } = useUserStore()
 const { tick } = useInterval(12)
 const { refreshLatestState } = useLatestStateStore()
-const { loadAvailableNetworks, setCurrentNetwork } = useNetworkStore()
+const {
+  loadAvailableNetworks, setCurrentNetwork,
+} = useNetworkStore()
 
-await useAsyncData('latest_state', () => refreshLatestState(), {
-  watch: [tick],
-})
+await useAsyncData('latest_state', () => refreshLatestState(), { watch: [ tick ] })
 await useAsyncData('get_user', () => getUser())
 await useAsyncData('get-supported-networks', () => loadAvailableNetworks())
 

frontend/components/bc/FeatureCheck.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCheck, faClose } from '@fortawesome/pro-solid-svg-icons'
+import {
+  faCheck, faClose,
+} from '@fortawesome/pro-solid-svg-icons'
 
 interface Props {
   available?: boolean

frontend/components/bc/NetworkSelector.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import type { MultiBarItem } from '~/types/multiBar'
 import { IconNetwork } from '#components'
-import { type ChainIDs, ChainInfo } from '~/types/network'
+import {
+  type ChainIDs, ChainInfo,
+} from '~/types/network'
 
 const props = defineProps<{
   readonlyNetworks?: ChainIDs[]
 }>()
 
-const { availableNetworks, isNetworkDisabled } = useNetworkStore()
+const {
+  availableNetworks, isNetworkDisabled,
+} = useNetworkStore()
 
 /** If prop `:readonly-networks` is given:
  *   the networks in array `:readonly-networks` are shown to the user and they are unclickable,
@@ -38,7 +42,11 @@ const buttons = computed(() => {
     list.push({
       component: IconNetwork,
       componentClass: 'maximum',
-      componentProps: { chainId, colored: true, harmonizePerceivedSize: true },
+      componentProps: {
+        chainId,
+        colored: true,
+        harmonizePerceivedSize: true,
+      },
       disabled: isNetworkDisabled(chainId),
       tooltip: ChainInfo[chainId].name,
       value: String(chainId),

frontend/components/bc/SearchbarGeneral.vue

@@ -76,7 +76,10 @@ async function redirectToRelevantPage(result: ResultSuggestion) {
   }
 
   if (q !== '') {
-    await navigateTo({ path, query: { q } })
+    await navigateTo({
+      path,
+      query: { q },
+    })
   }
   else {
     await navigateTo({ path })

frontend/components/bc/dialog/BcDialogConfirm.vue

@@ -6,7 +6,9 @@ interface Props {
   title?: string
   yesLabel?: string // defaults to "Yes"
 }
-const { dialogRef, props } = useBcDialog<Props>({ showHeader: false })
+const {
+  dialogRef, props,
+} = useBcDialog<Props>({ showHeader: false })
 const { t: $t } = useTranslation()
 
 const noLabel = computed(() => props.value?.noLabel || $t('navigation.no'))

frontend/components/bc/footer/LinkList.vue

@@ -18,7 +18,8 @@ import {
 import { Target } from '~/types/links'
 
 const { t: $t } = useTranslation()
-type Row = { links: [string, IconDefinition, string, Target][], title: string }
+type Row = { links: [string, IconDefinition, string, Target][]
+  title: string }
 const columns: Row[] = [
   {
     links: [
@@ -47,7 +48,12 @@ const columns: Row[] = [
     links: [
       // TODO: Add link once API prices are available
       // [$t('footer.api_pricing'), faFileInvoiceDollar, '/pricing', Target.Internal],
-      [$t('footer.premium'), faUserAstronaut, '/pricing', Target.Internal],
+      [
+        $t('footer.premium'),
+        faUserAstronaut,
+        '/pricing',
+        Target.Internal,
+      ],
       // TODO: Add link once advertise page is available
       // [$t('footer.advertise'), faAd, '/advertisewithus', Target.Internal],
       [
@@ -67,7 +73,12 @@ const columns: Row[] = [
   },
   {
     links: [
-      ['Discord', faDiscord, 'https://dsc.gg/beaconchain', Target.External],
+      [
+        'Discord',
+        faDiscord,
+        'https://dsc.gg/beaconchain',
+        Target.External,
+      ],
       [
         'Twitter',
         faTwitter,

frontend/components/bc/format/FormatHash.vue

@@ -29,7 +29,8 @@ const data = computed(() => {
       : props.noWrap
         ? 'no-wrap'
         : ''
-  let parts: { className?: string, value: string }[] = []
+  let parts: { className?: string
+    value: string }[] = []
   let link: string = ''
   if (props.ens) {
     parts.push({
@@ -40,14 +41,23 @@ const data = computed(() => {
   else if (props.type === 'withdrawal_credentials') {
     const isSet = hash.startsWith('0x01')
     const color = isSet ? 'green' : 'orange'
-    parts.push({ className: color, value: hash.substring(0, 4) })
+    parts.push({
+      className: color,
+      value: hash.substring(0, 4),
+    })
     if (props.full) {
       parts.push({ value: hash.substring(4) })
     }
     else {
       parts = parts.concat([
-        { className: 'dots-before', value: hash.substring(26, 30) },
-        { className: 'dots-before', value: hash.substring(hash.length - 4) },
+        {
+          className: 'dots-before',
+          value: hash.substring(26, 30),
+        },
+        {
+          className: 'dots-before',
+          value: hash.substring(hash.length - 4),
+        },
       ])
     }
     if (isSet && !props.noLink) {
@@ -58,12 +68,21 @@ const data = computed(() => {
     const color = props.full ? 'prime' : undefined
     const middle = props.full
       ? { value: hash.substring(6, hash.length - 4) }
-      : { className: 'dots-before', value: '' }
+      : {
+          className: 'dots-before',
+          value: '',
+        }
     parts = [
       { value: '0x' },
-      { className: color, value: hash.substring(2, 6) },
+      {
+        className: color,
+        value: hash.substring(2, 6),
+      },
       middle,
-      { className: color, value: hash.substring(hash.length - 4) },
+      {
+        className: color,
+        value: hash.substring(hash.length - 4),
+      },
     ]
   }
   if (!props.noLink) {

frontend/components/bc/format/FormatPercent.vue

@@ -39,7 +39,10 @@ const data = computed(() => {
     if (!props.hideEmptyValue) {
       label = '0%'
     }
-    return { className, label }
+    return {
+      className,
+      label,
+    }
   }
   const percent = props.percent ?? calculatePercent(props.value, props.base)
   const config = {
@@ -76,7 +79,12 @@ const data = computed(() => {
       className = 'text-negative'
     }
   }
-  return { className, compareResult, label, leadingIcon }
+  return {
+    className,
+    compareResult,
+    label,
+    leadingIcon,
+  }
 })
 </script>
 

frontend/components/bc/format/FormatTimePassed.vue

@@ -4,7 +4,9 @@ import { useFormat } from '~/composables/useFormat'
 import { type AgeFormat } from '~/types/settings'
 import { formatGoTimestamp } from '~/utils/format'
 
-const { formatEpochToDateTime, formatSlotToDateTime } = useFormat()
+const {
+  formatEpochToDateTime, formatSlotToDateTime,
+} = useFormat()
 
 interface Props {
   format?: 'global-setting' | AgeFormat

frontend/components/bc/header/MainHeader.vue

@@ -1,20 +1,32 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faBars, faCircleUser } from '@fortawesome/pro-solid-svg-icons'
+import {
+  faBars, faCircleUser,
+} from '@fortawesome/pro-solid-svg-icons'
 import type { BcHeaderMegaMenu } from '#build/components'
 import { useLatestStateStore } from '~/stores/useLatestStateStore'
 import { useNetworkStore } from '~/stores/useNetworkStore'
-import { SearchbarColors, SearchbarShape } from '~/types/searchbar'
-import { mobileHeaderThreshold, smallHeaderThreshold } from '~/types/header'
+import {
+  SearchbarColors, SearchbarShape,
+} from '~/types/searchbar'
+import {
+  mobileHeaderThreshold, smallHeaderThreshold,
+} from '~/types/header'
 
 defineProps<{
   isHomePage: boolean
   minimalist: boolean
 }>()
 const { latestState } = useLatestStateStore()
-const { currentNetwork, networkInfo, slotToEpoch } = useNetworkStore()
-const { doLogout, isLoggedIn } = useUserStore()
-const { available, currency, rates } = useCurrency()
+const {
+  currentNetwork, networkInfo, slotToEpoch,
+} = useNetworkStore()
+const {
+  doLogout, isLoggedIn,
+} = useUserStore()
+const {
+  available, currency, rates,
+} = useCurrency()
 const { width } = useWindowSize()
 const { t: $t } = useTranslation()