From 26d9f05a2d592e6a4b1c9a6dc634a39e96438f6d Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 11 Mar 2022 16:59:47 -0700
Subject: [PATCH 01/16] feat(connectors): add raspiblitz

---
 src/app/router/connectorRoutes.tsx            |   2 +
 .../screens/Onboard/ChooseConnector/index.tsx |  11 +-
 .../Onboard/ConnectRaspiBlitz/index.tsx       | 214 ++++++++++++++++++
 static/assets/icons/raspiblitz.png            | Bin 0 -> 9922 bytes
 4 files changed, 225 insertions(+), 2 deletions(-)
 create mode 100644 src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
 create mode 100644 static/assets/icons/raspiblitz.png

diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx
index 2a207deee2..df80992bdc 100644
--- a/src/app/router/connectorRoutes.tsx
+++ b/src/app/router/connectorRoutes.tsx
@@ -3,6 +3,7 @@ import ConnectLndHub from "../screens/Onboard/ConnectLndHub";
 import ConnectLnbits from "../screens/Onboard/ConnectLnbits";
 import ConnectEclair from "../screens/Onboard/ConnectEclair";
 import NewWallet from "../screens/Onboard/NewWallet";
+import ConnectRaspiBlitz from "../screens/Onboard/ConnectRaspiBlitz";
 
 export default [
   { path: "lnd", element: <ConnectLnd /> },
@@ -10,4 +11,5 @@ export default [
   { path: "lnbits", element: <ConnectLnbits /> },
   { path: "eclair", element: <ConnectEclair /> },
   { path: "create-wallet", element: <NewWallet /> },
+  { path: "raspiblitz", element: <ConnectRaspiBlitz /> },
 ];
diff --git a/src/app/screens/Onboard/ChooseConnector/index.tsx b/src/app/screens/Onboard/ChooseConnector/index.tsx
index 118481c2a8..7396f481d1 100644
--- a/src/app/screens/Onboard/ChooseConnector/index.tsx
+++ b/src/app/screens/Onboard/ChooseConnector/index.tsx
@@ -5,6 +5,7 @@ import lndhub from "/static/assets/icons/lndhub.png";
 import lnd from "/static/assets/icons/lnd.png";
 import eclair from "/static/assets/icons/eclair.jpg";
 import alby from "/static/assets/icons/alby.png";
+import raspiblitz from "/static/assets/icons/raspiblitz.png";
 
 type Props = {
   title: string;
@@ -43,10 +44,16 @@ export default function ChooseConnector({ title, description }: Props) {
       description: "We create and manage a lightning wallet for you",
       logo: alby,
     },
+    {
+      to: "raspiblitz",
+      title: "RaspiBlitz",
+      description: "Connect to your RaspiBlitz",
+      logo: raspiblitz,
+    },
   ];
 
   return (
-    <div className="relative mt-14 lg:grid  lg:gap-8 text-center">
+    <div className="relative my-14 lg:grid  lg:gap-8 text-center">
       <div className="relative">
         <div className="mb-6">
           <h1 className="text-3xl font-bold dark:text-white">{title}</h1>
@@ -56,7 +63,7 @@ export default function ChooseConnector({ title, description }: Props) {
             </p>
           )}
         </div>
-        <div className="grid grid-cols-5 gap-5">
+        <div className="grid grid-cols-4 gap-5">
           {connectors.map(({ to, title, description, logo }) => (
             <LinkButton
               key={to}
diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
new file mode 100644
index 0000000000..d3d7643f1d
--- /dev/null
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -0,0 +1,214 @@
+import { SendIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import utils from "../../../../common/lib/utils";
+import Button from "../../../components/Button";
+import TextField from "../../../components/Form/TextField";
+import CompanionDownloadInfo from "../../../components/CompanionDownloadInfo";
+
+const initialFormData = Object.freeze({
+  url: "",
+  macaroon: "",
+});
+
+export default function ConnectRaspiBlitz() {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState(initialFormData);
+  const [isDragging, setDragging] = useState(false);
+  const hiddenFileInput = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value.trim(),
+    });
+  }
+
+  function getConnectorType() {
+    if (formData.url.match(/\.onion/i)) {
+      return "nativelnd";
+    }
+    // default to LND
+    return "lnd";
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    const { url, macaroon } = formData;
+    const account = {
+      name: "RaspiBlitz",
+      config: {
+        macaroon,
+        url,
+      },
+      connector: getConnectorType(),
+    };
+
+    try {
+      let validation;
+      // TODO: for native connectors we currently skip the validation because it is too slow (booting up Tor etc.)
+      if (account.connector === "nativelnd") {
+        validation = { valid: true, error: "" };
+      } else {
+        validation = await utils.call("validateAccount", account);
+      }
+
+      if (validation.valid) {
+        const addResult = await utils.call("addAccount", account);
+        if (addResult.accountId) {
+          await utils.call("selectAccount", {
+            id: addResult.accountId,
+          });
+          navigate("/test-connection");
+        }
+      } else {
+        alert(`
+          Connection failed. Are your RaspiBlitz credentials correct? \n\n(${validation.error})`);
+      }
+    } catch (e) {
+      console.error(e);
+      let message =
+        "Connection failed. Are your RaspiBlitz credentials correct?";
+      if (e instanceof Error) {
+        message += `\n\n${e.message}`;
+      }
+      alert(message);
+    }
+    setLoading(false);
+  }
+
+  function dropHandler(event: React.DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    if (
+      event.dataTransfer.items &&
+      event.dataTransfer.items[0].kind === "file"
+    ) {
+      const file = event.dataTransfer.items[0].getAsFile();
+      if (file) {
+        const extension = file.name.split(".").pop();
+        if (extension === "macaroon") readFile(file);
+      }
+    }
+    if (isDragging) setDragging(false);
+  }
+
+  function readFile(file: File) {
+    const reader = new FileReader();
+    reader.onload = function (evt) {
+      if (evt.target?.result) {
+        const macaroon = utils.bytesToHexString(
+          new Uint8Array(evt.target.result as ArrayBuffer)
+        );
+        if (macaroon) {
+          setFormData({
+            ...formData,
+            macaroon,
+          });
+        }
+      }
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  function dragOverHandler(event: React.DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    if (!isDragging) setDragging(true);
+  }
+
+  function dragLeaveHandler(event: React.DragEvent<HTMLDivElement>) {
+    if (isDragging) setDragging(false);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="relative mt-14 lg:flex space-x-8 bg-white dark:bg-gray-800 px-12 py-10">
+        <div className="lg:w-1/2">
+          <h1 className="text-2xl font-bold dark:text-white">
+            Connect to your RaspiBlitz node
+          </h1>
+          <p className="text-gray-500 mt-6 dark:text-gray-400">
+            You need your node URL and a macaroon with read and send permissions
+            (e.g. admin.macaroon)
+          </p>
+          <div className="w-4/5">
+            <div className="mt-6">
+              <TextField
+                id="url"
+                label="REST API host and port"
+                placeholder="https://your-node:8080"
+                onChange={handleChange}
+                required
+              />
+            </div>
+            {formData.url.match(/\.onion/i) && <CompanionDownloadInfo />}
+            <div className="mt-6">
+              <div>
+                <TextField
+                  id="macaroon"
+                  label="Macaroon (HEX format)"
+                  value={formData.macaroon}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+              <p className="text-center my-4 dark:text-white">OR</p>
+              <div
+                className={`cursor-pointer flex flex-col items-center dark:bg-gray-800 p-4 py-10 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
+                  isDragging ? "border-blue-500 bg-blue-50" : ""
+                }`}
+                onDrop={dropHandler}
+                onDragOver={dragOverHandler}
+                onDragLeave={dragLeaveHandler}
+                onClick={() => {
+                  if (hiddenFileInput?.current) hiddenFileInput.current.click();
+                }}
+              >
+                <SendIcon className="mb-3 h-9 w-9 text-blue-500" />
+                <p className="dark:text-white">
+                  Drag and drop your macaroon here or{" "}
+                  <span className="underline">browse</span>
+                </p>
+                <input
+                  ref={hiddenFileInput}
+                  onChange={(event) => {
+                    if (event.target.files) {
+                      const file = event.target.files[0];
+                      readFile(file);
+                    }
+                  }}
+                  type="file"
+                  accept=".macaroon"
+                  hidden
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-16 lg:mt-0 lg:w-1/2">
+          <div className="lg:flex h-full justify-center items-center">
+            <img src="assets/icons/satsymbol.svg" alt="sat" className="w-64" />
+          </div>
+        </div>
+      </div>
+      <div className="my-8 flex space-x-4 justify-center">
+        <Button
+          label="Back"
+          onClick={(e) => {
+            e.preventDefault();
+            navigate(-1);
+            return false;
+          }}
+        />
+        <Button
+          type="submit"
+          label="Continue"
+          primary
+          loading={loading}
+          disabled={formData.url === "" || formData.macaroon === ""}
+        />
+      </div>
+    </form>
+  );
+}
diff --git a/static/assets/icons/raspiblitz.png b/static/assets/icons/raspiblitz.png
new file mode 100644
index 0000000000000000000000000000000000000000..02d44e57b7d16318196164368baafbddbb80e1bf
GIT binary patch
literal 9922
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

literal 0
HcmV?d00001


From da20da1ac568fc9f44f5bc944a80bc4fa27e15b7 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Thu, 17 Mar 2022 19:18:35 -0600
Subject: [PATCH 02/16] feat: add instructions

---
 .../screens/Onboard/ChooseConnector/index.tsx |  4 ++--
 .../Onboard/ConnectRaspiBlitz/index.tsx       | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/app/screens/Onboard/ChooseConnector/index.tsx b/src/app/screens/Onboard/ChooseConnector/index.tsx
index 7396f481d1..07ebb0e9cc 100644
--- a/src/app/screens/Onboard/ChooseConnector/index.tsx
+++ b/src/app/screens/Onboard/ChooseConnector/index.tsx
@@ -53,7 +53,7 @@ export default function ChooseConnector({ title, description }: Props) {
   ];
 
   return (
-    <div className="relative my-14 lg:grid  lg:gap-8 text-center">
+    <div className="relative my-14 lg:grid lg:gap-8 text-center">
       <div className="relative">
         <div className="mb-6">
           <h1 className="text-3xl font-bold dark:text-white">{title}</h1>
@@ -63,7 +63,7 @@ export default function ChooseConnector({ title, description }: Props) {
             </p>
           )}
         </div>
-        <div className="grid grid-cols-4 gap-5">
+        <div className="grid grid-cols-5 gap-5">
           {connectors.map(({ to, title, description, logo }) => (
             <LinkButton
               key={to}
diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index d3d7643f1d..7f3492d3d7 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -130,7 +130,17 @@ export default function ConnectRaspiBlitz() {
           </h1>
           <p className="text-gray-500 mt-6 dark:text-gray-400">
             You need your node URL and a macaroon with read and send permissions
-            (e.g. admin.macaroon)
+            (e.g. admin.macaroon).
+            <br />
+            <br />
+            <b>SSH</b> into your <b>RaspiBlitz</b>.<br />
+            Run the command <b>sudo cat /mnt/hdd/tor/lndrest8080/hostname</b>.
+            <br />
+            Copy your <b>.onion</b> address.
+            <br />
+            Add <b>https://</b> at the beginning and <b>:800</b> at the end.
+            <br />
+            Paste the URL in the input below.
           </p>
           <div className="w-4/5">
             <div className="mt-6">
@@ -144,6 +154,13 @@ export default function ConnectRaspiBlitz() {
             </div>
             {formData.url.match(/\.onion/i) && <CompanionDownloadInfo />}
             <div className="mt-6">
+              <p className="mb-6 text-gray-500 mt-6 dark:text-gray-400">
+                Select <b>CONNECT</b>.<br />
+                Select <b>EXPORT</b>.<br />
+                Select <b>HEX</b>.<br />
+                Copy the <b>adminMacaroon</b>.<br />
+                Paste the macaroon in the input below.
+              </p>
               <div>
                 <TextField
                   id="macaroon"

From f339b5162ade806ee47645233bbefc48fa8084c1 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 18 Mar 2022 10:45:00 -0600
Subject: [PATCH 03/16] refactor: remove upload macaroon, update port, update
 textfield

---
 .../Onboard/ConnectRaspiBlitz/index.tsx       | 83 ++-----------------
 1 file changed, 5 insertions(+), 78 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index 7f3492d3d7..f41e81ce7f 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -1,5 +1,4 @@
-import { SendIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import utils from "../../../../common/lib/utils";
 import Button from "../../../components/Button";
@@ -14,8 +13,6 @@ const initialFormData = Object.freeze({
 export default function ConnectRaspiBlitz() {
   const navigate = useNavigate();
   const [formData, setFormData] = useState(initialFormData);
-  const [isDragging, setDragging] = useState(false);
-  const hiddenFileInput = useRef<HTMLInputElement>(null);
   const [loading, setLoading] = useState(false);
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -79,48 +76,6 @@ export default function ConnectRaspiBlitz() {
     setLoading(false);
   }
 
-  function dropHandler(event: React.DragEvent<HTMLDivElement>) {
-    event.preventDefault();
-    if (
-      event.dataTransfer.items &&
-      event.dataTransfer.items[0].kind === "file"
-    ) {
-      const file = event.dataTransfer.items[0].getAsFile();
-      if (file) {
-        const extension = file.name.split(".").pop();
-        if (extension === "macaroon") readFile(file);
-      }
-    }
-    if (isDragging) setDragging(false);
-  }
-
-  function readFile(file: File) {
-    const reader = new FileReader();
-    reader.onload = function (evt) {
-      if (evt.target?.result) {
-        const macaroon = utils.bytesToHexString(
-          new Uint8Array(evt.target.result as ArrayBuffer)
-        );
-        if (macaroon) {
-          setFormData({
-            ...formData,
-            macaroon,
-          });
-        }
-      }
-    };
-    reader.readAsArrayBuffer(file);
-  }
-
-  function dragOverHandler(event: React.DragEvent<HTMLDivElement>) {
-    event.preventDefault();
-    if (!isDragging) setDragging(true);
-  }
-
-  function dragLeaveHandler(event: React.DragEvent<HTMLDivElement>) {
-    if (isDragging) setDragging(false);
-  }
-
   return (
     <form onSubmit={handleSubmit}>
       <div className="relative mt-14 lg:flex space-x-8 bg-white dark:bg-gray-800 px-12 py-10">
@@ -138,7 +93,7 @@ export default function ConnectRaspiBlitz() {
             <br />
             Copy your <b>.onion</b> address.
             <br />
-            Add <b>https://</b> at the beginning and <b>:800</b> at the end.
+            Add <b>https://</b> at the beginning and <b>:8080</b> at the end.
             <br />
             Paste the URL in the input below.
           </p>
@@ -147,7 +102,9 @@ export default function ConnectRaspiBlitz() {
               <TextField
                 id="url"
                 label="REST API host and port"
-                placeholder="https://your-node:8080"
+                placeholder="https://your-node-url:8080"
+                pattern="https://.+"
+                title="https://your-node-url:8080"
                 onChange={handleChange}
                 required
               />
@@ -170,36 +127,6 @@ export default function ConnectRaspiBlitz() {
                   required
                 />
               </div>
-              <p className="text-center my-4 dark:text-white">OR</p>
-              <div
-                className={`cursor-pointer flex flex-col items-center dark:bg-gray-800 p-4 py-10 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
-                  isDragging ? "border-blue-500 bg-blue-50" : ""
-                }`}
-                onDrop={dropHandler}
-                onDragOver={dragOverHandler}
-                onDragLeave={dragLeaveHandler}
-                onClick={() => {
-                  if (hiddenFileInput?.current) hiddenFileInput.current.click();
-                }}
-              >
-                <SendIcon className="mb-3 h-9 w-9 text-blue-500" />
-                <p className="dark:text-white">
-                  Drag and drop your macaroon here or{" "}
-                  <span className="underline">browse</span>
-                </p>
-                <input
-                  ref={hiddenFileInput}
-                  onChange={(event) => {
-                    if (event.target.files) {
-                      const file = event.target.files[0];
-                      readFile(file);
-                    }
-                  }}
-                  type="file"
-                  accept=".macaroon"
-                  hidden
-                />
-              </div>
             </div>
           </div>
         </div>

From 6128c80cb8c168a6c288f5d9fc87022474e8972a Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sun, 20 Mar 2022 18:18:23 -0600
Subject: [PATCH 04/16] feat: add https and port for user automatically

---
 src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index f41e81ce7f..0308bdba57 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -18,7 +18,7 @@ export default function ConnectRaspiBlitz() {
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     setFormData({
       ...formData,
-      [event.target.name]: event.target.value.trim(),
+      [event.target.name]: `https://${event.target.value.trim()}:8080`,
     });
   }
 
@@ -93,16 +93,14 @@ export default function ConnectRaspiBlitz() {
             <br />
             Copy your <b>.onion</b> address.
             <br />
-            Add <b>https://</b> at the beginning and <b>:8080</b> at the end.
-            <br />
             Paste the URL in the input below.
           </p>
           <div className="w-4/5">
             <div className="mt-6">
               <TextField
                 id="url"
-                label="REST API host and port"
-                placeholder="https://your-node-url:8080"
+                label="REST API host"
+                placeholder="your-node-url"
                 pattern="https://.+"
                 title="https://your-node-url:8080"
                 onChange={handleChange}

From e219b943cd59bbaf27bba2434e86f5790fbb64ef Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Mon, 21 Mar 2022 12:42:29 -0600
Subject: [PATCH 05/16] fix: update input pattern regex and message, add
 conditional to onChange

---
 .../Onboard/ConnectRaspiBlitz/index.tsx       | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index 0308bdba57..e3c0c78ea3 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -16,10 +16,17 @@ export default function ConnectRaspiBlitz() {
   const [loading, setLoading] = useState(false);
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-    setFormData({
-      ...formData,
-      [event.target.name]: `https://${event.target.value.trim()}:8080`,
-    });
+    if (event.target.name === "url") {
+      setFormData({
+        ...formData,
+        [event.target.name]: `https://${event.target.value.trim()}:8080`,
+      });
+    } else {
+      setFormData({
+        ...formData,
+        [event.target.name]: event.target.value.trim(),
+      });
+    }
   }
 
   function getConnectorType() {
@@ -101,8 +108,8 @@ export default function ConnectRaspiBlitz() {
                 id="url"
                 label="REST API host"
                 placeholder="your-node-url"
-                pattern="https://.+"
-                title="https://your-node-url:8080"
+                pattern="^[A-Za-z0-9]*\.onion$"
+                title="your-node-url.onion"
                 onChange={handleChange}
                 required
               />

From 150a8f0a2db109b44d69ada1f65072d05f0b4e8d Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Mon, 21 Mar 2022 13:27:15 -0600
Subject: [PATCH 06/16] fix: change URL references to .onion address

---
 src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index e3c0c78ea3..32c383421e 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -91,25 +91,23 @@ export default function ConnectRaspiBlitz() {
             Connect to your RaspiBlitz node
           </h1>
           <p className="text-gray-500 mt-6 dark:text-gray-400">
-            You need your node URL and a macaroon with read and send permissions
-            (e.g. admin.macaroon).
+            You need your node onion address and a macaroon with read and send
+            permissions (e.g. admin.macaroon).
             <br />
             <br />
             <b>SSH</b> into your <b>RaspiBlitz</b>.<br />
             Run the command <b>sudo cat /mnt/hdd/tor/lndrest8080/hostname</b>.
             <br />
-            Copy your <b>.onion</b> address.
-            <br />
-            Paste the URL in the input below.
+            Copy and paste the <b>.onion</b> address in the input below.
           </p>
           <div className="w-4/5">
             <div className="mt-6">
               <TextField
                 id="url"
                 label="REST API host"
-                placeholder="your-node-url"
+                placeholder="your-node-onion-address"
                 pattern="^[A-Za-z0-9]*\.onion$"
-                title="your-node-url.onion"
+                title="your-node-address.onion"
                 onChange={handleChange}
                 required
               />

From 035413990be8a0f6b7439182c1bd8867d87a094c Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 22 Mar 2022 22:07:43 -0600
Subject: [PATCH 07/16] refactor: make 2 functions for change and remove onion
 validation

---
 .../Onboard/ConnectRaspiBlitz/index.tsx       | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index 32c383421e..e09b3b343b 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -15,18 +15,18 @@ export default function ConnectRaspiBlitz() {
   const [formData, setFormData] = useState(initialFormData);
   const [loading, setLoading] = useState(false);
 
-  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-    if (event.target.name === "url") {
-      setFormData({
-        ...formData,
-        [event.target.name]: `https://${event.target.value.trim()}:8080`,
-      });
-    } else {
-      setFormData({
-        ...formData,
-        [event.target.name]: event.target.value.trim(),
-      });
-    }
+  function handleUrl(event: React.ChangeEvent<HTMLInputElement>) {
+    setFormData({
+      ...formData,
+      [event.target.name]: `https://${event.target.value.trim()}:8080`,
+    });
+  }
+
+  function handleMacaroon(event: React.ChangeEvent<HTMLInputElement>) {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value.trim(),
+    });
   }
 
   function getConnectorType() {
@@ -106,9 +106,7 @@ export default function ConnectRaspiBlitz() {
                 id="url"
                 label="REST API host"
                 placeholder="your-node-onion-address"
-                pattern="^[A-Za-z0-9]*\.onion$"
-                title="your-node-address.onion"
-                onChange={handleChange}
+                onChange={handleUrl}
                 required
               />
             </div>
@@ -126,7 +124,7 @@ export default function ConnectRaspiBlitz() {
                   id="macaroon"
                   label="Macaroon (HEX format)"
                   value={formData.macaroon}
-                  onChange={handleChange}
+                  onChange={handleMacaroon}
                   required
                 />
               </div>

From ff06931f81f2092389702348f867bf488dcb71c8 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Wed, 23 Mar 2022 14:47:59 -0600
Subject: [PATCH 08/16] refactor: make port configurable

---
 src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index e09b3b343b..972b0080e1 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -18,7 +18,7 @@ export default function ConnectRaspiBlitz() {
   function handleUrl(event: React.ChangeEvent<HTMLInputElement>) {
     setFormData({
       ...formData,
-      [event.target.name]: `https://${event.target.value.trim()}:8080`,
+      [event.target.name]: `https://${event.target.value.trim()}`,
     });
   }
 
@@ -91,21 +91,26 @@ export default function ConnectRaspiBlitz() {
             Connect to your RaspiBlitz node
           </h1>
           <p className="text-gray-500 mt-6 dark:text-gray-400">
-            You need your node onion address and a macaroon with read and send
-            permissions (e.g. admin.macaroon).
+            You need your node onion address, port, and a macaroon with read and
+            send permissions (e.g. admin.macaroon).
             <br />
             <br />
             <b>SSH</b> into your <b>RaspiBlitz</b>.<br />
             Run the command <b>sudo cat /mnt/hdd/tor/lndrest8080/hostname</b>.
             <br />
             Copy and paste the <b>.onion</b> address in the input below.
+            <br />
+            Add your <b>port</b> after the onion address, the default port is{" "}
+            <b>:8080</b>.
+            <br />
+            You do not need to add https://
           </p>
           <div className="w-4/5">
             <div className="mt-6">
               <TextField
                 id="url"
                 label="REST API host"
-                placeholder="your-node-onion-address"
+                placeholder="your-node-onion-address:port"
                 onChange={handleUrl}
                 required
               />

From d7f1aacef105489adb8c34b2abe648101086835f Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 1 Apr 2022 21:38:05 -0600
Subject: [PATCH 09/16] feat: check for http and add if not present

---
 .../screens/Onboard/ConnectRaspiBlitz/index.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index 972b0080e1..b3101a47e5 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -16,10 +16,17 @@ export default function ConnectRaspiBlitz() {
   const [loading, setLoading] = useState(false);
 
   function handleUrl(event: React.ChangeEvent<HTMLInputElement>) {
-    setFormData({
-      ...formData,
-      [event.target.name]: `https://${event.target.value.trim()}`,
-    });
+    if (event.target.value.substring(0, 4) === "http") {
+      setFormData({
+        ...formData,
+        [event.target.name]: event.target.value.trim(),
+      });
+    } else {
+      setFormData({
+        ...formData,
+        [event.target.name]: `https://${event.target.value.trim()}`,
+      });
+    }
   }
 
   function handleMacaroon(event: React.ChangeEvent<HTMLInputElement>) {
@@ -102,8 +109,6 @@ export default function ConnectRaspiBlitz() {
             <br />
             Add your <b>port</b> after the onion address, the default port is{" "}
             <b>:8080</b>.
-            <br />
-            You do not need to add https://
           </p>
           <div className="w-4/5">
             <div className="mt-6">

From 206d1f7d1a56e3906b1926ff26255d9ef0bf191a Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 5 Apr 2022 14:32:58 -0600
Subject: [PATCH 10/16] refactor: use bumi suggestion to dry handleUrl function

---
 .../screens/Onboard/ConnectRaspiBlitz/index.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index b3101a47e5..f8f01715b9 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -16,17 +16,14 @@ export default function ConnectRaspiBlitz() {
   const [loading, setLoading] = useState(false);
 
   function handleUrl(event: React.ChangeEvent<HTMLInputElement>) {
-    if (event.target.value.substring(0, 4) === "http") {
-      setFormData({
-        ...formData,
-        [event.target.name]: event.target.value.trim(),
-      });
-    } else {
-      setFormData({
-        ...formData,
-        [event.target.name]: `https://${event.target.value.trim()}`,
-      });
+    let url = event.target.value.trim();
+    if (event.target.value.substring(0, 4) !== "http") {
+      url = `https://${url}`;
     }
+    setFormData({
+      ...formData,
+      [event.target.name]: url,
+    });
   }
 
   function handleMacaroon(event: React.ChangeEvent<HTMLInputElement>) {

From 3a819ad9f026924a6c053647a107d3600b374940 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 5 Apr 2022 15:05:28 -0600
Subject: [PATCH 11/16] fix: add raspiblitz back in after merge

---
 src/app/router/connectorRoutes.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx
index 45347486cc..95a31b4c1b 100644
--- a/src/app/router/connectorRoutes.tsx
+++ b/src/app/router/connectorRoutes.tsx
@@ -9,6 +9,7 @@ import umbrel from "/static/assets/icons/umbrel.png";
 import start9 from "/static/assets/icons/start9.png";
 import citadel from "/static/assets/icons/citadel.png";
 import mynode from "/static/assets/icons/mynode.png";
+import raspiblitz from "/static/assets/icons/raspiblitz.png";
 
 import ConnectLnd from "../screens/connectors/ConnectLnd";
 import ConnectLndHub from "../screens/connectors/ConnectLndHub";
@@ -17,6 +18,7 @@ import ConnectGaloy, { galoyUrls } from "../screens/connectors/ConnectGaloy";
 import ConnectEclair from "../screens/connectors/ConnectEclair";
 import ConnectCitadel from "../screens/connectors/ConnectCitadel";
 import NewWallet from "../screens/connectors/NewWallet";
+import ConnectRaspiBlitz from "../screens/Onboard/ConnectRaspiBlitz";
 import ConnectUmbrel from "../screens/connectors/ConnectUmbrel";
 import ConnectStart9 from "../screens/connectors/ConnectStart9";
 import ConnectMyNode from "../screens/connectors/ConnectMyNode";
@@ -90,6 +92,13 @@ export default [
     description: "Connect to your Embassy",
     logo: start9,
   },
+  {
+    path: "raspiblitz",
+    element: <ConnectRaspiBlitz />,
+    title: "RaspiBlitz",
+    description: "Connect to your RaspiBlitz",
+    logo: raspiblitz,
+  },
   {
     path: galoyPaths.bitcoinBeach,
     element: <ConnectGaloy instance={galoyPaths.bitcoinBeach} />,

From 304eb52286b15ca3ce5f3d638b59c1e542329997 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 5 Apr 2022 15:05:51 -0600
Subject: [PATCH 12/16] fix: delete unused code

---
 .../screens/Onboard/ChooseConnector/index.tsx | 121 ------------------
 1 file changed, 121 deletions(-)
 delete mode 100644 src/app/screens/Onboard/ChooseConnector/index.tsx

diff --git a/src/app/screens/Onboard/ChooseConnector/index.tsx b/src/app/screens/Onboard/ChooseConnector/index.tsx
deleted file mode 100644
index 94e8db8bdf..0000000000
--- a/src/app/screens/Onboard/ChooseConnector/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import LinkButton from "../../../components/LinkButton";
-
-import lnbits from "/static/assets/icons/lnbits.png";
-import lndhub from "/static/assets/icons/lndhub.png";
-import lnd from "/static/assets/icons/lnd.png";
-import galoyBitcoinBeach from "/static/assets/icons/galoy_bitcoin_beach.jpg";
-import galoyBitcoinJungle from "/static/assets/icons/galoy_bitcoin_jungle.png";
-import eclair from "/static/assets/icons/eclair.jpg";
-import alby from "/static/assets/icons/alby.png";
-import raspiblitz from "/static/assets/icons/raspiblitz.png";
-import umbrel from "/static/assets/icons/umbrel.png";
-import start9 from "/static/assets/icons/start9.png";
-import citadel from "/static/assets/icons/citadel.png";
-import mynode from "/static/assets/icons/mynode.png";
-
-type Props = {
-  title: string;
-  description?: string;
-};
-
-export default function ChooseConnector({ title, description }: Props) {
-  const connectors = [
-    {
-      to: "create-wallet",
-      title: "Create a new wallet",
-      description: "We create and manage a lightning wallet for you",
-      logo: alby,
-    },
-    {
-      to: "lnd",
-      title: "LND",
-      description: "Connect to your LND node",
-      logo: lnd,
-    },
-    {
-      to: "lnd-hub",
-      title: "LNDHub (Bluewallet)",
-      description: "Connect to your Bluewallet mobile wallet",
-      logo: lndhub,
-    },
-    {
-      to: "lnbits",
-      title: "LNbits",
-      description: "Connect to your LNbits account",
-      logo: lnbits,
-    },
-    {
-      to: "eclair",
-      title: "Eclair",
-      description: "Connect to your Eclair node",
-      logo: eclair,
-    },
-    {
-      to: "citadel",
-      title: "Citadel",
-      description: "Connect to your local Citadel",
-      logo: citadel,
-    },
-    {
-      to: "umbrel",
-      title: "Umbrel",
-      description: "Connect to your Umbrel",
-      logo: umbrel,
-    },
-    {
-      to: "mynode",
-      title: "myNode",
-      description: "Connect to your myNode",
-      logo: mynode,
-    },
-    {
-      to: "start9",
-      title: "Start9",
-      description: "Connect to your Embassy",
-      logo: start9,
-    },
-    {
-      to: "raspiblitz",
-      title: "RaspiBlitz",
-      description: "Connect to your RaspiBlitz",
-      logo: raspiblitz,
-    },
-    { to: "galoy-bitcoin-beach",
-      title: "Bitcoin Beach Wallet",
-      description: "Create or connect to a Bitcoin Beach (Galoy) account",
-      logo: galoyBitcoinBeach,
-    },
-    {
-      to: "galoy-bitcoin-jungle",
-      title: "Bitcoin Jungle Wallet",
-      description: "Create or connect to a Bitcoin Jungle (Galoy) account",
-      logo: galoyBitcoinJungle,
-    },
-  ];
-
-  return (
-    <div className="relative my-14 lg:grid lg:gap-8 text-center">
-      <div className="relative">
-        <div className="mb-6">
-          <h1 className="text-3xl font-bold dark:text-white">{title}</h1>
-          {description && (
-            <p className="text-gray-500 mt-6 dark:text-gray-400">
-              {description}
-            </p>
-          )}
-        </div>
-        <div className="grid grid-cols-5 gap-5">
-          {connectors.map(({ to, title, description, logo }) => (
-            <LinkButton
-              key={to}
-              to={to}
-              title={title}
-              description={description}
-              logo={logo}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

From e9a41f465c37b0ea3d63a1eb300ec2783a87a95e Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 5 Apr 2022 15:06:04 -0600
Subject: [PATCH 13/16] fix: filepath

---
 src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
index f8f01715b9..f0bb2342b2 100644
--- a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import utils from "../../../../common/lib/utils";
 import Button from "../../../components/Button";
-import TextField from "../../../components/Form/TextField";
+import TextField from "../../../components/form/TextField";
 import CompanionDownloadInfo from "../../../components/CompanionDownloadInfo";
 
 const initialFormData = Object.freeze({

From 7361805b0391fcb91473b816c9c6e6bc9f1bd68b Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 5 Apr 2022 15:27:13 -0600
Subject: [PATCH 14/16] refactor: move to new folder structure

---
 src/app/router/connectorRoutes.tsx                              | 2 +-
 .../screens/{Onboard => connectors}/ConnectRaspiBlitz/index.tsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/app/screens/{Onboard => connectors}/ConnectRaspiBlitz/index.tsx (100%)

diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx
index 95a31b4c1b..411f72f344 100644
--- a/src/app/router/connectorRoutes.tsx
+++ b/src/app/router/connectorRoutes.tsx
@@ -18,7 +18,7 @@ import ConnectGaloy, { galoyUrls } from "../screens/connectors/ConnectGaloy";
 import ConnectEclair from "../screens/connectors/ConnectEclair";
 import ConnectCitadel from "../screens/connectors/ConnectCitadel";
 import NewWallet from "../screens/connectors/NewWallet";
-import ConnectRaspiBlitz from "../screens/Onboard/ConnectRaspiBlitz";
+import ConnectRaspiBlitz from "../screens/connectors/ConnectRaspiBlitz";
 import ConnectUmbrel from "../screens/connectors/ConnectUmbrel";
 import ConnectStart9 from "../screens/connectors/ConnectStart9";
 import ConnectMyNode from "../screens/connectors/ConnectMyNode";
diff --git a/src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx b/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
similarity index 100%
rename from src/app/screens/Onboard/ConnectRaspiBlitz/index.tsx
rename to src/app/screens/connectors/ConnectRaspiBlitz/index.tsx

From 0c901b165ca45cb38207112e6f6b92aa01a33d0d Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Wed, 13 Apr 2022 18:08:21 -0600
Subject: [PATCH 15/16] refactor: add url variable instead of event

---
 src/app/screens/connectors/ConnectRaspiBlitz/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx b/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
index f0bb2342b2..e31b7f8ced 100644
--- a/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
@@ -17,7 +17,7 @@ export default function ConnectRaspiBlitz() {
 
   function handleUrl(event: React.ChangeEvent<HTMLInputElement>) {
     let url = event.target.value.trim();
-    if (event.target.value.substring(0, 4) !== "http") {
+    if (url.substring(0, 4) !== "http") {
       url = `https://${url}`;
     }
     setFormData({

From 9fb75287049364ecbbf189ea21131f3c201ba71a Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Wed, 13 Apr 2022 18:28:30 -0600
Subject: [PATCH 16/16] refactor: update to use new connectorform component

---
 .../connectors/ConnectRaspiBlitz/index.tsx    | 123 +++++++-----------
 1 file changed, 50 insertions(+), 73 deletions(-)

diff --git a/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx b/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
index e31b7f8ced..1a9e818fb3 100644
--- a/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
+++ b/src/app/screens/connectors/ConnectRaspiBlitz/index.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import utils from "../../../../common/lib/utils";
-import Button from "../../../components/Button";
 import TextField from "../../../components/form/TextField";
 import CompanionDownloadInfo from "../../../components/CompanionDownloadInfo";
+import ConnectorForm from "../../../components/ConnectorForm";
 
 const initialFormData = Object.freeze({
   url: "",
@@ -88,79 +88,56 @@ export default function ConnectRaspiBlitz() {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div className="relative mt-14 lg:flex space-x-8 bg-white dark:bg-gray-800 px-12 py-10">
-        <div className="lg:w-1/2">
-          <h1 className="text-2xl font-bold dark:text-white">
-            Connect to your RaspiBlitz node
-          </h1>
-          <p className="text-gray-500 mt-6 dark:text-gray-400">
-            You need your node onion address, port, and a macaroon with read and
-            send permissions (e.g. admin.macaroon).
-            <br />
-            <br />
-            <b>SSH</b> into your <b>RaspiBlitz</b>.<br />
-            Run the command <b>sudo cat /mnt/hdd/tor/lndrest8080/hostname</b>.
-            <br />
-            Copy and paste the <b>.onion</b> address in the input below.
-            <br />
-            Add your <b>port</b> after the onion address, the default port is{" "}
-            <b>:8080</b>.
-          </p>
-          <div className="w-4/5">
-            <div className="mt-6">
-              <TextField
-                id="url"
-                label="REST API host"
-                placeholder="your-node-onion-address:port"
-                onChange={handleUrl}
-                required
-              />
-            </div>
-            {formData.url.match(/\.onion/i) && <CompanionDownloadInfo />}
-            <div className="mt-6">
-              <p className="mb-6 text-gray-500 mt-6 dark:text-gray-400">
-                Select <b>CONNECT</b>.<br />
-                Select <b>EXPORT</b>.<br />
-                Select <b>HEX</b>.<br />
-                Copy the <b>adminMacaroon</b>.<br />
-                Paste the macaroon in the input below.
-              </p>
-              <div>
-                <TextField
-                  id="macaroon"
-                  label="Macaroon (HEX format)"
-                  value={formData.macaroon}
-                  onChange={handleMacaroon}
-                  required
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="mt-16 lg:mt-0 lg:w-1/2">
-          <div className="lg:flex h-full justify-center items-center">
-            <img src="assets/icons/satsymbol.svg" alt="sat" className="w-64" />
-          </div>
-        </div>
-      </div>
-      <div className="my-8 flex space-x-4 justify-center">
-        <Button
-          label="Back"
-          onClick={(e) => {
-            e.preventDefault();
-            navigate(-1);
-            return false;
-          }}
-        />
-        <Button
-          type="submit"
-          label="Continue"
-          primary
-          loading={loading}
-          disabled={formData.url === "" || formData.macaroon === ""}
+    <ConnectorForm
+      title="Connect to your RaspiBlitz node"
+      description={
+        <p>
+          You need your node onion address, port, and a macaroon with read and
+          send permissions (e.g. admin.macaroon).
+          <br />
+          <br />
+          <strong>SSH</strong> into your <strong>RaspiBlitz</strong>.<br />
+          Run the command{" "}
+          <strong>sudo cat /mnt/hdd/tor/lndrest8080/hostname</strong>.
+          <br />
+          Copy and paste the <strong>.onion</strong> address in the input below.
+          <br />
+          Add your <strong>port</strong> after the onion address, the default
+          port is <strong>:8080</strong>.
+        </p>
+      }
+      submitLoading={loading}
+      submitDisabled={formData.url === "" || formData.macaroon === ""}
+      onSubmit={handleSubmit}
+    >
+      <div className="mt-6">
+        <TextField
+          id="url"
+          label="REST API host"
+          placeholder="your-node-onion-address:port"
+          onChange={handleUrl}
+          required
         />
       </div>
-    </form>
+      {formData.url.match(/\.onion/i) && <CompanionDownloadInfo />}
+      <div className="mt-6">
+        <p className="mb-6 text-gray-500 mt-6 dark:text-gray-400">
+          Select <b>CONNECT</b>.<br />
+          Select <b>EXPORT</b>.<br />
+          Select <b>HEX</b>.<br />
+          Copy the <b>adminMacaroon</b>.<br />
+          Paste the macaroon in the input below.
+        </p>
+        <div>
+          <TextField
+            id="macaroon"
+            label="Macaroon (HEX format)"
+            value={formData.macaroon}
+            onChange={handleMacaroon}
+            required
+          />
+        </div>
+      </div>
+    </ConnectorForm>
   );
 }