diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx index 98ce63cfa7..af28bac715 100644 --- a/src/app/router/connectorRoutes.tsx +++ b/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], diff --git a/src/app/screens/connectors/ConnectCitadel/index.tsx b/src/app/screens/connectors/ConnectCitadel/index.tsx index eb0be4e6e8..ac32549738 100644 --- a/src/app/screens/connectors/ConnectCitadel/index.tsx +++ b/src/app/screens/connectors/ConnectCitadel/index.tsx @@ -8,49 +8,61 @@ 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) { - setFormData({ - ...formData, - [event.target.name]: event.target.value.trim(), - }); + function handleLndconnectUrl(event: React.ChangeEvent) { + 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) { 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(), }; @@ -58,11 +70,12 @@ export default function ConnectCitadel() { 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( - + ); } } catch (e) { @@ -101,38 +117,39 @@ export default function ConnectCitadel() { /> } - description={t("page.instructions")} + description={ + ,
]} + /> + } 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" > -
+
{ - setPasswordViewVisible(passwordView); + setLndconnectUrlVisible(passwordView); }} /> } />
- {formData.url.match(/\.onion/i) && (
Citadel 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<1/>2. Select <0>Alby (Tor) or <0>Alby (Local Network) mode<1/>3. Copy the <0>lndconnect URL 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" diff --git a/static/assets/icons/citadel.png b/static/assets/icons/citadel.png deleted file mode 100644 index 4768953a69..0000000000 Binary files a/static/assets/icons/citadel.png and /dev/null differ diff --git a/static/assets/icons/citadel.svg b/static/assets/icons/citadel.svg new file mode 100644 index 0000000000..53b43ebe58 --- /dev/null +++ b/static/assets/icons/citadel.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/assets/icons/nirvati.svg b/static/assets/icons/nirvati.svg new file mode 100644 index 0000000000..c7a6d61580 --- /dev/null +++ b/static/assets/icons/nirvati.svg @@ -0,0 +1 @@ +