refactor: remove legacy useTranslation hook (closes #18742)

.eslintrc.json

@@ -52,17 +52,6 @@
     ],
     "simple-import-sort/exports": "error",
     "no-unused-vars": "off",
-    "no-restricted-imports": [
-      "warn",
-      {
-        "paths": [
-          {
-            "name": "@/hooks/useTranslation",
-            "message": "Deprecated (#18742): bind namespaces directly with useTranslations from next-intl (client) or getTranslations from next-intl/server (server)."
-          }
-        ]
-      }
-    ],
     "unused-imports/no-unused-vars": [
       "error",
       {

AGENTS.md

@@ -166,7 +166,7 @@ For pipeline mechanics, recovery, manifests, ETHGlossary integration, and the `i
 3. **Follow import order** - ESLint will enforce, but be proactive
 4. **Use TypeScript strictly** - No `any` types, prefer `unknown`
 5. **Test in Storybook** - Create stories for new components (filename pattern: `.stories.tsx`)
-6. **Consider i18n** - All user-facing text should be translatable. Server components: `getTranslations` and `getLocale` from `next-intl/server`. Client components: `useTranslations` from `next-intl`, one namespace-bound function per namespace - to access a second namespace, bind another function (e.g. `const tCommon = useTranslations("common")`) rather than reaching across namespaces. The legacy `@/hooks/useTranslation` wrapper (`namespace:key` syntax) is deprecated for new code
+6. **Consider i18n** - All user-facing text should be translatable. Server components: `getTranslations` and `getLocale` from `next-intl/server`. Client components: `useTranslations` from `next-intl`, one namespace-bound function per namespace - to access a second namespace, bind another function (e.g. `const tCommon = useTranslations("common")`) rather than reaching across namespaces
 7. **Mobile-first** - Design for mobile, enhance for desktop
 8. **Accessibility** - Use Radix primitives, semantic HTML
 9. **Use locale-aware formatting wrappers** - Use `numberFormat()` from `src/lib/utils/numbers.ts` instead of `new Intl.NumberFormat()`, and `dateTimeFormat()` from `src/lib/utils/date.ts` instead of `new Intl.DateTimeFormat()` / `.toLocaleDateString()` / `.toLocaleTimeString()`. Both enforce correct numbering systems and calendar for Urdu and Arabic locales.

app/[locale]/roadmap/_components/ReleaseCarousel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useCallback, useEffect, useMemo, useState } from "react"
-import { useLocale } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
 
 import { Image } from "@/components/Image"
 import { ButtonLink } from "@/components/ui/buttons/Button"
@@ -19,11 +19,9 @@ import { dateTimeFormat, formatDate } from "@/lib/utils/date"
 
 import { getReleasesData, Release } from "@/data/roadmap/releases"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 const ReleaseCarousel = () => {
   const locale = useLocale()
-  const { t } = useTranslation("page-roadmap")
+  const t = useTranslations("page-roadmap")
 
   const releasesData = useMemo(() => getReleasesData(t), [t])
 

docs/best-practices.md

@@ -52,7 +52,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   - _tl;dr Each individual JSON entry should be a complete phrase by itself_
 
-- This is done using the `Translation` component. However, there is an alternative method for regular JS: using the `t` function from `@/hooks/useTranslation`
+- This is done using the `Translation` component. However, there is an alternative method for regular JS: using the `t` function from `next-intl`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
@@ -66,14 +66,19 @@ Markdown will be translated as whole pages of content, so no specific action is
   - **Method two: `t()`**
 
     ```tsx
-    import { useTranslation } from "@/hooks/useTranslation"
+    // Client components
+    import { useTranslations } from "next-intl"
 
-    // Utilize anywhere in JS using
-    const { t } = useTranslation()
+    // Bind one function per namespace, then access keys within it
+    const t = useTranslations("common")
     t("language-json-key")
     ```
 
     ```tsx
+    // Server components
+    import { getTranslations } from "next-intl/server"
+
+    const t = await getTranslations("common")
     const siteTitle = t("site-title")
     ```
 

src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react"
-import { useLocale } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
 
 import { FilterInputState, Lang } from "@/lib/types"
 
@@ -16,8 +16,6 @@ import { getLanguageCodeName } from "@/lib/utils/intl"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLanguageCountWalletsData } from "@/lib/utils/wallets"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 interface FindWalletLanguageSelectInputProps {
   filterIndex: number
   itemIndex: number
@@ -39,7 +37,7 @@ const FindWalletLanguageSelectInput = ({
   const [searchQuery, setSearchQuery] = useState("")
   const [isSelectOpen, setIsSelectOpen] = useState(false)
   const searchInputRef = useRef<HTMLInputElement>(null)
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
   const languageCountWalletsData = getLanguageCountWalletsData(locale as string)
   const countSortedLanguagesCount = [...languageCountWalletsData].sort(
     (a, b) => b.count - a.count

src/components/FindWalletProductTable/FindWalletsNoResults.tsx

@@ -1,11 +1,11 @@
+import { useTranslations } from "next-intl"
+
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { Button } from "../ui/buttons/Button"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 const FindWalletsNoResults = ({ resetFilters }) => {
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
 
   // Track empty state
   trackCustomEvent({

src/components/FindWalletProductTable/PersonaTags.tsx

@@ -1,15 +1,14 @@
 import { memo } from "react"
+import { useTranslations } from "next-intl"
 
 import { Tag } from "../ui/tag"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 type PersonaTagsProps = {
   walletPersonas: string[]
 }
 
 const PersonaTags = ({ walletPersonas }: PersonaTagsProps) => {
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
 
   if (walletPersonas.length === 0) return null
 

src/components/FindWalletProductTable/WalletInfo.tsx

@@ -1,5 +1,6 @@
 import { memo, useMemo } from "react"
 import { ChevronDown, ChevronUp } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 import type { ChainName, Wallet } from "@/lib/types"
 
@@ -17,14 +18,12 @@ import { TagsInlineText } from "../ui/tag"
 
 import PersonaTags from "./PersonaTags"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 interface WalletInfoProps {
   wallet: Wallet
 }
 
 const WalletInfo = ({ wallet }: WalletInfoProps) => {
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
 
   const walletPersonas = useMemo(() => {
     return getWalletPersonas(wallet)

src/components/FindWalletProductTable/WalletSubComponent.tsx

@@ -1,5 +1,5 @@
 import { Globe, Info } from "lucide-react"
-import { useLocale } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
 
 import { FilterOption, Lang, WalletData } from "@/lib/types"
 
@@ -16,8 +16,6 @@ import InlineLink from "@/components/ui/Link"
 import { cn } from "@/lib/utils/cn"
 import { getLocaleFormattedDate } from "@/lib/utils/date"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 const SocialLink = (props) => (
   <InlineLink
     className="hover:scale-1.1 flex h-6 scale-100 items-center align-middle transition-transform duration-100"
@@ -38,7 +36,7 @@ const WalletSubComponent = ({
 }: WalletSubComponentProps) => {
   const locale = useLocale()
 
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
   const walletFiltersOptions: FilterOption[] = useWalletFilters()
 
   const walletFilterDisplayOrder = [

src/components/FindWalletProductTable/hooks/useWalletFilters.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react"
 import { Brain, LayersPlus } from "lucide-react"
-import { useLocale } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
 
 import { FilterOption } from "@/lib/types"
 
@@ -15,11 +15,10 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 export const useWalletFilters = (): FilterOption[] => {
   const locale = useLocale()
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
+  const tTable = useTranslations("table")
   const prevNetworkArray = useRef<string[]>([])
   return [
     {
@@ -31,7 +30,7 @@ export const useWalletFilters = (): FilterOption[] => {
           filterLabel: t("page-find-wallet-mobile"),
           description: "",
           inputState: false,
-          optionsLegend: t("table:table-mobile-platforms") as string,
+          optionsLegend: tTable("table-mobile-platforms") as string,
           input: (filterIndex, itemIndex, inputState, updateFilterState) => {
             return (
               <SwitchFilterInput
@@ -141,7 +140,7 @@ export const useWalletFilters = (): FilterOption[] => {
           filterLabel: t("page-find-wallet-desktop"),
           description: "",
           inputState: false,
-          optionsLegend: t("table:table-desktop-platforms") as string,
+          optionsLegend: tTable("table-desktop-platforms") as string,
           input: (filterIndex, itemIndex, inputState, updateFilterState) => {
             return (
               <SwitchFilterInput
@@ -292,7 +291,7 @@ export const useWalletFilters = (): FilterOption[] => {
           filterLabel: t("page-find-wallet-browser"),
           description: "",
           inputState: false,
-          optionsLegend: t("table:table-browser-engines") as string,
+          optionsLegend: tTable("table-browser-engines") as string,
           input: (filterIndex, itemIndex, inputState, updateFilterState) => {
             return (
               <SwitchFilterInput

src/components/FindWalletProductTable/hooks/useWalletPersonaPresets.tsx

@@ -1,9 +1,9 @@
-import { WalletPersonas } from "@/lib/types"
+import { useTranslations } from "next-intl"
 
-import { useTranslation } from "@/hooks/useTranslation"
+import { WalletPersonas } from "@/lib/types"
 
 export const useWalletPersonaPresets = (): WalletPersonas[] => {
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
   const personas: WalletPersonas[] = [
     {
       title: t("page-find-wallet-new-to-crypto-title"),

src/components/FindWalletProductTable/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { useTranslations } from "next-intl"
 
 import type { WalletRow } from "@/lib/types"
 
@@ -13,10 +14,8 @@ import FindWalletsNoResults from "./FindWalletsNoResults"
 import List from "./List"
 import WalletSubComponent from "./WalletSubComponent"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 const FindWalletProductTable = ({ wallets }: { wallets: WalletRow[] }) => {
-  const { t } = useTranslation("page-wallets-find-wallet")
+  const t = useTranslations("page-wallets-find-wallet")
   const walletPersonas = useWalletPersonaPresets()
   const walletFilterOptions = useWalletFilters()