feat(alby): add connect via settings #632

.github/workflows/main.yml

@@ -28,3 +28,5 @@ jobs:
         run: yarn build
       - name: Run Tests
         run: yarn test
+      - name: Run Typecheck
+        run: yarn tsc

README.md

@@ -130,3 +130,5 @@ Please do not commit the above changes.
   - [MIT License (?)](https://github.com/lightningnetwork/lnd/blob/master/LICENSE)
 - Core Lightning Logo from [Blockstream](https://blockstream.com/)
   - [Blockstream Corporate Brand Guideline](https://blockstream.com/brand-assets/)
+- Alby Logo from [Alby media repo](https://github.com/getAlby/media)
+  - License unclear

backend-mock/system.js

@@ -51,4 +51,27 @@ router.get("/get-debug-logs-raw", (req, res) => {
   res.status(200).send(logs.toString());
 });
 
+router.get("/connection-info", (req, res) => {
+  console.info(`call to ${req.originalUrl}`);
+  const lndInfo = {
+    lnd_admin_macaroon:
+      "0201036C6E6402F801030A10B9BC5746E0F52F441BE2BF3B75A1C1EC1201301A160A0761646472657373120472656164120577726974651A130A04696E666F120472656164120577726974651A170A08696E766F69636573120472656164120577726974651A210A086D616361726F6FD634804926E441E8C730F92AE0C10E5732EE20EB6D6DE",
+    lnd_invoice_macaroon:
+      "0201036C6E640258030A10B7BC5746E0F52F441BE2BF3B75A1C1EC1201301A160A0761646472657373120472656164120577726974651A170A08696E766F6963657312047",
+    lnd_readonly_macaroon:
+      "0201036C6E6402AC01030A10B8BC5746E0F52F441BE2BF3B75A1C1EC1201301A0F0A07616464726573731204726561641A0C0A04696E666F1204726561641A100A08696E766F696365731204726561641A100A086D616361726F6F6E1204726561641A0F0A076D6573736167651204726561641A100A086F6666636861696E1204726561641A0F0A076F6E636861696E1204726561641A0D0A0570656572731204726561641A0E0A067369676E65721204726561640000062065950AD6F3E7C234B5E76B9EC58838180AB9296F99D49F9C0396C9138",
+    lnd_rest_onion:
+      "7hyube57cxcd47lcgrihujaevtsqlgd5ga34l637rgsyvd32x6.onion:8080",
+    lnd_tls_cert:
+      "2D2D2D2D2D424547494E2043455254494649434154452D2D2D2D2D0A4D494943436A434341624367417749424167495156505242734D556F4D37443532634574762B6671696A414B42676771686B6A4F50515144416A41314D5238770A485159445651514B45785A73626D5167595856306232646C626D56795958526C5A43426A5A584A304D52497745415944565151444760A633351774868634E4D6A45774F4449334D546B304D7A51775768634E4D6A49784D4449794D546B304D7A5177576A41314D523877485159445651514B45785A730A626D5167595856306232646C626D56795958526C5A43426A5A584A304D524977454159445651514445776C7362324E68624768766333517757544154426763710A686B6A4F5051494242676771686B6A4F50514D4242774E434141512B4A42564C363634484C58346F4F78482F534C705A61584E4E474F775657496E44373058310A4745426F425341492F3177372B354D635855694F6E554552793041524641304E366D354E4B666B502B346130586E79566F3447684D4947654D413447413155640A447745422F775145417749437044415442674E56485355454444414B4267677242674546425163444154415042674E5648524D4241663845425441444151482F0A4D42304741315564446751574242513946686E4B31517256705670344E68746A4A66323567584262687A424842674E56485245455144412B67676C7362324E680A62476876633353434248567561586943436E56756158687759574E725A56D364842483841414147484541414141414141414141410A414141414141414141414577436759494B6F5A497A6A3045417749445341417752514968414A726D33786478504C737444382F466B61554A68534846375375740A7A2B344776524A512F637A4876326836416941383677627747782F4C624A5074716342476E773639626C73507A6646496F2F3072434F636C4F754F5248773D3D0A2D2D2D2D2D454E44204345525449464943415445",
+    lnd_btcpay_connection_string: "",
+    lnd_zeus_connection_string:
+      "lndconnect://7hyube57cxcd47lcgrihujaevtsqlgd5ga34l637rgsyvd32x6.onion:8080?macaroon=AgEDbG5kAvgBAwoQubxXRuD1L0Qb4r87daHB7BIBMBoWCgdhZGRyZXNzEgRyZWFkEgV3cml0ZRoTCgRpbmZvEgRyZWFkEgV3cml0ZRoXCghpbnZvaWNlcxIEcmVhZBIFd3JpdGUaIQoIbWFjYXJvb24SCGdlbmVyYXRlEgRyZWFkEgV3cml0ZRoWCgdtZXNzYWdlEgRyZWFkEgV3cml0ZRoXCghvZmZjaGFgoHb25jaGFpbhIEcmVhZBIFd3JpdGUaFAoFcGVlcnMSBHJlYWQSBXdyaXRlGhgKBnNpZ25lchIIZ2VuZXJhdGUSBHJlYWQAAAYg0JENEUVinuZ2_WNIBJJuRB6Mcw-SrgwQ5XMu4g621t4&cert=MIICCjCCAbCgAwIBAgIQVPRBsMUoM7D52cEtv-fqijAKBggqhkjOPQQDAjA1MR8wHQYDVQQKExZsbmQgYXV0b2dlbmVyYXRlZCBjZXJ0MRIwEAYDVQQDEwlsb2NhbGhvc3QwHhcNMjEwODI3MTk0MzQwWhcNMjIxMDIyMTk0MzQwWjA1MR8wHQYDVQQKExZsbmQgYXV0b2dlbmVyYXRlZCBjZXJ0MRIwEAYDVQQDEwlsb2NhbGhvc3QwWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAAQ-JBVL664HLX4oOxH_SLpZaXD70X1GEBoBSAI_1w7-5McXUiOnUERy0ARFA0N6m5NKfkP-4a0XnyVo4GhMIGeMwICpDATBgNVHSUEDDAKBggrBgEFBQcDATAPBgNVHRMBAf8EBTADAQH_MB0GA1UdDgQWBBQ9FhnK1QrVpVp4NhtjJf25gXBbhzBHBgNVHREEQDA-gglsb2NhbGhvc3SCBHVuaXiCCnVuaXhwYWNrZXSCB2J1ZmNvbm6HBH8AAAGHEAAAAAAAAAAAAAAAAAAAAAEwCgYIKoZIzj0EAwIDSAAwRQIhAJrm3xdxPLstD8_FkaUJhSHF7Sutz-4GvRJQ_czHv2h6AiA86wbwGx_LbJPtqcBGnw69blsPzfFIo",
+    cl_rest_zeus_connection_string: "",
+    cl_rest_macaroon: "",
+    cl_rest_onion: "",
+  };
+  res.status(200).send(lndInfo);
+});
+
 module.exports = router;

package.json

@@ -11,6 +11,7 @@
     "postinstall": "husky install",
     "start": "vite",
     "build": "vite build",
+    "tsc": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "coverage": "vitest run --coverage"

src/globals.d.ts

@@ -0,0 +1,16 @@
+declare global {
+  // for more detailed type-info see:
+  // https://github.com/getAlby/lightning-browser-extension/blob/master/src/extension/providers/alby/index.ts#L3
+  interface Window {
+    alby?: {
+      enable: () => Promise<void>;
+      addAccount: (params: {
+        name: string;
+        connector: string;
+        config: Record<string, unknown>;
+      }) => Promise<{ success: boolean }>;
+    };
+  }
+}
+
+export {};

src/i18n/langs/en.json

@@ -32,6 +32,20 @@
       "jam": {
         "about": "Jam is a web interface for JoinMarket focusing on user-friendliness and ease-of-use. It aims to provide sensible defaults and be easy to use for beginners while still having the features advanced users expect.",
         "shortDescription": "Jam - A web interface for JoinMarket"
+      },
+      "alby": {
+        "about": "Alby Browser Extension",
+        "shortDescription": "Connect your RaspiBlitz LND node and use Bitcoin & Nostr apps with the Alby Extension",
+        "action": {
+          "install": "Install Alby",
+          "addAccount": "Connect",
+          "connection_info_error": "Could not get connection info",
+          "connection": {
+            "hint": "Please install the Alby extension first",
+            "success": "Raspiblitz account was added to Alby",
+            "error": "Adding Raspiblitz to Alby didn't work, please try again"
+          }
+        }
       }
     },
     "apps": {

src/pages/Apps/AppCardAlby.tsx

@@ -0,0 +1,101 @@
+import { PlusIcon, LinkIcon } from "@heroicons/react/24/outline";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import AppIcon from "../../components/AppIcon";
+import { toast } from "react-toastify";
+import { instance } from "../../utils/interceptor";
+
+export const AppCardAlby: FC = () => {
+  const { id, name } = {
+    id: "alby",
+    name: "Alby",
+  };
+
+  const { t } = useTranslation();
+
+  const addAlbyAccountHandler = async () => {
+    const resp = await instance.get("/system/connection-info");
+
+    if (
+      resp.status !== 200 ||
+      !resp.data.lnd_admin_macaroon ||
+      !resp.data.lnd_rest_onion
+    ) {
+      toast.error(t(`appInfo.${id}.action.connection_info_error`));
+      return;
+    }
+
+    const { lnd_admin_macaroon, lnd_rest_onion } = resp.data;
+
+    const albyProvider = window.alby;
+
+    if (!albyProvider) {
+      toast.error(t(`appInfo.${id}.action.connection.hint`));
+      return;
+    }
+
+    try {
+      await albyProvider.enable();
+
+      const result = await albyProvider.addAccount({
+        name: "⚡️ Raspiblitz",
+        connector: "lnd",
+        config: {
+          adminkey: lnd_admin_macaroon,
+          url: lnd_rest_onion,
+        },
+      });
+
+      if (result.success) {
+        toast.success(t(`appInfo.${id}.action.connection.success`));
+      } else {
+        toast.error(t(`appInfo.${id}.action.connection.error`));
+      }
+    } catch (e) {
+      toast.error(t(`appInfo.${id}.action.connection.error`));
+    }
+  };
+
+  return (
+    <div className="bd-card transition-colors dark:bg-gray-800">
+      <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
+        {/* Icon */}
+        <div className="mt-4 flex w-1/4 items-center justify-center p-2">
+          <AppIcon appId={id} className="max-h-12" />
+        </div>
+        {/* Content */}
+        <div className="mt-4 flex w-3/4 flex-col items-start justify-center text-xl">
+          <h4>{name}</h4>
+          <p className="overflow-ellipsis text-base text-gray-500 dark:text-gray-200">
+            {t(`appInfo.${id}.shortDescription`)}
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-row justify-center gap-2 py-4">
+        {window.alby && (
+          <button
+            className="bd-button flex w-1/2 items-center justify-center p-2 disabled:pointer-events-none"
+            onClick={addAlbyAccountHandler}
+          >
+            <LinkIcon className="inline h-6 w-6" />
+            &nbsp;{t(`appInfo.${id}.action.addAccount`)}
+          </button>
+        )}
+
+        {!window.alby && (
+          <a
+            className="bd-button flex w-1/2 items-center justify-center p-2 disabled:pointer-events-none"
+            target="_blank"
+            rel="noreferrer"
+            href="https://getalby.com"
+          >
+            <PlusIcon className="inline h-6 w-6" />
+            {t(`appInfo.${id}.action.install`)}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AppCardAlby;

src/pages/Apps/index.tsx

@@ -11,6 +11,7 @@ import { availableApps } from "../../utils/availableApps";
 import { checkError } from "../../utils/checkError";
 import { instance } from "../../utils/interceptor";
 import AppCard from "./AppCard";
+import AppCardAlby from "./AppCardAlby";
 import AppInfo from "./AppInfo";
 
 export const Apps: FC = () => {
@@ -121,6 +122,10 @@ export const Apps: FC = () => {
                   </article>
                 );
               })}
+
+              <article>
+                <AppCardAlby />
+              </article>
             </div>
           </section>
         </>

src/pages/Home/SendModal/__tests__/SendModal.test.tsx

@@ -1,5 +1,5 @@
 import userEvent from "@testing-library/user-event";
-import { UserEvent } from "@testing-library/user-event/dist/types/setup";
+import type { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 import { render, screen } from "test-utils";
 import { rest, server } from "../../../../testServer";
 import SendModal, { Props } from "../SendModal";
@@ -115,6 +115,7 @@ describe("SendModal", () => {
   describe("SendOnChain", () => {
     let user: UserEvent;
     // switch to onchain modal
+
     beforeEach(async () => {
       user = userEvent.setup();
       setup();

src/pages/Settings/ActionBox.tsx

@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import type { FC, ReactElement } from "react";
 
 export type Props = {
-  name: string;
+  name: string | ReactElement;
   actionName: string;
   action: () => void;
 };
@@ -11,7 +11,9 @@ const ActionBox: FC<Props> = ({ name, action, actionName }) => {
     <div className="box-border w-full transition-colors dark:text-white">
       <article className="relative rounded bg-white p-5 shadow-xl dark:bg-gray-800">
         <div className="flex justify-between">
-          <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">{name}</h4>
+          <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
+            <span>{name}</span>
+          </h4>
           <button className="bd-button w-1/2 py-1 xl:w-1/3" onClick={action}>
             {actionName}
           </button>

src/utils/__tests__/checkError.test.ts

@@ -7,6 +7,7 @@ vi.mock("i18next", () => ({
 describe("checkError", () => {
   it("should display the message with basic detail object", () => {
     const errorMsg = checkError({
+      // @ts-ignore response is not a full "AxiosResponse<ApiError, any>" type currently
       response: {
         data: {
           detail: "old password format invalid",
@@ -18,6 +19,7 @@ describe("checkError", () => {
 
   it("should display the message with detail.msg object", () => {
     const errorMsg = checkError({
+      // @ts-ignore response is not a full "AxiosResponse<ApiError, any>" type currently
       response: {
         data: {
           detail: [
@@ -40,6 +42,7 @@ describe("checkError", () => {
 
   it("should display the message with detail as an array", () => {
     const errorMsg = checkError({
+      // @ts-ignore
       response: {
         data: {
           detail: [