feat: connect to btcpay via core lightning

src/app/router/connectorRoutes.tsx

@@ -1,5 +1,4 @@
 import ChooseConnector from "@screens/connectors/ChooseConnector";
-import ConnectBtcpay from "@screens/connectors/ConnectBtcpay";
 import ConnectCitadel from "@screens/connectors/ConnectCitadel";
 import ConnectEclair from "@screens/connectors/ConnectEclair";
 import ConnectGaloy, { galoyUrls } from "@screens/connectors/ConnectGaloy";
@@ -14,6 +13,8 @@ import ConnectUmbrel from "@screens/connectors/ConnectUmbrel";
 import { Route } from "react-router-dom";
 import i18n from "~/i18n/i18nConfig";
 
+import ConnectBtcpayCommando from "~/app/screens/connectors/ConnectBtcpayCommando";
+import ConnectBtcpayLND from "~/app/screens/connectors/ConnectBtcpayLND";
 import ConnectNWC from "~/app/screens/connectors/ConnectNWC";
 import ConnectVoltage from "~/app/screens/connectors/ConnectVoltage";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
@@ -81,6 +82,18 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.umbrel_lightning_node.title"),
     logo: lightning_node,
   },
+  "btcpay-lnd": {
+    path: "lnd",
+    element: <ConnectBtcpayLND />,
+    title: i18n.t("translation:choose_connector.lnd.title"),
+    logo: lnd,
+  },
+  "btcpay-commando": {
+    path: "commando",
+    element: <ConnectBtcpayCommando />,
+    title: i18n.t("translation:choose_connector.commando.title"),
+    logo: core_ln,
+  },
   "raspiblitz-lnd": {
     path: "lnd",
     element: <ConnectRaspiBlitz />,
@@ -153,12 +166,6 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.bitcoin_jungle.title"),
     logo: galoyBitcoinJungle,
   },
-  btcpay: {
-    path: "btcpay",
-    element: <ConnectBtcpay />,
-    title: i18n.t("translation:choose_connector.btcpay.title"),
-    logo: btcpay,
-  },
   voltage: {
     path: "voltage",
     element: <ConnectVoltage />,
@@ -203,6 +210,10 @@ const distributionMap: { [key: string]: { logo: string; children: Route[] } } =
         connectorMap["lnbits"],
       ],
     },
+    btcpay: {
+      logo: btcpay,
+      children: [connectorMap["btcpay-lnd"], connectorMap["btcpay-commando"]],
+    },
     umbrel: {
       logo: umbrel,
       children: [
@@ -250,7 +261,7 @@ function getConnectorRoutes(): ConnectorRoute[] {
     connectorMap["lnbits"],
     connectorMap["lnd-hub-go"],
     connectorMap["eclair"],
-    connectorMap["btcpay"],
+    getDistribution("btcpay"),
     connectorMap["voltage"],
     connectorMap[galoyPaths.blink],
     connectorMap[galoyPaths.bitcoinJungle],

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

@@ -0,0 +1,144 @@
+import CompanionDownloadInfo from "@components/CompanionDownloadInfo";
+import ConnectorForm from "@components/ConnectorForm";
+import TextField from "@components/form/TextField";
+import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
+import fetchAdapter from "@vespaiach/axios-fetch-adapter";
+import axios from "axios";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import toast from "~/app/components/Toast";
+import msg from "~/common/lib/msg";
+
+import logo from "/static/assets/icons/btcpay.svg";
+
+const initialFormData = {
+  url: "",
+  macaroon: "",
+  name: "",
+};
+
+export default function ConnectBtcpayCommando() {
+  const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.btcpay_commando",
+  });
+  const [formData, setFormData] = useState(initialFormData);
+  const [loading, setLoading] = useState(false);
+  const [hasTorSupport, setHasTorSupport] = useState(false);
+
+  function getConfigUrl(data: string) {
+    const configUrl = data.trim().replace("config=", "");
+    try {
+      return new URL(configUrl);
+    } catch (e) {
+      return null;
+    }
+  }
+  async function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const configUrl = getConfigUrl(event.target.value);
+    if (!configUrl) {
+      return;
+    }
+    const host = configUrl.host;
+    try {
+      const response = await axios.get<{
+        configurations: [{ uri: string; adminMacaroon: string }];
+      }>(configUrl.toString(), { adapter: fetchAdapter });
+
+      if (response.data.configurations[0].uri) {
+        setFormData({
+          url: response.data.configurations[0].uri,
+          macaroon: response.data.configurations[0].adminMacaroon,
+          name: host,
+        });
+      }
+    } catch (e) {
+      console.error(e);
+      toast.error(t("errors.connection_failed"));
+    }
+  }
+
+  function getConnectorType() {
+    if (formData.url.match(/\.onion/i) && !hasTorSupport) {
+      return "nativelnd";
+    }
+    // default to LND
+    return "lnd";
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    const { url, macaroon, name } = formData;
+    const account = {
+      name: name || "LND",
+      config: {
+        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 === "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) {
+          await msg.request("selectAccount", {
+            id: addResult.accountId,
+          });
+          navigate("/test-connection");
+        }
+      } else {
+        toast.error(
+          <ConnectionErrorToast message={validation.error as string} />
+        );
+      }
+    } catch (e) {
+      console.error(e);
+      let message = "";
+      if (e instanceof Error) {
+        message += `${e.message}`;
+      }
+      toast.error(<ConnectionErrorToast message={message} />);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <ConnectorForm
+      title={t("page.title")}
+      description={t("page.instructions")}
+      logo={logo}
+      submitLoading={loading}
+      submitDisabled={formData.url === "" || formData.macaroon === ""}
+      onSubmit={handleSubmit}
+    >
+      <TextField
+        id="btcpay-config"
+        label={t("config.label")}
+        placeholder={t("config.placeholder")}
+        onChange={handleChange}
+        required
+        autoFocus={true}
+      />
+      {formData.url.match(/\.onion/i) && (
+        <div className="mt-6">
+          <CompanionDownloadInfo
+            hasTorCallback={(hasTor: boolean) => {
+              setHasTorSupport(hasTor);
+            }}
+          />
+        </div>
+      )}
+    </ConnectorForm>
+  );
+}

src/app/screens/connectors/ConnectBtcpay/index.tsx → src/app/screens/connectors/ConnectBtcpayLND/index.tsx

@@ -18,10 +18,10 @@ const initialFormData = {
   name: "",
 };
 
-export default function ConnectBtcpay() {
+export default function ConnectBtcpayLND() {
   const navigate = useNavigate();
   const { t } = useTranslation("translation", {
-    keyPrefix: "choose_connector.btcpay",
+    keyPrefix: "choose_connector.btcpay_lnd",
   });
   const [formData, setFormData] = useState(initialFormData);
   const [loading, setLoading] = useState(false);

src/i18n/locales/en/translation.json

@@ -258,10 +258,25 @@
         }
       },
       "btcpay": {
-        "title": "BTCPay Server",
+        "title": "BTCPay Server"
+      },
+      "btcpay_lnd": {
+        "page": {
+          "title": "Connect to BTCPay LND",
+          "instructions": "Navigate to your BTCPayServer and log in as an admin. Go to Server Settings > Services > LND REST - See information. Then Click \"See QR Code information\" and copy the QR Code data. Paste it below:"
+        },
+        "config": {
+          "label": "Config data",
+          "placeholder": "config=https://your-btc-pay.org/lnd-config/212121/lnd.co"
+        },
+        "errors": {
+          "connection_failed": "Connection failed. Is the BTCPay connection URL correct and accessible?"
+        }
+      },
+      "btcpay_commando": {
         "page": {
-          "title": "Connect to your BTCPay LND node",
-          "instructions": "Navigate to your BTCPayServer and log in as an admin. Go to Server Settings > Services > LND Rest - See information. Then Click \"See QR Code information\" and copy the QR Code data. Paste it below:"
+          "title": "Connect to BTCPay CLN",
+          "instructions": "Navigate to your BTCPayServer and log in as an admin. Go to Server Settings > Services > C- Lightning REST - See information. Then Click \"See QR Code information\" and copy the QR Code data. Paste it below:"
         },
         "config": {
           "label": "Config data",