refactor(i18n): replace useI18n() with useTranslation()

This will enable `autocomplete` for `translations` to improve `dx`. And wraps `third party` code for better `maintainability`. See: BEDS-97
gobitfly · Aug 6, 2024 · c717308 · c717308
1 parent 575f079
commit c717308
Show file tree

Hide file tree

Showing 83 changed files with 84 additions and 84 deletions.
diff --git a/frontend/components/bc/BcFaq.vue b/frontend/components/bc/BcFaq.vue
@@ -7,7 +7,7 @@ interface Props {
   translationPath?: string
 }
 const props = defineProps<Props>()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const questions = computed(() => {
   const list = []

diff --git a/frontend/components/bc/BcMaintenanceBanner.vue b/frontend/components/bc/BcMaintenanceBanner.vue
@@ -3,7 +3,7 @@ import { warn } from 'vue'
 
 const { public: { maintenanceTS } } = useRuntimeConfig()
 const { tick } = useInterval(60)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const maintenanceLabel = computed(() => {
   if (!maintenanceTS) {

diff --git a/frontend/components/bc/CookieModal.vue b/frontend/components/bc/CookieModal.vue
@@ -3,7 +3,7 @@ import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
 import { Target } from '~/types/links'
 
 const cookiePreference = useCookie<CookiesPreference>(COOKIE_KEY.COOKIES_PREFERENCE, { default: () => undefined })
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const setCookiePreference = (value: CookiesPreference) => {
   cookiePreference.value = value

diff --git a/frontend/components/bc/CopyToClipboard.vue b/frontend/components/bc/CopyToClipboard.vue
@@ -10,7 +10,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { value: tooltip, bounce, instant } = useDebounceValue<string>($t('clipboard.copy'), 2000)
 
 function copyToClipboard (): void {

diff --git a/frontend/components/bc/dialog/BcDialogConfirm.vue b/frontend/components/bc/dialog/BcDialogConfirm.vue
@@ -8,7 +8,7 @@ interface Props {
   severity?: 'default' | 'danger'
 }
 const { props, dialogRef } = useBcDialog<Props>({ showHeader: false })
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const noLabel = computed(() => props.value?.noLabel || $t('navigation.no'))
 const yesLabel = computed(() => props.value?.yesLabel || $t('navigation.yes'))

diff --git a/frontend/components/bc/footer/LinkList.vue b/frontend/components/bc/footer/LinkList.vue
@@ -13,7 +13,7 @@ import {
 
 import { Target } from '~/types/links'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 type Row = { title: string, links: [string, IconDefinition, string, Target][] }
 const columns: Row[] = [
   {

diff --git a/frontend/components/bc/format/FormatTimePassed.vue b/frontend/components/bc/format/FormatTimePassed.vue
@@ -14,7 +14,7 @@ interface Props {
   unitLength?: StringUnitLength
 }
 const props = defineProps<Props>()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { timestamp } = useDate()
 const { setting } = useGlobalSetting<AgeFormat>('age-format')
 

diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
@@ -19,7 +19,7 @@ const { slotToEpoch, currentNetwork, networkInfo } = useNetworkStore()
 const { doLogout, isLoggedIn } = useUserStore()
 const { currency, available, rates } = useCurrency()
 const { width } = useWindowSize()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const colorMode = useColorMode()
 const isSmallScreen = computed(() => width.value < smallHeaderThreshold)

diff --git a/frontend/components/bc/header/MegaMenu.vue b/frontend/components/bc/header/MegaMenu.vue
@@ -56,7 +56,7 @@ import IconWebhook from '~/components/icon/megaMenu/WebHook.vue'
 import { Target } from '~/types/links'
 import { mobileHeaderThreshold, smallHeaderThreshold } from '~/types/header'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { width } = useWindowSize()
 const { doLogout, isLoggedIn } = useUserStore()
 const route = useRoute()

diff --git a/frontend/components/bc/premium/BcPremiumModal.vue b/frontend/components/bc/premium/BcPremiumModal.vue
@@ -5,7 +5,7 @@ interface Props {
 }
 
 const { props, dialogRef, setHeader } = useBcDialog<Props>({ contentClass: 'premium-modal' })
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const hide = () => {
   dialogRef?.value.close()

diff --git a/frontend/components/bc/searchbar/CategorySelectors.vue b/frontend/components/bc/searchbar/CategorySelectors.vue
@@ -16,7 +16,7 @@ defineProps<{
 }>()
 const liveState = defineModel<CategoryFilter>({ required: true }) // each entry has a Category as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 function selectionHasChanged (category : Category, selected : boolean) {
   liveState.value.set(category, selected)

diff --git a/frontend/components/bc/searchbar/NetworkSelector.vue b/frontend/components/bc/searchbar/NetworkSelector.vue
@@ -12,7 +12,7 @@ defineProps<{
 }>()
 const liveState = defineModel<NetworkFilter>({ required: true }) // each entry has a ChainIDs as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 const headState = ref<{look : 'on'|'off', network : string}>({
   look: 'off',

diff --git a/frontend/components/bc/searchbar/SearchbarMain.vue b/frontend/components/bc/searchbar/SearchbarMain.vue
@@ -42,7 +42,7 @@ const dropdownLayout = ref<SearchbarDropdownLayout>('narrow-dropdown')
 
 defineExpose<ExposedSearchbarMethods>({ hideResult, closeDropdown, empty })
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { fetch } = useCustomFetch()
 const { availableNetworks } = useNetworkStore()
 

diff --git a/frontend/components/bc/searchbar/SuggestionRow.vue b/frontend/components/bc/searchbar/SuggestionRow.vue
@@ -29,7 +29,7 @@ const props = defineProps<{
   screenWidthCausingSuddenChange: number
 }>()
 
-const { t } = useI18n()
+const { t } = useTranslation()
 
 function formatSubcategoryCell () : string {
   const i18nPathOfSubcategoryTitle = getI18nPathOfTranslatableLitteral(SubCategoryInfo[TypeInfo[props.suggestion.type].subCategory].title)

diff --git a/frontend/components/bc/table/BcTableValidTag.vue b/frontend/components/bc/table/BcTableValidTag.vue
@@ -6,7 +6,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const data = computed<{color: TagColor, label: string}>(() => {
   return {

diff --git a/frontend/components/block/table/BlockTableStatus.vue b/frontend/components/block/table/BlockTableStatus.vue
@@ -9,7 +9,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const { latestState } = useLatestStateStore()
 

diff --git a/frontend/components/dashboard/DashboardControls.vue b/frontend/components/dashboard/DashboardControls.vue
@@ -16,7 +16,7 @@ const { isLoggedIn } = useUserStore()
 const { dashboardKey, isPublic, isPrivate, isShared, setDashboardKey, dashboardType, publicEntities } = useDashboardKey()
 const { refreshDashboards, dashboards, getDashboardLabel, updateHash } = useUserDashboardStore()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { width } = useWindowSize()
 const dialog = useDialog()
 const { fetch } = useCustomFetch()

diff --git a/frontend/components/dashboard/DashboardHeader.vue b/frontend/components/dashboard/DashboardHeader.vue
@@ -19,7 +19,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const route = useRoute()
 const router = useRouter()
 const isValidatorDashboard = route.name === 'dashboard-id'

diff --git a/frontend/components/dashboard/DashboardRenameModal.vue b/frontend/components/dashboard/DashboardRenameModal.vue
@@ -3,7 +3,7 @@ import type { DashboardType } from '~/types/dashboard'
 import { API_PATH } from '~/types/customFetch'
 import type { ValidatorDashboard } from '~/types/api/dashboard'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()
 
 const name = defineModel<string>('name', { default: '' })

diff --git a/frontend/components/dashboard/DashboardShareCodeModal.vue b/frontend/components/dashboard/DashboardShareCodeModal.vue
@@ -9,7 +9,7 @@ interface Props {
   dashboard?: ValidatorDashboard; // Currently only validator dashboards are supported. For public dashboards this will be undefined
 }
 const { props, dialogRef } = useBcDialog<Props>()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const router = useRouter()
 const url = useRequestURL()
 const { refreshDashboards } = useUserDashboardStore()

diff --git a/frontend/components/dashboard/DashboardShareModal.vue b/frontend/components/dashboard/DashboardShareModal.vue
@@ -10,7 +10,7 @@ interface Props {
   dashboard: ValidatorDashboard; // Currently only validator dashboards are supported
 }
 const { props, dialogRef } = useBcDialog<Props>()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { refreshDashboards } = useUserDashboardStore()
 const { fetch } = useCustomFetch()
 

diff --git a/frontend/components/dashboard/GroupManagementModal.vue b/frontend/components/dashboard/GroupManagementModal.vue
@@ -14,7 +14,7 @@ import type { Cursor, SortOrder } from '~/types/datatable'
 import { getSortOrder } from '~/utils/table'
 import { API_PATH } from '~/types/customFetch'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()
 const dialog = useDialog()
 

diff --git a/frontend/components/dashboard/SharedDashboardModal.vue b/frontend/components/dashboard/SharedDashboardModal.vue
@@ -4,7 +4,7 @@ import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
 const cookiePreference = useCookie<CookiesPreference>(COOKIE_KEY.COOKIES_PREFERENCE, { default: () => undefined })
 const { isShared } = useDashboardKey()
 const { dashboards } = useUserDashboardStore()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const route = useRoute()
 
 const dismissed = ref(false)

diff --git a/frontend/components/dashboard/ValidatorEpochDutiesModal.vue b/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
@@ -7,7 +7,7 @@ import type { ValidatorHistoryDuties } from '~/types/api/common'
 import type { PathValues } from '~/types/customFetch'
 import { API_PATH } from '~/types/customFetch'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()
 
 const { width } = useWindowSize()

diff --git a/frontend/components/dashboard/ValidatorManagementModal.vue b/frontend/components/dashboard/ValidatorManagementModal.vue
@@ -16,7 +16,7 @@ import { type SearchBar, SearchbarShape, SearchbarColors, SearchbarPurpose, type
 import { API_PATH, type PathValues } from '~/types/customFetch'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()
 const { currentNetwork } = useNetworkStore()
 

diff --git a/frontend/components/dashboard/ValidatorOverview.vue b/frontend/components/dashboard/ValidatorOverview.vue
@@ -6,7 +6,7 @@ import { type OverviewTableData } from '~/types/dashboard/overview'
 import { TimeFrames, type NumberOrString } from '~/types/value'
 import { totalElClNumbers } from '~/utils/bigMath'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { converter } = useValue()
 
 const tPath = 'dashboard.validator.overview.'

diff --git a/frontend/components/dashboard/ValidatorSlotViz.vue b/frontend/components/dashboard/ValidatorSlotViz.vue
@@ -4,7 +4,7 @@ import { orderBy } from 'lodash-es'
 import { useValidatorSlotVizStore } from '~/stores/dashboard/useValidatorSlotVizStore'
 import { getGroupLabel } from '~/utils/dashboard/group'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { dashboardKey } = useDashboardKey()
 const { validatorCount, overview } = useValidatorDashboardOverviewStore()
 const { networkInfo } = useNetworkStore()

diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue b/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue
@@ -3,7 +3,7 @@ import { orderBy } from 'lodash-es'
 import { type AggregationTimeframe, AggregationTimeframes, type EfficiencyType, EfficiencyTypes, SUMMARY_CHART_GROUP_NETWORK_AVERAGE, SUMMARY_CHART_GROUP_TOTAL, type SummaryChartFilter } from '~/types/dashboard/summary'
 import { getGroupLabel } from '~/utils/dashboard/group'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const { overview } = useValidatorDashboardOverviewStore()
 

diff --git a/frontend/components/dashboard/chart/RewardsChart.vue b/frontend/components/dashboard/chart/RewardsChart.vue
@@ -63,7 +63,7 @@ await useAsyncData('validator_dashboard_rewards_chart', async () => {
 
 const { groups } = useValidatorDashboardGroups()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const colorMode = useColorMode()
 
 const { converter } = useValue()

diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue
@@ -37,7 +37,7 @@ interface Props {
 const props = defineProps<Props>()
 const chart = ref<ECharts | undefined>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const colorMode = useColorMode()
 const { fetch } = useCustomFetch()
 const { tsToEpoch, slotToTs, secondsPerEpoch } = useNetworkStore()

diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -4,7 +4,7 @@ import { ChainInfo, type ChainIDs, isL1 } from '~/types/network'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
 const { currentNetwork, availableNetworks, isNetworkDisabled } = useNetworkStore()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const emit = defineEmits<{(e: 'next' | 'back'): void }>()
 const network = defineModel<ChainIDs>('network', { required: true })

diff --git a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
@@ -2,7 +2,7 @@
 import { type DashboardType } from '~/types/dashboard'
 import { IconAccount, IconValidator } from '#components'
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { isLoggedIn } = useUserStore()
 
 interface Props {

diff --git a/frontend/components/dashboard/group/GroupLabel.vue b/frontend/components/dashboard/group/GroupLabel.vue
@@ -8,7 +8,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const name = computed(() => {
   if (props.group.id === DAHSHBOARDS_ALL_GROUPS_ID) {

diff --git a/frontend/components/dashboard/group/GroupSelectionDialog.vue b/frontend/components/dashboard/group/GroupSelectionDialog.vue
@@ -7,7 +7,7 @@ interface Props {
   totalValidators?: number
 }
 const { props, setHeader, dialogRef } = useBcDialog<Props>()
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const selectedGroupId = ref<number>()
 

diff --git a/frontend/components/dashboard/table/DashboardTableBlocks.vue b/frontend/components/dashboard/table/DashboardTableBlocks.vue
@@ -10,7 +10,7 @@ const { dashboardKey, isPublic } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const { blocks, query: lastQuery, isLoading, getBlocks } = useValidatorDashboardBlocksStore()
 const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)

diff --git a/frontend/components/dashboard/table/DashboardTableClDeposits.vue b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
@@ -11,7 +11,7 @@ const { dashboardKey } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(5)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const { slotToEpoch } = useNetworkStore()
 

diff --git a/frontend/components/dashboard/table/DashboardTableElDeposits.vue b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
@@ -10,7 +10,7 @@ const { dashboardKey } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(5)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const { deposits, query: lastQuery, getDeposits, getTotalAmount, totalAmount, isLoadingDeposits, isLoadingTotal } = useValidatorDashboardElDepositsStore()
 const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)

diff --git a/frontend/components/dashboard/table/DashboardTableRewards.vue b/frontend/components/dashboard/table/DashboardTableRewards.vue
@@ -13,7 +13,7 @@ const { dashboardKey, isPublic } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
 const { rewards, query: lastQuery, isLoading, getRewards } = useValidatorDashboardRewardsStore()

diff --git a/frontend/components/dashboard/table/DashboardTableRewardsDetails.vue b/frontend/components/dashboard/table/DashboardTableRewardsDetails.vue
@@ -14,7 +14,7 @@ const props = defineProps<Props>()
 
 const { dashboardKey } = useDashboardKey()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { details } = useValidatorDashboardRewardsDetailsStore(dashboardKey.value, props.row.group_id, props.row.epoch)
 
 const dialog = useDialog()

diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue
@@ -15,7 +15,7 @@ const { dashboardKey, isPublic } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const chartFilter = ref<SummaryChartFilter>({ aggregation: 'hourly', efficiency: 'all', groupIds: [] })
 
 const { summary, query: lastQuery, isLoading, getSummary } = useValidatorDashboardSummaryStore()

diff --git a/frontend/components/dashboard/table/DashboardTableValidators.vue b/frontend/components/dashboard/table/DashboardTableValidators.vue
@@ -21,7 +21,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { groups } = useValidatorDashboardGroups()
 
 const dialog = useDialog()

diff --git a/frontend/components/dashboard/table/DashboardTableWithdrawals.vue b/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
@@ -15,7 +15,7 @@ const { dashboardKey } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const { latestState } = useLatestStateStore()
 const { slotToEpoch } = useNetworkStore()

diff --git a/frontend/components/dashboard/table/SummaryDetails.vue b/frontend/components/dashboard/table/SummaryDetails.vue
@@ -12,7 +12,7 @@ const props = defineProps<Props>()
 
 const { dashboardKey } = useDashboardKey()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 const { details: summary, getDetails } = useValidatorDashboardSummaryDetailsStore(dashboardKey.value, props.row.group_id)
 
 watch(() => props.timeFrame, () => {

diff --git a/frontend/components/dashboard/table/SummaryStatus.vue b/frontend/components/dashboard/table/SummaryStatus.vue
@@ -7,7 +7,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const { t: $t } = useI18n()
+const { t: $t } = useTranslation()
 
 const mapped = computed(() => {
   const mapCount = (count: number, key: string, icon: SlotVizIcons) => {