refactor: make usage of locale typesafe

Author: marcel-bitfly

frontend/components/bc/BcMaintenanceBanner.vue

@@ -22,7 +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, 'en-US', true) })
   }
   else {
     return $t('maintenance.ongoing')

frontend/components/bc/format/BcFormatPercent.vue

@@ -61,7 +61,7 @@ const data = computed(() => {
     }
   }
   const localPercent = percent ?? calculatePercent(value, base)
-  label = new Intl.NumberFormat('en', {
+  label = new Intl.NumberFormat('en-Us', {
     maximumFractionDigits,
     // due to the default value of minimumFractionDigits: 2
     // there will be an error when `minimumFractionDigits > maximumFractionDitigs`

frontend/components/bc/format/FormatTimePassed.vue

@@ -17,7 +17,6 @@ interface Props {
   value?: number | string,
 }
 const props = defineProps<Props>()
-const { t: $t } = useTranslation()
 const { timestamp } = useDate()
 const { ageFormat } = storeToRefs(useSettingsStore())
 
@@ -44,7 +43,7 @@ const label = computed(() => {
         ts,
         mappedSetting.value,
         props.unitLength,
-        $t('locales.date'),
+        'en-US',
       )
       break
     case 'slot':
@@ -53,7 +52,7 @@ const label = computed(() => {
         ts,
         mappedSetting.value,
         props.unitLength,
-        $t('locales.date'),
+        'en-US',
       )
       break
     case 'epoch':
@@ -63,7 +62,7 @@ const label = computed(() => {
         ts,
         mappedSetting.value,
         props.unitLength,
-        $t('locales.date'),
+        'en-US',
       )
   }
 

frontend/components/dashboard/chart/DashboardChartRewards.vue

@@ -320,7 +320,7 @@ const option = computed<EChartsOption>(() => {
       },
       end: dataZoomEnd.value,
       labelFormatter: (_value: number, valueStr: string) => {
-        return formatEpochToDate(parseInt(valueStr), $t('locales.date'))
+        return formatEpochToDate(parseInt(valueStr), 'en-US')
       },
       start: dataZoomStart.value,
       type: 'slider',
@@ -420,7 +420,7 @@ const option = computed<EChartsOption>(() => {
         fontSize: textSize,
         fontWeight: fontWeightMedium,
         formatter: (value: number) => {
-          const date = formatEpochToDate(value, $t('locales.date'))
+          const date = formatEpochToDate(value, 'en-US')
           if (date === undefined) {
             return ''
           }

frontend/components/dashboard/chart/DashboardChartSummary.vue

@@ -264,7 +264,7 @@ const formatTSToDate = (value: string) => {
     undefined,
     'absolute',
     'narrow',
-    $t('locales.date'),
+    'en-US',
     false,
   )
 }
@@ -284,7 +284,7 @@ const formatTimestamp = (value: string) => {
     case 'epoch':
       return `${date}\n${formatTSToEpoch(value)}`
     case 'hourly':
-      return `${date}\n${formatTsToTime(Number(value), $t('locales.date'))}`
+      return `${date}\n${formatTsToTime(Number(value), 'en-US')}`
     default:
       return date
   }

frontend/components/dashboard/chart/DashboardChartTooltipHeader.vue

@@ -56,7 +56,7 @@ const dateText = computed(() => {
     undefined,
     'absolute',
     'narrow',
-    props.t('locales.date'),
+    'en-US',
     true,
   )
   if (!endTs.value) {
@@ -67,7 +67,7 @@ const dateText = computed(() => {
     undefined,
     'absolute',
     'narrow',
-    props.t('locales.date'),
+    'en-US',
     true,
   )
 

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

@@ -69,7 +69,7 @@ function createDutyLabels(dutyObjects?: number[]) {
         undefined,
         'relative',
         'short',
-        $t('locales.date'),
+        'en-US',
         true,
       )
     case 'got_slashed':

frontend/components/notifications/management/NotificationsManagementGeneralTab.vue

@@ -112,7 +112,7 @@ const textMutedUntil = computed(() => {
   return $t('notifications.general.mute.until', {
     date: formatTsToAbsolute(
       store.settings.general_settings.do_not_disturb_timestamp,
-      $t('locales.date'),
+      'en-US',
       true,
     ),
   })

frontend/composables/useFormat.ts

@@ -1,4 +1,5 @@
 import type { StringUnitLength } from 'luxon'
+import type { Locale } from '~/i18n/i18n.config'
 import type { AgeFormat } from '~/types/settings'
 
 export function useFormat() {
@@ -12,7 +13,7 @@ export function useFormat() {
     timestamp?: number,
     format?: AgeFormat,
     style?: StringUnitLength,
-    locales?: string,
+    locales?: Locale,
     withTime?: boolean,
   ): null | string | undefined {
     return formatTs(
@@ -30,7 +31,7 @@ export function useFormat() {
     timestamp?: number,
     format?: AgeFormat,
     style?: StringUnitLength,
-    locales?: string,
+    locales?: Locale,
     withTime?: boolean,
   ): null | string | undefined {
     return formatTs(
@@ -45,7 +46,7 @@ export function useFormat() {
 
   function formatEpochToDate(
     epoch: number,
-    locales: string,
+    locales: Locale,
   ): null | string | undefined {
     return formatEpochToDateTime(
       epoch,

frontend/i18n/i18n.config.ts

@@ -1,9 +1,11 @@
 import en from '~/i18n/locales/en.json'
 
 export type MessageSchema = typeof en
+const messages = { 'en-US': en }
+export type Locale = keyof typeof messages
 
 export default defineI18nConfig(() => ({
   legacy: false,
-  locale: 'en',
-  messages: { en },
+  locale: 'en-US',
+  messages,
 }))