feat: replace Citadel with Nirvati

Citadel 0.3 is deprecated and Citadel will soon be turned into an app on the new Nirvati platform.

This replaces the Citadel connect instructions with some for Nirvati.

Right now, Nirvati supports Alby Hub, LNBits and LNC.
I've commented out the others because we'll soon support these.

src/app/router/connectorRoutes.tsx

@@ -21,7 +21,7 @@ import ConnectVoltage from "~/app/screens/connectors/ConnectVoltage";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
 import albyhub from "/static/assets/icons/albyhub.png";
 import btcpay from "/static/assets/icons/btcpay.svg";
-import citadel from "/static/assets/icons/citadel.png";
+import citadel from "/static/assets/icons/citadel.svg";
 import core_ln from "/static/assets/icons/core_ln.svg";
 import eclair from "/static/assets/icons/eclair.jpg";
 import galoyBitcoinJungle from "/static/assets/icons/galoy_bitcoin_jungle.png";
@@ -33,6 +33,7 @@ import lnbits from "/static/assets/icons/lnbits.png";
 import lnd from "/static/assets/icons/lnd.png";
 import lndhubGo from "/static/assets/icons/lndhub_go.png";
 import mynode from "/static/assets/icons/mynode.png";
+import nirvati from "/static/assets/icons/nirvati.svg";
 import nwc from "/static/assets/icons/nwc.svg";
 import raspiblitz from "/static/assets/icons/raspiblitz.png";
 import startos from "/static/assets/icons/startos.png";
@@ -204,12 +205,12 @@ function getDistribution(key: string): ConnectorRoute {
 
 const distributionMap: { [key: string]: { logo: string; children: Route[] } } =
   {
-    citadel: {
-      logo: citadel,
+    nirvati: {
+      logo: nirvati,
       children: [
-        connectorMap["citadel"],
+        //connectorMap["citadel"],
         connectorMap["lnc"],
-        connectorMap["commando"],
+        //connectorMap["commando"],
         connectorMap["lnbits"],
       ],
     },
@@ -264,7 +265,7 @@ function getConnectorRoutes(): ConnectorRoute[] {
     getDistribution("startos"),
     getDistribution("raspiblitz"),
     getDistribution("mynode"),
-    getDistribution("citadel"),
+    getDistribution("nirvati"),
     connectorMap["btcpay"],
     connectorMap["voltage"],
     connectorMap[galoyPaths.blink],

src/app/screens/connectors/ConnectCitadel/index.tsx

@@ -8,61 +8,74 @@ import { useNavigate } from "react-router-dom";
 import PasswordViewAdornment from "~/app/components/PasswordViewAdornment";
 import toast from "~/app/components/Toast";
 import msg from "~/common/lib/msg";
-import logo from "/static/assets/icons/citadel.png";
+import utils from "~/common/lib/utils";
+import logo from "/static/assets/icons/citadel.svg";
+
+const initialFormData = {
+  url: "",
+  macaroon: "",
+};
 
 export default function ConnectCitadel() {
   const navigate = useNavigate();
   const { t } = useTranslation("translation", {
     keyPrefix: "choose_connector.citadel",
   });
-  const [passwordViewVisible, setPasswordViewVisible] = useState(false);
-  const [formData, setFormData] = useState({
-    password: "",
-    url: "",
-  });
+  const [formData, setFormData] = useState(initialFormData);
   const [loading, setLoading] = useState(false);
   const [hasTorSupport, setHasTorSupport] = useState(false);
+  const [lndconnectUrlVisible, setLndconnectUrlVisible] = useState(false);
 
-  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-    setFormData({
-      ...formData,
-      [event.target.name]: event.target.value.trim(),
-    });
+  function handleLndconnectUrl(event: React.ChangeEvent<HTMLInputElement>) {
+    try {
+      const lndconnectUrl = event.target.value.trim();
+      let lndconnect = new URL(lndconnectUrl);
+      lndconnect.protocol = "http:";
+      lndconnect = new URL(lndconnect.toString());
+      const url = `https://${lndconnect.host}${lndconnect.pathname}`;
+      let macaroon = lndconnect.searchParams.get("macaroon") || "";
+      macaroon = utils.urlSafeBase64ToHex(macaroon);
+      // const cert = lndconnect.searchParams.get("cert"); // TODO: handle LND certs with the native connector
+      setFormData({
+        ...formData,
+        url,
+        macaroon,
+      });
+    } catch (e) {
+      console.error("invalid lndconnect string", e);
+    }
   }
 
   function getConnectorType() {
     if (formData.url.match(/\.onion/i) && !hasTorSupport) {
-      return "nativecitadel";
+      return "nativelnd";
     }
-    return "citadel";
+    // default to LND
+    return "lnd";
   }
 
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setLoading(true);
-    const { password, url } = formData;
-    /** The URL with an http:// in front if the protocol is missing */
-    const fullUrl =
-      url.startsWith("http://") || url.startsWith("https://")
-        ? url
-        : `http://${url}`;
+    const { url, macaroon } = formData;
     const account = {
       name: "Citadel",
       config: {
-        url: fullUrl,
-        password,
+        macaroon,
+        url,
       },
       connector: getConnectorType(),
     };
 
     try {
       let validation;
       // TODO: for native connectors we currently skip the validation because it is too slow (booting up Tor etc.)
-      if (account.connector === "nativecitadel") {
+      if (account.connector === "nativelnd") {
         validation = { valid: true, error: "" };
       } else {
         validation = await msg.request("validateAccount", account);
       }
+
       if (validation.valid) {
         const addResult = await msg.request("addAccount", account);
         if (addResult.accountId) {
@@ -73,7 +86,10 @@ export default function ConnectCitadel() {
         }
       } else {
         toast.error(
-          <ConnectionErrorToast message={validation.error as string} />
+          <ConnectionErrorToast
+            message={validation.error as string}
+            link={`${formData.url}/v1/getinfo`}
+          />
         );
       }
     } catch (e) {
@@ -101,38 +117,39 @@ export default function ConnectCitadel() {
           />
         </h1>
       }
-      description={t("page.instructions")}
+      description={
+        <Trans
+          i18nKey={"page.instructions"}
+          t={t}
+          // eslint-disable-next-line react/jsx-key
+          components={[<strong></strong>, <br />]}
+        />
+      }
       logo={logo}
       submitLoading={loading}
-      submitDisabled={formData.password === "" || formData.url === ""}
+      submitDisabled={formData.url === "" || formData.macaroon === ""}
       onSubmit={handleSubmit}
+      image="https://cdn.getalby-assets.com/connector-guides/citadel.svg"
     >
-      <div className="mb-6">
+      <div className="mt-6">
         <TextField
-          label={t("password.label")}
-          id="password"
+          id="lndconnect"
+          type={lndconnectUrlVisible ? "text" : "password"}
           autoComplete="new-password"
-          type={passwordViewVisible ? "text" : "password"}
-          autoFocus={true}
+          label={t("rest_url.label")}
+          placeholder={t("rest_url.placeholder")}
+          onChange={handleLndconnectUrl}
           required
-          onChange={handleChange}
+          autoFocus={true}
           endAdornment={
             <PasswordViewAdornment
               onChange={(passwordView) => {
-                setPasswordViewVisible(passwordView);
+                setLndconnectUrlVisible(passwordView);
               }}
             />
           }
         />
       </div>
-      <TextField
-        label={t("url.label")}
-        id="url"
-        placeholder={t("url.placeholder")}
-        value={formData.url}
-        required
-        onChange={handleChange}
-      />
       {formData.url.match(/\.onion/i) && (
         <div className="mt-6">
           <CompanionDownloadInfo

src/i18n/locales/en/translation.json

@@ -149,16 +149,16 @@
         "title": "Citadel",
         "page": {
           "title": "Connect to <0>Citadel</0> node",
-          "instructions": "This currently doesn't work if 2FA is enabled."
+          "instructions": "1. In the Citadel section of your Nirvati dashboard go to <0>Connect wallet</0><1/>2. Select <0>Alby (Tor)</0> or <0>Alby (Local Network)</0> mode<1/>3. Copy the <0>lndconnect URL</0> and paste it below"
         },
-        "password": {
-          "label": "Citadel Password"
-        },
-        "url": {
-          "label": "Citadel URL",
-          "placeholder": "http://citadel.local"
+        "rest_url": {
+          "label": "lndconnect REST URL",
+          "placeholder": "lndconnect://yournode:8080?..."
         }
       },
+      "nirvati": {
+        "title": "Nirvati"
+      },
       "umbrel": {
         "title": "Umbrel",
         "page": {
@@ -366,8 +366,8 @@
       "umbrel": {
         "name": "Umbrel"
       },
-      "citadel": {
-        "name": "Citadel"
+      "nirvati": {
+        "name": "Nirvati"
       },
       "btcpay": {
         "name": "BTCPay"