enabling language button change

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

@@ -1,6 +1,6 @@
 import "i18next"
 import resources from "./resources"
-const { ns1, ns2 } = resources
+const { ns1, ns2, ns3 } = resources
 
 declare module "i18next" {
   interface CustomTypeOptions {

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

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

packages/features/src/i18n/index.ts

@@ -2,25 +2,27 @@ import i18next from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
 import { initReactI18next } from "react-i18next"
 import ns1 from "./locales/en/en.json"
+import ns3 from "./locales/es/es.json"
 import ns2 from "./locales/tr/tr.json"
 
-const defaultNS = "ns1"
-
 const resources = {
   en: {
     ns1,
   },
   tr: {
     ns2,
   },
+  es: {
+    ns3,
+  },
 }
 
 i18next
-  .use(LanguageDetector)
   .use(initReactI18next)
+  .use(LanguageDetector)
   .init({
-    debug: false,
-    fallbackLng: ["en", "tr"],
-    resources: resources,
-    defaultNS,
+    debug: true,
+    preload: ["ns1", "ns2", "ns3"],
+    fallbackNS: ["ns1", "ns2", "ns3"],
+    resources,
   })

packages/features/src/i18n/locales/en/en.json

@@ -147,5 +147,10 @@
     "deny": "Deny",
     "sign": "Sign",
     "reject": "Reject"
+  },
+  "labels": {
+    "settings": "Settings",
+    "display": "Display",
+    "language": "Language"
   }
 }

packages/features/src/i18n/locales/es/es.json

@@ -0,0 +1,156 @@
+{
+  "addressBook": {
+    "contactName": "Nombre del contacto",
+    "receiverAddress": "Dirección del destinatario",
+    "createContact": "Crear contacto",
+    "addressBook": "Libreta de direcciones",
+    "addNewContact": "Añadir nuevo contacto",
+    "newContact": "Nuevo contacto",
+    "addContact": "Añadir contacto"
+  },
+  "components": {
+    "copyAddress": "Copiar dirección",
+    "openInMinascan": "Abrir en Minascan",
+    "transactionFee": "Tarifa de transacción:",
+    "from": "Desde",
+    "to": "Hasta",
+    "copyHash": "Copiar hash",
+    "dashboard": "Panel de control",
+    "activity": "Actividad",
+    "staking": "Staking",
+    "settings": "Configuración",
+    "adressBook": "Libreta de direcciónes"
+  },
+  "error": {
+    "errorHappend": "Ha sucedido un error.",
+    "checkServiceStatus": "Verificar el estado de los servicios.",
+    "tryAgain": "Intentar de nuevo",
+    "sendReport": "Enviar informe"
+  },
+  "lock": {
+    "unlock": "Desbloquear",
+    "spendingPassword": "Contraseña"
+  },
+  "notFound": {
+    "couldntFindPage": "Lo sentimos, pero no pudimos encontrar esta página",
+    "goToDashboard": "Ir al panel de control"
+  },
+  "onboarding": {
+    "confirm": "Confirmar",
+    "youreAlone": "Asegúrese de estar solo al hacer esto",
+    "screenNotRecording": "Confirme que su pantalla no se está grabando y que nadie más esté mirando actualmente.",
+    "termService": "Acepto los Términos de servicio.",
+    "next": "Siguiente",
+    "slow": "Lento",
+    "normal": "Normal",
+    "fast": "Rápido",
+    "walletName": "Nombre de la billetera",
+    "password": "Contraseña",
+    "yourPassword": "Tu contraseña es...",
+    "savedIt": "La guardé",
+    "wordNumber": "Número de palabra",
+    "keepThisSafe": "Guarda esto en un lugar seguro, nunca lo compartas con nadie",
+    "confirmSavedSeed": "Confirma que guardaste la semilla escribiendo esta palabra aleatoria",
+    "backedUp": "Hice una copia de seguridad de la frase semilla y reconozco que no se me mostrará de nuevo",
+    "enter12Word": "Ingresa tu frase semilla de 12 palabras en el orden correcto en las entradas a continuación",
+    "yourGateway": "Tu puerta de entrada al Minaverse.",
+    "goToDashboard": "Ir al Tablero",
+    "allDone": "¡Listo!",
+    "followUs": "Síguenos para estar al día con las actualizaciones y las comunicaciones"
+  },
+  "receive": {
+    "copyClipboard": "Copiar al portapapeles",
+    "yourAddress": "Tu dirección",
+    "comingSoon": "¡Próximamente!"
+  },
+  "send": {
+    "send": "Enviar",
+    "advanced": "Avanzado",
+    "optional": "opcional",
+    "next": "Siguiente",
+    "summary": "Resumen",
+    "amount": "Monto",
+    "fee": "Tarifa",
+    "total": "Total",
+    "close": "Cerrar"
+  },
+  "settings": {
+    "send": "Enviar",
+    "settings": "Configuración",
+    "darkMode": "Modo oscuro",
+    "sharedData": "Compartir datos",
+    "faq": "Preguntas frecuentes",
+    "support": "Soporte",
+    "termOfServices": "Condiciones del servicio",
+    "version": "Versión",
+    "buyUsACoffee": "¡Invítanos a un café!",
+    "logOut": "Cerrar sesión",
+    "needHelp": "¿Necesitas ayuda?",
+    "contactSupport": "Contacta con el soporte",
+    "anomymousData": "Solo datos anónimos",
+    "currency": "Moneda",
+    "language": "Idioma",
+    "wallet": "Billetera",
+    "display": "Mostrar",
+    "privacy": "Privacidad",
+    "about": "Acerca de",
+    "zkapps": "ZkApps autorizadas"
+  },
+  "staking": {
+    "staking": "Staking",
+    "next": "Siguiente",
+    "delegators": "Delegadores",
+    "selectValidator": "Seleccióne un validador",
+    "findValidator": "Encuentre un validador",
+    "edit": "Editar",
+    "enjoySeamless": "Disfrute de un staking sin inconvenientes y comience a ganar recompensas",
+    "stake": "Stake",
+    "blockRewards": "Bloquear recompensas",
+    "lastReward": "Última recompensa",
+    "avgReward": "Prom. recompensa",
+    "totalReward": "Recompensa total"
+  },
+  "transactions": {
+    "received": "Recibido",
+    "receive": "Recibido",
+    "sent": "Enviado",
+    "portfolio": "Billetera",
+    "staked": "Staked",
+    "amount": "Monto",
+    "transactionDetail": "Detalle de la transacción",
+    "type": "Tipo",
+    "dateTime": "Fecha y hora",
+    "kind": "Tipo",
+    "activity": "Actividad",
+    "filters": "Filtros",
+    "pendingTransactions": "Hay transacciónes pendientes.",
+    "preview": "Vista previa",
+    "nothingHere": "Aún no hay nada aquí :",
+    "detailsGetStarted": "Aquí encontrará detalles sobre sus transacciones. ¡Agrega fondos a tu billetera para comenzar!"
+  },
+  "wallet": {
+    "openBeta": "Versión beta abierta",
+    "onlyWorksForDevnet": "Solo funciona para Devnet antes del lanzamiento de Mainnet",
+    "available": "Disponible",
+    "networks": "Redes",
+    "use": "Usar",
+    "recent": "Reciente",
+    "portfolioValue": "Valor de la Billetera",
+    "transactions": "Transacciones",
+    "send": "Enviar",
+    "receive": "Recibir",
+    "seeAll": "Ver todo",
+    "noTransactionsYet": "Aún no hay transacciones"
+  },
+  "webConnector": {
+    "approve": "Aprobar",
+    "deny": "Denegar",
+    "sign": "Firmar",
+    "reject": "Rechazar"
+  },
+  "labels": {
+    "settings": "Configuración",
+    "display": "Mostrar",
+    "language": "Idioma"
+  }
+}

packages/features/src/i18n/locales/tr/tr.json

@@ -147,5 +147,10 @@
     "deny": "Reddet",
     "sign": "İmzala",
     "reject": "Reddet"
+  },
+  "labels": {
+    "settings": "Ayarlar",
+    "display": "Görüntüleme",
+    "language": "Dil"
   }
 }

packages/features/src/settings/views/display.tsx

@@ -7,33 +7,49 @@ import { Link } from "react-router-dom"
 const ButtonWrapperStyles =
   "pl-6 pr-4 py-6 flex items-center justify-between rounded-2xl bg-secondary"
 
-const Links = [
-  {
-    label: "Currency",
-    value: "$USD",
-    href: "/settings/display/currency",
-  },
-  {
-    label: "Language",
-    value: "ENG",
-    href: "/settings/display/language",
-  },
-]
-
 type DisplayViewProps = {
   onCloseClicked: () => void
 }
 
+interface ILang {
+  [key: string]: string
+}
+
+const langs: ILang = {
+  en: "ENG",
+  tr: "TUR",
+  es: "SPA",
+  fr: "FRA",
+  pt: "POR",
+  zh: "CHN",
+}
+
 export const DisplayView = ({ onCloseClicked }: DisplayViewProps) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
+
+  const Links = [
+    {
+      label: "Currency",
+      value: "$USD",
+      href: "/settings/display/currency",
+    },
+    {
+      label: "Language",
+      value: langs[i18n.language],
+      href: "/settings/display/language",
+    },
+  ]
   const getLabel = (label: string) => {
     return label === "Currency"
       ? t("settings.currency")
       : t("settings.language")
   }
   return (
     <AppLayout>
-      <SettingsPageLayout title="Display" onCloseClicked={onCloseClicked}>
+      <SettingsPageLayout
+        title={t("labels.display")}
+        onCloseClicked={onCloseClicked}
+      >
         <div className="space-y-2">
           <div className={ButtonWrapperStyles}>
             <p>{t("settings.darkMode")}</p>

packages/features/src/settings/views/language.tsx

@@ -3,39 +3,53 @@ import { SettingsPageLayout } from "@/components/settings-page-layout"
 import clsx from "clsx"
 import { Check } from "lucide-react"
 import { useState } from "react"
+import { useTranslation } from "react-i18next"
 
-const Languages = [
-  "English",
-  "French",
-  "Spanish",
-  "Turkish",
-  "Portugese",
-  "Chinese",
-]
+interface ILanguages {
+  nativeName: string
+}
+
+const Languages: Record<string, ILanguages> = {
+  en: { nativeName: "English" },
+  //fr: { nativeName: "French" },
+  es: { nativeName: "Spanish" },
+  tr: { nativeName: "Turkish" },
+  //pt: { nativeName: "Portugese" },
+  //zh: { nativeName: "Chinese" },
+}
 
 type LanguageViewProps = {
   onCloseClicked: () => void
 }
 
 export const LanguageView = ({ onCloseClicked }: LanguageViewProps) => {
-  const [selected, setSelected] = useState(Languages[0])
+  const { t, i18n } = useTranslation()
+  const [selected, setSelected] = useState(i18n.language)
+
   return (
     <AppLayout>
-      <SettingsPageLayout title="Language" onCloseClicked={onCloseClicked}>
+      <SettingsPageLayout
+        title={t("labels.language")}
+        onCloseClicked={onCloseClicked}
+      >
         <div className="space-y-2">
-          {Languages.map((language) => {
-            const active = language === selected
+          {Object.keys(Languages).map((lng) => {
+            const active = lng === selected
             return (
               <button
-                key={language}
+                key={lng}
                 type="button"
                 className={clsx(
                   "w-full pl-6 pr-4 py-4 flex items-center justify-between rounded-2xl hover:bg-secondary",
                   active && "bg-secondary",
                 )}
-                onClick={() => setSelected(language)}
+                onClick={() => {
+                  i18n.changeLanguage(lng)
+                  setSelected(lng)
+                }}
+                disabled={i18n.resolvedLanguage === lng}
               >
-                <p>{language}</p>
+                <p>{Languages[lng].nativeName}</p>
                 {active && (
                   <Check width={24} height={24} className="text-[#F6C177]" />
                 )}
@@ -46,4 +60,4 @@ export const LanguageView = ({ onCloseClicked }: LanguageViewProps) => {
       </SettingsPageLayout>
     </AppLayout>
   )
-}
+}