Add i18n to initial welcome screen

MutinyWallet · Jun 6, 2024 · 86cc3e1 · 86cc3e1
1 parent 26ab58c
commit 86cc3e1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/public/i18n/en.json b/public/i18n/en.json
@@ -760,6 +760,12 @@
     }
   },
   "setup": {
+    "initial": {
+      "welcome": "Welcome to the Mutiny!",
+      "new_wallet": "New Wallet",
+      "import_existing": "Import Existing",
+      "reporting": "Allow anonymous error reporting to help us improve the app. You can opt out at any time."
+    },
     "new_profile": {
       "description": "Mutiny makes payments social.",
       "title": "Create your profile"

diff --git a/src/routes/setup/Root.tsx b/src/routes/setup/Root.tsx
@@ -3,10 +3,12 @@ import { createEffect, createSignal } from "solid-js";
 
 import logo from "~/assets/mutiny-pixel-logo.png";
 import { Button, DefaultMain, NiceP } from "~/components";
+import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
 
 export function Setup() {
     const [_state, actions] = useMegaStore();
+    const i18n = useI18n();
 
     const [isCreatingNewWallet, setIsCreatingNewWallet] = createSignal(false);
     const [isDiagnosticReportingEnabled, setIsDiagnosticReportingEnabled] =
@@ -62,22 +64,22 @@ export function Setup() {
                         class="h-[50px] w-[172px]"
                         alt="Mutiny Plus logo"
                     />
-                    <NiceP>Welcome to the Mutiny!</NiceP>
+                    <NiceP>{i18n.t("setup.initial.welcome")}</NiceP>
                     <div class="h-4" />
                     <Button
                         layout="full"
                         onClick={handleNewWallet}
                         loading={isCreatingNewWallet()}
                     >
-                        New Wallet
+                        {i18n.t("setup.initial.new_wallet")}
                     </Button>
                     <Button
                         intent="text"
                         layout="full"
                         disabled={isCreatingNewWallet()}
                         onClick={() => navigate("/setup/restore")}
                     >
-                        Import Existing
+                        {i18n.t("setup.initial.import_existing")}
                     </Button>
                 </div>
                 <div class="flex-1" />
@@ -91,8 +93,7 @@ export function Setup() {
                             )
                         }
                     />
-                    Allow anonymous error reporting to help us improve the app.
-                    You can opt out at any time.
+                    {i18n.t("setup.initial.reporting")}
                 </p>
             </div>
         </DefaultMain>