feat: NWC connector 🤙

package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@bitcoinerlab/secp256k1": "^1.0.5",
-    "@getalby/sdk": "^3.1.0",
+    "@getalby/sdk": "^3.2.2",
     "@headlessui/react": "^1.7.16",
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
@@ -104,6 +104,7 @@
     "@types/webextension-polyfill": "^0.10.5",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
+    "@webbtc/webln-types": "^3.0.0",
     "autoprefixer": "^10.4.16",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",

src/app/router/connectorRoutes.tsx

@@ -14,6 +14,7 @@ import ConnectUmbrel from "@screens/connectors/ConnectUmbrel";
 import { Route } from "react-router-dom";
 import i18n from "~/i18n/i18nConfig";
 
+import ConnectNWC from "~/app/screens/connectors/ConnectNWC";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
 import btcpay from "/static/assets/icons/btcpay.svg";
 import citadel from "/static/assets/icons/citadel.png";
@@ -27,6 +28,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 nwc from "/static/assets/icons/nwc.svg";
 import raspiblitz from "/static/assets/icons/raspiblitz.png";
 import start9 from "/static/assets/icons/start9.png";
 import umbrel from "/static/assets/icons/umbrel.png";
@@ -149,6 +151,12 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.btcpay.title"),
     logo: btcpay,
   },
+  nwc: {
+    path: "nwc",
+    element: <ConnectNWC />,
+    title: i18n.t("translation:choose_connector.nwc.title"),
+    logo: nwc,
+  },
 };
 
 function getDistribution(key: string): ConnectorRoute {
@@ -188,6 +196,7 @@ const distributionMap: { [key: string]: { logo: string; children: Route[] } } =
         connectorMap["lnc"],
         connectorMap["commando"],
         connectorMap["lnbits"],
+        connectorMap["nwc"],
       ],
     },
     mynode: {
@@ -235,6 +244,7 @@ function getConnectorRoutes(): ConnectorRoute[] {
     getDistribution("mynode"),
     getDistribution("start9"),
     getDistribution("raspiblitz"),
+    connectorMap["nwc"],
   ];
 }
 

src/app/screens/ReceiveInvoice/index.tsx

@@ -228,9 +228,11 @@ function ReceiveInvoice() {
         {t("title")}
       </Header>
       {invoice ? (
-        <Container justifyBetween maxWidth="sm">
-          {renderInvoice()}
-        </Container>
+        <div className="h-full">
+          <Container justifyBetween maxWidth="sm">
+            {renderInvoice()}
+          </Container>
+        </div>
       ) : (
         <div className="pt-4 h-full">
           <form onSubmit={handleSubmit} className="h-full">

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

@@ -0,0 +1,125 @@
+import ConnectorForm from "@components/ConnectorForm";
+import TextField from "@components/form/TextField";
+import ConnectionErrorToast from "@components/toasts/ConnectionErrorToast";
+import { useState } from "react";
+import { Trans, 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/nwc.svg";
+
+export default function ConnectNWC() {
+  const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.nwc",
+  });
+  const [formData, setFormData] = useState({
+    nostrWalletConnectUrl: "",
+  });
+  const [loading, setLoading] = useState(false);
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value.trim(),
+    });
+  }
+
+  function getConnectorType() {
+    return "nwc";
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    const { nostrWalletConnectUrl } = formData;
+    const account = {
+      name: "NWC",
+      config: {
+        nostrWalletConnectUrl,
+      },
+      connector: getConnectorType(),
+    };
+
+    try {
+      const 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 {
+        console.error(validation);
+        toast.error(
+          <ConnectionErrorToast message={validation.error as string} />
+        );
+      }
+    } catch (e) {
+      console.error(e);
+      let message = t("page.errors.connection_failed");
+      if (e instanceof Error) {
+        message += `\n\n${e.message}`;
+      }
+      toast.error(message);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <ConnectorForm
+      title={
+        <h1 className="text-2xl font-bold dark:text-white">
+          <Trans i18nKey={"title"} t={t} />
+        </h1>
+      }
+      description={
+        <Trans
+          i18nKey={"page.instructions"}
+          t={t}
+          components={[
+            // eslint-disable-next-line react/jsx-key
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+              href="https://nwc.getalby.com"
+            ></a>,
+            // eslint-disable-next-line react/jsx-key
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+              href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
+            ></a>,
+            // eslint-disable-next-line react/jsx-key
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+              href="https://www.mutinywallet.com"
+            ></a>,
+          ]}
+        />
+      }
+      logo={logo}
+      submitLoading={loading}
+      submitDisabled={formData.nostrWalletConnectUrl === ""}
+      onSubmit={handleSubmit}
+    >
+      <div className="mt-4 mb-6">
+        <TextField
+          id="nostrWalletConnectUrl"
+          label={t("page.url.label")}
+          placeholder={t("page.url.placeholder")}
+          required
+          onChange={handleChange}
+          autoFocus={true}
+        />
+      </div>
+    </ConnectorForm>
+  );
+}

src/extension/background-script/actions/ln/checkPayment.ts

@@ -3,7 +3,10 @@ import { Message } from "~/types";
 import state from "../../state";
 
 const checkPayment = async (message: Message) => {
-  if (typeof message.args.paymentHash !== "string") {
+  if (
+    typeof message.args.paymentHash !== "string" ||
+    !message.args.paymentHash
+  ) {
     return {
       error: "Payment hash missing.",
     };

src/extension/background-script/connectors/index.ts

@@ -12,6 +12,7 @@ import NativeCitadel from "./nativecitadel";
 import NativeLnBits from "./nativelnbits";
 import NativeLnd from "./nativelnd";
 import NativeLndHub from "./nativelndhub";
+import NWC from "./nwc";
 
 /*
 const initialize = (account, password) => {
@@ -36,6 +37,7 @@ const connectors = {
   nativecitadel: NativeCitadel,
   commando: Commando,
   alby: Alby,
+  nwc: NWC,
 };
 
 export default connectors;