Merge pull request #1532 from getAlby/task-i18n-connectors

chore(i18n): translate missing connectors (part:1)
getAlby · Sep 28, 2022 · e0e40b5 · e0e40b5
2 parents 73bd1e5 + d896c52
commit e0e40b5
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 69 deletions.
diff --git a/src/app/screens/connectors/ConnectCitadel/index.tsx b/src/app/screens/connectors/ConnectCitadel/index.tsx
@@ -7,16 +7,20 @@ import ConnectorForm from "@components/ConnectorForm";
 import TextField from "@components/form/TextField";
 import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
 import { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import utils from "~/common/lib/utils";
 
 export default function ConnectCitadel() {
   const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.citadel",
+  });
   const [passwordView, setPasswordView] = useState(false);
   const [formData, setFormData] = useState({
     password: "",
-    url: "http://citadel.local",
+    url: "",
   });
   const [loading, setLoading] = useState(false);
   const [hasTorSupport, setHasTorSupport] = useState(false);
@@ -89,21 +93,24 @@ export default function ConnectCitadel() {
     <ConnectorForm
       title={
         <h1 className="mb-6 text-2xl font-bold dark:text-white">
-          Connect to your{" "}
-          <a className="underline" href="https://runcitadel.space/">
-            Citadel
-          </a>{" "}
-          Node
+          <Trans
+            i18nKey={"page.title"}
+            t={t}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <a className="underline" href="https://runcitadel.space/"></a>,
+            ]}
+          />
         </h1>
       }
-      description="This currently doesn't work if 2FA is enabled."
+      description={t("page.instructions")}
       submitLoading={loading}
       submitDisabled={formData.password === "" || formData.url === ""}
       onSubmit={handleSubmit}
     >
       <div className="mb-6">
         <TextField
-          label="Password"
+          label={t("password.label")}
           id="password"
           type={passwordView ? "text" : "password"}
           required
@@ -125,9 +132,9 @@ export default function ConnectCitadel() {
       </div>
       <div className="mb-6">
         <TextField
-          label="Citadel URL"
+          label={t("url.label")}
           id="url"
-          placeholder="citadel.local"
+          placeholder={t("url.placeholder")}
           type="text"
           value={formData.url}
           required

diff --git a/src/app/screens/connectors/ConnectEclair/index.tsx b/src/app/screens/connectors/ConnectEclair/index.tsx
@@ -6,12 +6,16 @@ import ConnectorForm from "@components/ConnectorForm";
 import TextField from "@components/form/TextField";
 import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
 import { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import utils from "~/common/lib/utils";
 
 export default function ConnectEclair() {
   const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.eclair",
+  });
   const [formData, setFormData] = useState({
     password: "",
     url: "",
@@ -70,20 +74,28 @@ export default function ConnectEclair() {
     <ConnectorForm
       title={
         <h1 className="mb-6 text-2xl font-bold dark:text-white">
-          Connect to{" "}
-          <a className="underline" href="https://github.com/ACINQ/eclair">
-            Eclair
-          </a>
+          <Trans
+            i18nKey={"page.title"}
+            t={t}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <a
+                className="underline"
+                href="https://github.com/ACINQ/eclair"
+              ></a>,
+            ]}
+          />
         </h1>
       }
+      description={t("page.instructions")}
       submitLoading={loading}
       submitDisabled={formData.password === "" || formData.url === ""}
       onSubmit={handleSubmit}
     >
       <div className="mb-6">
         <TextField
           id="password"
-          label="Eclair Password"
+          label={t("password.label")}
           type={passwordView ? "text" : "password"}
           required
           onChange={handleChange}
@@ -104,9 +116,9 @@ export default function ConnectEclair() {
       </div>
       <TextField
         id="url"
-        label="Eclair URL"
+        label={t("url.label")}
         type="text"
-        placeholder="http://localhost:8080"
+        placeholder={t("url.placeholder")}
         value={formData.url}
         required
         onChange={handleChange}

diff --git a/src/app/screens/connectors/ConnectLnbits/index.tsx b/src/app/screens/connectors/ConnectLnbits/index.tsx
@@ -3,12 +3,16 @@ import ConnectorForm from "@components/ConnectorForm";
 import TextField from "@components/form/TextField";
 import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
 import { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import utils from "~/common/lib/utils";
 
 export default function ConnectLnbits() {
   const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.lnbits",
+  });
   const [formData, setFormData] = useState({
     adminkey: "",
     url: "https://legend.lnbits.com",
@@ -36,7 +40,7 @@ export default function ConnectLnbits() {
     setLoading(true);
     const { adminkey, url } = formData;
     const account = {
-      name: "LNBits",
+      name: "LNbits",
       config: {
         adminkey,
         url,
@@ -69,8 +73,7 @@ export default function ConnectLnbits() {
       }
     } catch (e) {
       console.error(e);
-      let message =
-        "Connection failed. Do you have the correct URL and Admin Key?";
+      let message = t("errors.connection_failed");
       if (e instanceof Error) {
         message += `\n\n${e.message}`;
       }
@@ -83,20 +86,26 @@ export default function ConnectLnbits() {
     <ConnectorForm
       title={
         <h1 className="mb-6 text-2xl font-bold dark:text-white">
-          Connect to{" "}
-          <a className="underline" href="https://lnbits.com/">
-            LNbits
-          </a>
+          <Trans
+            i18nKey={"page.title"}
+            t={t}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <a className="underline" href="https://lnbits.com/"></a>,
+            ]}
+          />
         </h1>
       }
+      description={t("page.instructions")}
       submitLoading={loading}
       submitDisabled={formData.adminkey === "" || formData.url === ""}
       onSubmit={handleSubmit}
     >
       <div className="mb-6">
         <TextField
           id="adminkey"
-          label="LNbits Admin Key"
+          label={t("admin_key.label")}
+          placeholder={t("admin_key.placeholder")}
           type="text"
           required
           onChange={handleChange}
@@ -105,7 +114,7 @@ export default function ConnectLnbits() {
       <div className="mb-6">
         <TextField
           id="url"
-          label="LNbits URL"
+          label={t("url.label")}
           type="text"
           value={formData.url}
           required

diff --git a/src/app/screens/connectors/ConnectMyNode/index.tsx b/src/app/screens/connectors/ConnectMyNode/index.tsx
@@ -3,6 +3,7 @@ import ConnectorForm from "@components/ConnectorForm";
 import TextField from "@components/form/TextField";
 import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
 import { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import utils from "~/common/lib/utils";
@@ -14,6 +15,9 @@ const initialFormData = {
 
 export default function ConnectMyNode() {
   const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.mynode",
+  });
   const [formData, setFormData] = useState(initialFormData);
   const [loading, setLoading] = useState(false);
   const [hasTorSupport, setHasTorSupport] = useState(false);
@@ -99,24 +103,23 @@ export default function ConnectMyNode() {
     <ConnectorForm
       title={
         <h1 className="mb-6 text-2xl font-bold dark:text-white">
-          Connect to your{" "}
-          <a className="underline" href="https://mynodebtc.com/">
-            myNode
-          </a>
+          <Trans
+            i18nKey={"page.title"}
+            t={t}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <a className="underline" href="https://mynodebtc.com/"></a>,
+            ]}
+          />
         </h1>
       }
       description={
-        <p>
-          On your myNode homepage click on the <strong>Wallet</strong> button
-          for your <strong>Lightning</strong> service.
-          <br />
-          Now click on the <strong>Pair Wallet</strong> button under the{" "}
-          <strong>Status</strong> tab. Enter your password when prompted. <br />
-          Select the dropdown menu and choose a pairing option. Depending on
-          your setup you can either use the{" "}
-          <strong>Lightning (REST + Local IP)</strong> connection or the{" "}
-          <b>Lightning (REST + Tor)</b> connection.
-        </p>
+        <Trans
+          i18nKey={"page.instructions"}
+          t={t}
+          // eslint-disable-next-line react/jsx-key
+          components={[<strong></strong>, <br />]}
+        />
       }
       submitLoading={loading}
       submitDisabled={formData.url === "" || formData.macaroon === ""}
@@ -126,8 +129,8 @@ export default function ConnectMyNode() {
       <div className="mb-6">
         <TextField
           id="lndconnect"
-          label="lndconnect REST URL"
-          placeholder="lndconnect://yournode:8080?..."
+          label={t("rest_url.label")}
+          placeholder={t("rest_url.placeholder")}
           onChange={handleLndconnectUrl}
           required
         />

diff --git a/src/app/screens/connectors/ConnectUmbrel/index.tsx b/src/app/screens/connectors/ConnectUmbrel/index.tsx
@@ -3,6 +3,7 @@ import ConnectorForm from "@components/ConnectorForm";
 import TextField from "@components/form/TextField";
 import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
 import { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import utils from "~/common/lib/utils";
@@ -14,6 +15,9 @@ const initialFormData = {
 
 export default function ConnectUmbrel() {
   const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.umbrel",
+  });
   const [formData, setFormData] = useState(initialFormData);
   const [loading, setLoading] = useState(false);
   const [hasTorSupport, setHasTorSupport] = useState(false);
@@ -86,11 +90,11 @@ export default function ConnectUmbrel() {
       }
     } catch (e) {
       console.error(e);
-      let message = "Connection failed. Are your Umbrel credentials correct?";
+      let message = "";
       if (e instanceof Error) {
-        message += `\n\n${e.message}`;
+        message += `${e.message}`;
       }
-      toast.error(message);
+      toast.error(<ConnectionErrorToast message={message} />);
     }
     setLoading(false);
   }
@@ -99,21 +103,23 @@ export default function ConnectUmbrel() {
     <ConnectorForm
       title={
         <h1 className="mb-6 text-2xl font-bold dark:text-white">
-          Connect to your{" "}
-          <a className="underline" href="https://umbrel.com/">
-            Umbrel
-          </a>{" "}
-          node
+          <Trans
+            i18nKey={"page.title"}
+            t={t}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <a className="underline" href="https://umbrel.com/"></a>,
+            ]}
+          />
         </h1>
       }
       description={
-        <p>
-          In your Umbrel dashboard go to <strong>Connect Wallet</strong>.<br />
-          Select <strong>lndconnect REST</strong> and copy the{" "}
-          <strong>lndconnect URL</strong>. (Depending on your setup you can
-          either use the <em>local</em> connection or the <em>Tor</em>{" "}
-          connection.)
-        </p>
+        <Trans
+          i18nKey={"page.instructions"}
+          t={t}
+          // eslint-disable-next-line react/jsx-key
+          components={[<strong></strong>]}
+        />
       }
       submitLoading={loading}
       submitDisabled={formData.url === "" || formData.macaroon === ""}
@@ -122,8 +128,8 @@ export default function ConnectUmbrel() {
     >
       <TextField
         id="lndconnect"
-        label="lndconnect REST URL"
-        placeholder="lndconnect://yournode:8080?..."
+        label={t("rest_url.label")}
+        placeholder={t("rest_url.placeholder")}
         onChange={handleLndconnectUrl}
         required
       />