Feat: Add Spark connector

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@bitcoinerlab/secp256k1": "^1.1.1",
+    "@buildonspark/spark-sdk": "^0.3.3",
     "@getalby/sdk": "^6.0.0",
     "@headlessui/react": "^1.7.18",
     "@lightninglabs/lnc-web": "^0.3.1-alpha",
@@ -53,13 +54,13 @@
     "bitcoinjs-lib": "^6.1.7",
     "bolt11-signet": "1.4.1",
     "crypto-js": "^4.2.0",
-    "dexie": "^3.2.7",
     "dayjs": "^1.11.13",
+    "dexie": "^3.2.7",
     "elliptic": "^6.6.1",
     "events": "^3.3.0",
     "html5-qrcode": "^2.3.8",
-    "i18next-browser-languagedetector": "^8.1.0",
     "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.1.0",
     "liquidjs-lib": "^6.0.2-liquid.29",
     "lnmessage": "^0.2.7",
     "lodash.merge": "^4.6.2",

src/app/components/ConnectorForm/index.tsx

@@ -10,7 +10,7 @@ type Props = {
   submitLoading?: boolean;
   submitDisabled?: boolean;
   onSubmit: FormEventHandler;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   video?: string;
   image?: string;
   logo?: string;
@@ -80,7 +80,7 @@ function ConnectorForm({
           </div>
         )}
         {video || (image && media)}
-        <div>{children}</div>
+        {children && <div>{children}</div>}
         <div className="mt-4 flex justify-center">
           <Button
             type="submit"

src/app/router/connectorRoutes.tsx

@@ -15,8 +15,9 @@ 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 { default as ConnectAlbyHub } from "~/app/screens/connectors/ConnectAlbyHub";
 import ConnectNWC from "~/app/screens/connectors/ConnectNWC";
+import ConnectSpark from "~/app/screens/connectors/ConnectSpark";
 import ConnectVoltage from "~/app/screens/connectors/ConnectVoltage";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
 import albyhub from "/static/assets/icons/albyhub.png";
@@ -36,6 +37,7 @@ 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 spark from "/static/assets/icons/spark.png";
 import startos from "/static/assets/icons/startos.png";
 import umbrel from "/static/assets/icons/umbrel.png";
 import voltage from "/static/assets/icons/voltage.png";
@@ -176,6 +178,12 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.albyhub.title"),
     logo: albyhub,
   },
+  spark: {
+    path: "spark",
+    element: <ConnectSpark />,
+    title: i18n.t("translation:choose_connector.spark.title"),
+    logo: spark,
+  },
   lawallet: {
     path: "lawallet",
     element: <ConnectLaWallet />,
@@ -256,6 +264,7 @@ const distributionMap: { [key: string]: { logo: string; children: Route[] } } =
 function getConnectorRoutes(): ConnectorRoute[] {
   return [
     connectorMap["albyhub"],
+    connectorMap["spark"],
     connectorMap["lnd"],
     connectorMap["lnc"],
     connectorMap["commando"],

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

@@ -0,0 +1,109 @@
+import ConnectorForm from "@components/ConnectorForm";
+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 Alert from "~/app/components/Alert";
+import api from "~/common/lib/api";
+import logo from "/static/assets/icons/spark.png";
+
+export default function ConnectSpark() {
+  const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "choose_connector.spark",
+  });
+  const [loading, setLoading] = useState(false);
+
+  function getConnectorType() {
+    return "spark";
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+
+    const mnemonic = await api.generateMnemonic();
+    const encryptedMnemonic = await api.encryptMnemonic(mnemonic);
+
+    const account = {
+      name: "Spark",
+      config: {},
+      connector: getConnectorType(),
+      mnemonic: encryptedMnemonic,
+      useMnemonicForLnurlAuth: true,
+    };
+
+    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://www.spark.money/"
+            ></a>,
+          ]}
+        />
+      }
+      logo={logo}
+      submitLoading={loading}
+      onSubmit={handleSubmit}
+    >
+      <Alert type="warn">
+        <Trans
+          i18nKey={"page.warning"}
+          t={t}
+          components={[
+            // eslint-disable-next-line react/jsx-key
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+              href="https://docs.spark.money/wallet/developer-guide/unilateral-exit"
+            ></a>,
+          ]}
+        />
+      </Alert>
+    </ConnectorForm>
+  );
+}

src/common/lib/api.ts

@@ -265,6 +265,11 @@ const setMnemonic = (id: string, mnemonic: string | null): Promise<void> =>
     mnemonic,
   });
 
+const encryptMnemonic = (mnemonic: string): Promise<string> =>
+  msg.request("encryptMnemonic", {
+    mnemonic,
+  });
+
 const getSwapInfo = (): Promise<SwapInfoResponse> => msg.request("getSwapInfo");
 const createSwap = (params: CreateSwapParams): Promise<CreateSwapResponse> =>
   msg.request("createSwap", params);
@@ -332,6 +337,7 @@ export default {
   getMnemonic,
   setMnemonic,
   generateMnemonic,
+  encryptMnemonic,
   getSwapInfo,
   createSwap,
   liquid: {

src/extension/background-script/actions/mnemonic/encryptMnemonic.ts

@@ -0,0 +1,20 @@
+import { encryptData } from "~/common/lib/crypto";
+import type { MessageMnemonicEncrypt } from "~/types";
+
+import state from "../../state";
+
+const encryptMnemonic = async (message: MessageMnemonicEncrypt) => {
+  const password = await state.getState().password();
+  if (!password) {
+    return {
+      error: "Password is missing.",
+    };
+  }
+  let mnemonic = message.args.mnemonic;
+  mnemonic = encryptData(mnemonic, password);
+  return {
+    data: mnemonic,
+  };
+};
+
+export default encryptMnemonic;

src/extension/background-script/actions/mnemonic/index.ts

@@ -1,5 +1,6 @@
+import encryptMnemonic from "./encryptMnemonic";
 import generateMnemonic from "./generateMnemonic";
 import getMnemonic from "./getMnemonic";
 import setMnemonic from "./setMnemonic";
 
-export { generateMnemonic, getMnemonic, setMnemonic };
+export { encryptMnemonic, generateMnemonic, getMnemonic, setMnemonic };

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

@@ -14,6 +14,7 @@ import NativeLnBits from "./nativelnbits";
 import NativeLnd from "./nativelnd";
 import NativeLndHub from "./nativelndhub";
 import NWC from "./nwc";
+import Spark from "./spark";
 
 /*
 const initialize = (account, password) => {
@@ -38,6 +39,7 @@ const connectors = {
   nativecitadel: NativeCitadel,
   commando: Commando,
   alby: Alby,
+  spark: Spark,
   nwc: NWC,
   lawallet: LaWallet,
 };