refactor: add t, useTranslation helpers to use translations

.eslintrc.json

@@ -59,6 +59,13 @@
     "react-hooks/exhaustive-deps": "error",
     "react/react-in-jsx-scope": "off",
     "react/jsx-uses-react": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "off"
   },
   "overrides": [

src/background/services/tabEvents.ts

@@ -4,6 +4,7 @@ import { MonetizationService } from './monetization'
 import { StorageService } from './storage'
 import { IsTabMonetizedPayload } from '@/shared/messages'
 import { getTabId } from '../utils'
+import { tFactory } from '@/shared/helpers'
 
 const runtime = browser.runtime
 const ICONS = {
@@ -62,15 +63,16 @@ export class TabEvents {
     sender?: Runtime.MessageSender
   ) => {
     const { enabled } = await this.storage.get(['enabled'])
+    const t = tFactory(this.browser)
 
-    let title = this.browser.i18n.getMessage('appName')
+    let title = t('appName')
     let iconData = enabled ? ICONS.default : ICONS.warning
     if (enabled && payload) {
       const { value: isTabMonetized } = payload
       iconData = isTabMonetized ? ICONS.active : ICONS.inactive
       const tabStateText = isTabMonetized
-        ? this.browser.i18n.getMessage('monetizationActiveShort')
-        : this.browser.i18n.getMessage('monetizationInactiveShort')
+        ? t('monetizationActiveShort')
+        : t('monetizationInactiveShort')
       title = `${title} - ${tabStateText}`
     }
     const tabId = sender && getTabId(sender)

src/popup/Popup.tsx

@@ -1,7 +1,8 @@
 import { MainLayout } from '@/popup/components/layout/MainLayout'
-import { PopupContextProvider } from './lib/context'
+import { PopupContextProvider, TranslationContextProvider } from './lib/context'
 import { LazyMotion, domAnimation } from 'framer-motion'
 import React from 'react'
+import browser from 'webextension-polyfill'
 import { ProtectedRoute } from '@/popup/components/ProtectedRoute'
 import {
   RouteObject,
@@ -49,9 +50,11 @@ const router = createMemoryRouter(routes)
 export const Popup = () => {
   return (
     <LazyMotion features={domAnimation} strict>
-      <PopupContextProvider>
-        <RouterProvider router={router} />
-      </PopupContextProvider>
+      <TranslationContextProvider browser={browser}>
+        <PopupContextProvider>
+          <RouterProvider router={router} />
+        </PopupContextProvider>
+      </TranslationContextProvider>
     </LazyMotion>
   )
 }

src/popup/components/SiteNotMonetized.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import browser from 'webextension-polyfill'
 import { WarningSign } from '@/popup/components/Icons'
+import { useTranslation } from '@/popup/lib/context'
 
 export const SiteNotMonetized = () => {
+  const t = useTranslation()
   return (
     <div className="flex h-full items-center justify-center gap-2 p-4 text-lg">
       <div className="flex-shrink-0">
         <WarningSign className="size-6 text-medium" />
       </div>
-      <h3 className="text-medium">
-        {browser.i18n.getMessage('siteNotMonetized')}
-      </h3>
+      <h3 className="text-medium">{t('siteNotMonetized')}</h3>
     </div>
   )
 }

src/popup/lib/context.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import browser from 'webextension-polyfill'
+import browser, { type Browser } from 'webextension-polyfill'
 import { getContextData } from '@/popup/lib/messages'
-import { DeepNonNullable, PopupStore } from '@/shared/types'
+import { tFactory } from '@/shared/helpers'
+import type { DeepNonNullable, PopupStore } from '@/shared/types'
 import {
   ContentToBackgroundAction,
   type ContentToBackgroundMessage
@@ -161,3 +162,25 @@ export function PopupContextProvider({ children }: PopupContextProviderProps) {
     </PopupStateContext.Provider>
   )
 }
+
+const TranslationContext = React.createContext<ReturnType<typeof tFactory>>(
+  (v: string) => v
+)
+
+export const TranslationContextProvider = ({
+  browser,
+  children
+}: {
+  browser: Browser
+  children: React.ReactNode
+}) => {
+  const t = tFactory(browser)
+
+  return (
+    <TranslationContext.Provider value={t}>
+      {children}
+    </TranslationContext.Provider>
+  )
+}
+
+export const useTranslation = () => React.useContext(TranslationContext)

src/popup/pages/MissingHostPermission.tsx

@@ -2,8 +2,10 @@ import React from 'react'
 import browser from 'webextension-polyfill'
 import { PERMISSION_HOSTS } from '@/shared/defines'
 import { WarningSign } from '@/popup/components/Icons'
+import { useTranslation } from '@/popup/lib/context'
 
 export const Component = () => {
+  const t = useTranslation()
   return (
     <div className="rounded-md bg-orange-50 p-4 text-sm">
       <div className="flex">
@@ -13,7 +15,7 @@ export const Component = () => {
         <div className="ml-3 flex flex-col gap-2">
           <h3 className="font-medium text-orange-800">Permission needed</h3>
           <div className="text-orange-700">
-            <p>{browser.i18n.getMessage('hostsPermissionsNeeded')}</p>
+            <p>{t('hostsPermissionsNeeded')}</p>
           </div>
         </div>
       </div>

src/shared/helpers.ts

@@ -2,6 +2,8 @@ import { SuccessResponse } from '@/shared/messages'
 import { WalletAddress } from '@interledger/open-payments/dist/types'
 import { cx, CxOptions } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
+import type { Browser } from 'webextension-polyfill'
+import type { ExcludeFirst } from './types'
 
 export const cn = (...inputs: CxOptions) => {
   return twMerge(cx(inputs))
@@ -192,3 +194,16 @@ export function convert(value: bigint, source: number, target: number) {
 export function bigIntMax(a: string, b: string) {
   return BigInt(a) > BigInt(b) ? a : b
 }
+
+/**
+ * Helper over calling cumbersome `this.browser.i18n.getMessage(key)` with added
+ * benefit that it type-checks if key exists in message.json
+ */
+export function t<
+  T extends keyof typeof import('../_locales/en/messages.json')
+>(browser: Pick<Browser, 'i18n'>, key: T, substitutions?: string | string[]) {
+  return browser.i18n.getMessage(key, substitutions)
+}
+export function tFactory(browser: Pick<Browser, 'i18n'>) {
+  return (...args: ExcludeFirst<Parameters<typeof t>>) => t(browser, ...args)
+}

src/shared/types.ts

@@ -95,3 +95,6 @@ export type PopupStore = Omit<
 export type DeepNonNullable<T> = {
   [P in keyof T]?: NonNullable<T[P]>
 }
+
+export type ExcludeFirst<T extends [f: unknown, ...rest: unknown[]]> =
+  T extends [infer _F, ...infer Rest] ? Rest : never