feat: alby hub connector

src/app/router/connectorRoutes.tsx

@@ -15,9 +15,11 @@ import ConnectUmbrel from "@screens/connectors/ConnectUmbrel";
 import { Route } from "react-router-dom";
 import i18n from "~/i18n/i18nConfig";
 
+import ConnectAlbyHub from "~/app/screens/connectors/ConnectAlbyHub";
 import ConnectNWC from "~/app/screens/connectors/ConnectNWC";
 import ConnectVoltage from "~/app/screens/connectors/ConnectVoltage";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
+import albyhub from "/static/assets/icons/albyhub.svg";
 import btcpay from "/static/assets/icons/btcpay.svg";
 import citadel from "/static/assets/icons/citadel.png";
 import core_ln from "/static/assets/icons/core_ln.svg";
@@ -167,6 +169,12 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.nwc.title"),
     logo: nwc,
   },
+  albyhub: {
+    path: "albyhub",
+    element: <ConnectAlbyHub />,
+    title: i18n.t("translation:choose_connector.albyhub.title"),
+    logo: albyhub,
+  },
   lawallet: {
     path: "lawallet",
     element: <ConnectLaWallet />,
@@ -246,6 +254,7 @@ const distributionMap: { [key: string]: { logo: string; children: Route[] } } =
 
 function getConnectorRoutes(): ConnectorRoute[] {
   return [
+    connectorMap["albyhub"],
     connectorMap["lnd"],
     connectorMap["lnc"],
     connectorMap["commando"],

src/app/screens/connectors/ConnectAlbyHub/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/albyhub.svg";
+
+export default function ConnectAlbyHub() {
+  const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.albyhub",
+  });
+  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 "albyhub";
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    const { nostrWalletConnectUrl } = formData;
+    const account = {
+      name: "AlbyHub",
+      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>
+  );
+}