Add internationalization and replace all hardcoded labels with i18n entries

packages/features/package.json

@@ -50,6 +50,8 @@
     "cmdk": "1.0.0",
     "dayjs": "1.11.12",
     "easy-mesh-gradient": "0.0.5",
+    "i18next": "^23.14.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "immer": "10.1.1",
     "js-beautify": "1.15.1",
     "lucide-react": "0.417.0",
@@ -62,6 +64,7 @@
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "7.52.1",
+    "react-i18next": "^15.0.1",
     "react-mixpanel-browser": "4.1.0",
     "react-qr-code": "2.0.15",
     "react-router": "6.25.1",

packages/features/src/@types/i18next.d.ts

@@ -0,0 +1,13 @@
+import "i18next"
+import resources from "./resources"
+const { ns1, ns2 } = resources
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "ns1"
+    resources: {
+      ns1: typeof ns1
+      ns2: typeof ns2
+    }
+  }
+}

packages/features/src/@types/resources.ts

@@ -0,0 +1,9 @@
+import ns1 from "../i18n/locales/en/en.json"
+import ns2 from "../i18n/locales/tr/tr.json"
+
+const resources = {
+  ns1,
+  ns2,
+} as const
+
+export default resources

packages/features/src/address-book/components/new-address-form.tsx

@@ -3,6 +3,8 @@ import { PlusIcon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 
+import i18next from "i18next"
+
 import { useAddressBookStore } from "@/common/store/address-book"
 import { FormError } from "@/components/form-error"
 
@@ -26,6 +28,8 @@ export const NewAddressForm = () => {
     addContact(data)
     return navigate("/contacts")
   }
+
+  const { t } = i18next
   return (
     <form
       className="flex flex-col flex-1 gap-4"
@@ -36,7 +40,7 @@ export const NewAddressForm = () => {
           htmlFor="contactName"
           className={cn(errors.name && "text-destructive")}
         >
-          Contact's Name
+          {t("contactName")}
         </label>
         <input
           id="contactName"
@@ -52,7 +56,7 @@ export const NewAddressForm = () => {
           htmlFor="contactAddress"
           className={cn(errors.address && "text-destructive")}
         >
-          Receiver Address
+          {t("receiverAddress")}
         </label>
         <input
           id="contactAddress"
@@ -69,7 +73,7 @@ export const NewAddressForm = () => {
         data-testid="newAddress/createButton"
       >
         <PlusIcon size={16} />
-        <span>Create Contact</span>
+        <span>{t("createContact")}</span>
       </button>
     </form>
   )

packages/features/src/address-book/views/address-book.tsx

@@ -1,10 +1,10 @@
+import { truncateString } from "@/common/lib/string"
 import type { Contact } from "@/common/types"
 import { AppLayout } from "@/components/app-layout"
-
-import { truncateString } from "@/common/lib/string"
 import { MenuBar } from "@/components/menu-bar"
 import { Copy, Plus, TrashIcon } from "lucide-react"
 import type { MouseEvent } from "react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { toast } from "sonner"
 
@@ -25,11 +25,12 @@ export const AddressBookView = ({
     navigator.clipboard.writeText(address)
     toast.success("Address copied")
   }
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <div className="pb-12 bg-secondary rounded-b-2xl">
         <MenuBar variant="dashboard" />
-        <h2 className="ml-8 mt-1 text-3xl">Address book</h2>
+        <h2 className="ml-8 mt-1 text-3xl">{t("addressBook")}</h2>
       </div>
       <div className="py-6 px-8 space-y-2">
         <Link
@@ -38,7 +39,7 @@ export const AddressBookView = ({
           data-testid="addressBook/addAddressButton"
         >
           <Plus width={16} height={16} className="text-[#F6C177]" />
-          <p>Add new contact</p>
+          <p>{t("addNewContact")}</p>
         </Link>
         <div className="space-y-2">
           {contacts.map((contact, index) => {

packages/features/src/address-book/views/new-address.tsx

@@ -5,6 +5,7 @@ import { MenuBar } from "@/components/menu-bar"
 import { zodResolver } from "@hookform/resolvers/zod"
 import clsx from "clsx"
 import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { useLocation } from "react-router-dom"
 import { NewAddressFormSchema } from "../components/new-address-form.schema"
 
@@ -30,11 +31,14 @@ export const NewAddressView = ({ onGoBack, onSubmit }: NewAddressViewProps) => {
   useEffect(() => {
     setValue("address", location.state?.address || "")
   }, [])
+
+  const { t } = useTranslation()
+
   return (
     <AppLayout>
       <div className="pb-12 bg-secondary rounded-b-2xl">
         <MenuBar variant="back" onBackClicked={onGoBack} />
-        <h2 className="ml-8 mt-1 text-3xl">New contact</h2>
+        <h2 className="ml-8 mt-1 text-3xl">{t("newContact")}</h2>
       </div>
       <div className="pt-6 pb-8 px-8 flex flex-col flex-1">
         <form
@@ -79,7 +83,7 @@ export const NewAddressView = ({ onGoBack, onSubmit }: NewAddressViewProps) => {
             disabled={disableSubmit}
             data-testid="submitForm"
           >
-            Add contact
+            {t("addContact")}
           </button>
         </form>
       </div>

packages/features/src/components/address-dropdown.tsx

@@ -2,6 +2,7 @@ import { truncateString } from "@/common/lib/string"
 import { useVault } from "@palladxyz/vault"
 import clsx from "clsx"
 import { CopyIcon, ExternalLinkIcon, UserPlusIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { toast } from "sonner"
 
@@ -34,6 +35,8 @@ export const AddressDropdown = ({
     )
     window.open(url, "_blank")?.focus()
   }
+  const { t } = useTranslation()
+
   return (
     <div className={clsx("dropdown", dropdownEnd && "dropdown-end")}>
       <div
@@ -55,13 +58,13 @@ export const AddressDropdown = ({
         <li onClick={handleClick}>
           <button type="button" onClick={copyAddress} className="flex gap-2">
             <CopyIcon />
-            <span>Copy Address</span>
+            <span>{t("copyAddress")}</span>
           </button>
         </li>
         <li onClick={handleClick}>
           <button type="button" onClick={openInExplorer} className="flex gap-2">
             <ExternalLinkIcon />
-            <span>Open in Minascan</span>
+            <span>{t("openInMinascan")}</span>
           </button>
         </li>
         <li onClick={handleClick}>
@@ -71,7 +74,7 @@ export const AddressDropdown = ({
             className="flex gap-2"
           >
             <UserPlusIcon />
-            <span>Create Contact</span>
+            <span>{t("createContact")}</span>
           </Link>
         </li>
       </ul>

packages/features/src/components/fee-picker.tsx

@@ -1,5 +1,6 @@
 import { TransactionFee } from "@/common/lib/const"
 import { clsx } from "clsx"
+import { useTranslation } from "react-i18next"
 
 type TransactionFeeShortProps = {
   feeValue: keyof typeof TransactionFee
@@ -10,13 +11,14 @@ export const TransactionFeeShort = ({
   feeValue,
   onClick,
 }: TransactionFeeShortProps) => {
+  const { t } = useTranslation()
   return (
     <button
       type="button"
       className="btn btn-link text-base-content no-underline hover:no-underline"
       onClick={onClick}
     >
-      <span className="underline">Transaction fee:</span>
+      <span className="underline">{t("transactionFee")}</span>
       <span>{TransactionFee[feeValue]} MINA</span>
     </button>
   )
@@ -28,6 +30,7 @@ type FeePickerProps = {
 }
 
 export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
+  const { t } = useTranslation()
   return (
     <div className="join w-full">
       <button
@@ -38,7 +41,7 @@ export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
         )}
         onClick={() => setValue("fee", "slow")}
       >
-        <div>Slow</div>
+        <div>{t("slow")}</div>
         <div className="text-nowrap">{TransactionFee.slow} MINA</div>
       </button>
       <button
@@ -49,7 +52,7 @@ export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
         )}
         onClick={() => setValue("fee", "default")}
       >
-        <div>Normal</div>
+        <div>{t("normal")}</div>
         <div className="text-nowrap">{TransactionFee.default} MINA</div>
       </button>
       <button
@@ -60,7 +63,7 @@ export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
         )}
         onClick={() => setValue("fee", "fast")}
       >
-        <div>Fast</div>
+        <div>{t("fast")}</div>
         <div className="text-nowrap">{TransactionFee.fast} MINA</div>
       </button>
     </div>

packages/features/src/components/from-to.tsx

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { AddressDropdown } from "./address-dropdown"
 
 type FromToProps = {
@@ -9,17 +10,18 @@ type FromToProps = {
 }
 
 export const FromTo = ({ tx }: FromToProps) => {
+  const { t } = useTranslation()
   return (
     <div className="card bg-secondary py-3 px-4 flex flex-row justify-between mt-1">
       <div className="flex flex-col">
-        <div className="text-[#7D7A9C]">From</div>
+        <div className="text-[#7D7A9C]">{t("from")}</div>
         <AddressDropdown publicKey={tx.from} className="before:ml-20" />
       </div>
       <div className="btn btn-circle btn-neutral text-mint">
         <ArrowRightIcon size={24} />
       </div>
       <div className="flex flex-col">
-        <div className="text-[#7D7A9C]">To</div>
+        <div className="text-[#7D7A9C]">{t("to")}</div>
         <AddressDropdown
           publicKey={tx.to}
           className="before:-ml-20"

packages/features/src/components/hash-dropdown.tsx

@@ -1,6 +1,7 @@
 import { useVault } from "@palladxyz/vault"
 import clsx from "clsx"
 import { CopyIcon, ExternalLinkIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
 type HashDropdownProps = {
@@ -9,6 +10,8 @@ type HashDropdownProps = {
 }
 
 export const HashDropdown = ({ hash, className }: HashDropdownProps) => {
+  const { t } = useTranslation()
+
   const currentNetworkInfo = useVault((state) => state.getCurrentNetworkInfo())
   const handleClick = () => {
     const elem = document.activeElement as HTMLLIElement
@@ -40,13 +43,13 @@ export const HashDropdown = ({ hash, className }: HashDropdownProps) => {
         <li onClick={handleClick}>
           <button type="button" onClick={copyHash} className="flex gap-2">
             <CopyIcon />
-            <span>Copy Hash</span>
+            <span>{t("copyHash")}</span>
           </button>
         </li>
         <li onClick={handleClick}>
           <button type="button" onClick={openInExplorer} className="flex gap-2">
             <ExternalLinkIcon />
-            <span>Open in Minascan</span>
+            <span>{t("openInMinascan")}</span>
           </button>
         </li>
       </ul>

packages/features/src/components/menu-drawer.tsx

@@ -2,11 +2,13 @@ import Logo from "@/common/assets/logo.svg?react"
 import MenuIcon from "@/common/assets/menu.svg?react"
 import { useVault } from "@palladxyz/vault"
 import { ChevronDownIcon, XIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { Link, useNavigate } from "react-router-dom"
 
 export const MenuDrawer = () => {
   const navigate = useNavigate()
   const currentNetworkName = useVault((state) => state.currentNetworkName)
+  const { t } = useTranslation()
   return (
     <div className="drawer drawer-end">
       <input id="menu-drawer" type="checkbox" className="drawer-toggle" />
@@ -64,39 +66,39 @@ export const MenuDrawer = () => {
               onClick={() => navigate("/")}
               data-testid="menu/activity"
             >
-              Dashboard
+              {t("dashboard")}
             </button>
             <button
               type="button"
               className="text-3xl text-left"
               onClick={() => navigate("/transactions")}
               data-testid="menu/activity"
             >
-              Activity
+              {t("activity")}
             </button>
             <button
               type="button"
               className="text-3xl text-left"
               onClick={() => navigate("/staking")}
               data-testid="menu/staking"
             >
-              Staking
+              {t("staking")}
             </button>
             <button
               type="button"
               className="text-3xl text-left"
               onClick={() => navigate("/contacts")}
               data-testid="menu/addressBook"
             >
-              Address Book
+              {t("adressBook")}
             </button>
             <button
               type="button"
               className="text-3xl text-left"
               onClick={() => navigate("/settings")}
               data-testid="menu/settings"
             >
-              Settings
+              {t("settings")}
             </button>
           </div>
         </div>