add custom page functionality; add electrs page

backend-mock/apps.js

@@ -23,6 +23,21 @@ router.post("/uninstall/:id", (req, res) => {
   res.status(200).send();
 });
 
+router.get("/status_advanced/electrs", (req, res) => {
+  console.info("call to /api/v1/apps/status_advanced/electrs");
+  res.status(200).send(
+    JSON.stringify({
+      version: "v0.10.2",
+      localIP: "192.168.0.1",
+      publicIP: "127.0.0.1",
+      portTCP: "50001",
+      portSSL: "50002",
+      TORaddress: "myTorURL.onion",
+      initialSyncDone: true,
+    }),
+  );
+});
+
 const installApp = () => {
   console.info("call to installApp");
 

backend-mock/sse/installed_app_status.js

@@ -47,6 +47,20 @@ const appStatus = () => {
       status: "offline",
       error: "",
     },
+    {
+      id: "jam",
+      installed: false,
+      version: "v1.0.0",
+      status: "offline",
+      error: "",
+    },
+    {
+      id: "electrs",
+      installed: true,
+      version: "v1.0.0",
+      status: "offline",
+      error: "",
+    },
   ]);
 };
 

src/App.tsx

@@ -13,11 +13,13 @@ import { SetupPhase } from "./models/setup.model";
 import Login from "./pages/Login";
 import { ACCESS_TOKEN, parseJwt, REFRESH_TIME } from "./utils";
 import { instance } from "./utils/interceptor";
+import AppPage from "./pages/Apps/AppPage";
 
 const LazySetup = lazy(() => import("./pages/Setup"));
 const LazyHome = lazy(() => import("./pages/Home"));
 const LazyApps = lazy(() => import("./pages/Apps"));
 const LazySettings = lazy(() => import("./pages/Settings"));
+const LazyAppInfo = lazy(() => import("./pages/Apps/AppInfo"));
 
 const App: FC = () => {
   const [isLoading, setIsLoading] = useState(true);
@@ -140,6 +142,30 @@ const App: FC = () => {
           </Suspense>
         }
       />
+      <Route
+        path="/apps/:appId/info"
+        element={
+          <Suspense fallback={<SkeletonLoadingScreen />}>
+            <RequireAuth>
+              <Layout>
+                <LazyAppInfo />
+              </Layout>
+            </RequireAuth>
+          </Suspense>
+        }
+      />
+      <Route
+        path="/apps/:appId"
+        element={
+          <Suspense fallback={<SkeletonLoadingScreen />}>
+            <RequireAuth>
+              <Layout>
+                <AppPage />
+              </Layout>
+            </RequireAuth>
+          </Suspense>
+        }
+      />
     </Routes>
   );
 };

src/components/AppStatusItem.tsx

@@ -3,20 +3,37 @@ import { getHrefFromApp } from "@/utils";
 import AppIcon from "@/components/AppIcon";
 import { AppStatus } from "@/models/app-status";
 import { availableApps } from "@/utils/availableApps";
+import { useNavigate } from "react-router-dom";
 
 type Props = {
   app: AppStatus;
 };
 
 export const AppStatusItem: FC<Props> = ({ app }) => {
   const { id } = app;
-  const appName = availableApps.get(id)?.name;
+  const navigate = useNavigate();
+  const appName = availableApps[id]!.name;
+  const customComponent = availableApps[id]!.customComponent;
+
+  if (customComponent) {
+    return (
+      <span
+        onClick={() => navigate(`/apps/${id}`)}
+        className="flex w-full cursor-pointer items-center justify-center py-4 opacity-80 hover:text-yellow-500 dark:text-white dark:hover:text-yellow-500 md:flex-col lg:flex-row"
+      >
+        {/* Icon */}
+        <AppIcon appId={id} className="h-19 inline w-10" />
+        {/* Content */}
+        <span className="mx-3 w-1/2 justify-center text-lg">{appName}</span>
+      </span>
+    );
+  }
 
   return (
     <a
       href={getHrefFromApp(app)}
-      target="_blank"
-      rel="noopener noreferrer"
+      target={"_blank"}
+      rel={"noopener noreferrer"}
       className="flex w-full cursor-pointer items-center justify-center py-4 opacity-80 hover:text-yellow-500 dark:text-white dark:hover:text-yellow-500 md:flex-col lg:flex-row"
     >
       {/* Icon */}

src/hooks/use-sse.tsx

@@ -106,7 +106,7 @@ function useSSE() {
     const setInstall = (event: MessageEvent<string>) => {
       toast.dismiss();
       const installAppData = JSON.parse(event.data) as InstallAppData;
-      const appName = availableApps.get(installAppData.id)?.name || "";
+      const appName = availableApps[installAppData.id]?.name || "";
       if (installAppData.result === "fail") {
         appInstallErrorHandler(installAppData, appName);
         sseCtx.setInstallingApp(null);

src/i18n/langs/en.json

@@ -33,6 +33,14 @@
         "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"
       },
+      "electrs": {
+        "about": "Electrs is an efficient re-implementation of Electrum Server in Rust. It indexes the entire Bitcoin blockchain, and allows your Lightning node to query it for on-chain transactions.",
+        "shortDescription": "Efficient re-implementation of Electrum Server in Rust",
+        "initialSync": "The index database needs to be created before Electrum Server can be used. This can take hours / days depending on your RaspiBlitz. Please check back later.",
+        "connectLocal": "Connect to Electrum Server over Local Network",
+        "connectTor": "Connect to Electrum Server over Tor",
+        "connectionInfo": "Use these addresses to connect to ElectRS from your Bitcoin Core node. You can use the local connection if you are on the same network or the Tor address if you are using Tor. You can also use the QR code to connect to ElectRS."
+      },
       "alby": {
         "about": "Alby Browser Extension",
         "shortDescription": "Connect your RaspiBlitz LND node and use Bitcoin & Nostr apps with the Alby Extension",

src/models/app.model.ts

@@ -1,6 +1,10 @@
+import { FC } from "react";
+
 export interface App {
   id: string;
   name: string;
   author: string;
   repository: string;
+  // allow any props
+  customComponent?: FC<any>;
 }

src/pages/Apps/AppCard.tsx

@@ -11,6 +11,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import { Tooltip } from "react-tooltip";
 
 export type Props = {
@@ -19,7 +20,6 @@ export type Props = {
   installed: boolean;
   installingApp: any | null;
   onInstall: (id: string) => void;
-  onOpenDetails: (app: App) => void;
 };
 
 export const AppCard: FC<Props> = ({
@@ -28,11 +28,11 @@ export const AppCard: FC<Props> = ({
   installed,
   installingApp,
   onInstall,
-  onOpenDetails,
 }) => {
   const { id, name } = appInfo;
   const { t } = useTranslation();
   const [isInstallWaiting, setInstallWaiting] = useState(false);
+  const navigate = useNavigate();
 
   useEffect(() => {
     setInstallWaiting(false);
@@ -102,14 +102,23 @@ export const AppCard: FC<Props> = ({
             &nbsp;{t("apps.open")}
           </a>
         )}
-        {installed && !appStatusInfo.address && (
+        {installed && !appStatusInfo.address && !appInfo.customComponent && (
           <button
             disabled={true}
             className="flex w-1/2 cursor-default items-center justify-center rounded bg-gray-400 p-2 text-white shadow-md"
           >
             {t("apps.no_page")}
           </button>
         )}
+        {installed && appInfo.customComponent && (
+          <button
+            onClick={() => navigate(`/apps/${appInfo.id}`)}
+            className="flex w-1/2 items-center justify-center rounded bg-yellow-500 p-2 text-white shadow-md hover:bg-yellow-400"
+          >
+            <ArrowTopRightOnSquareIcon className="inline h-6 w-6" />
+            &nbsp;{t("apps.open")}
+          </button>
+        )}
         {(installingApp === null ||
           installingApp.id !== id ||
           installingApp.result === "fail") &&
@@ -139,7 +148,7 @@ export const AppCard: FC<Props> = ({
           )}
         <button
           className="flex w-1/2 items-center justify-center rounded p-2 shadow-md hover:bg-gray-300 dark:bg-gray-500 dark:hover:bg-gray-300 dark:hover:text-black"
-          onClick={() => onOpenDetails(appInfo)}
+          onClick={() => navigate(`/apps/${appInfo.id}/info`)}
         >
           <InformationCircleIcon className="inline h-6 w-6" />
           &nbsp;{t("apps.info")}