From d22acbebb28b5710284bc0a6e053f7078f08d16c Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 14 Aug 2024 16:10:06 +0530
Subject: [PATCH] chore: use alert dialog in debug tools

---
 frontend/src/screens/settings/DebugTools.tsx | 376 ++++++++++++++-----
 1 file changed, 291 insertions(+), 85 deletions(-)

diff --git a/frontend/src/screens/settings/DebugTools.tsx b/frontend/src/screens/settings/DebugTools.tsx
index 8458b882..a62e58fe 100644
--- a/frontend/src/screens/settings/DebugTools.tsx
+++ b/frontend/src/screens/settings/DebugTools.tsx
@@ -1,16 +1,228 @@
-import { useState } from "react";
+import React from "react";
 import { ResetRoutingDataDialogContent } from "src/components/ResetRoutingDataDialogContent";
 import {
   AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   AlertDialogTrigger,
 } from "src/components/ui/alert-dialog";
 import { Button } from "src/components/ui/button";
+import { Input } from "src/components/ui/input";
+import { Label } from "src/components/ui/label";
 import { Textarea } from "src/components/ui/textarea";
+import { useInfo } from "src/hooks/useInfo";
 
 import { request } from "src/utils/request";
 
+type Props = {
+  apiRequest: (
+    endpoint: string,
+    method: string,
+    requestBody?: object
+  ) => Promise<void>;
+  target?: string;
+};
+
+function ProbeInvoiceDialogContent({ apiRequest }: Props) {
+  const [invoice, setInvoice] = React.useState<string>();
+
+  async function onConfirm() {
+    await apiRequest("/api/send-payment-probes", "POST", {
+      invoice: invoice,
+    });
+    setInvoice("");
+  }
+
+  return (
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Probe Invoice</AlertDialogTitle>
+        <AlertDialogDescription className="text-start">
+          <Label htmlFor="invoice" className="block mb-2">
+            Enter Invoice
+          </Label>
+          <Input
+            id="invoice"
+            name="invoice"
+            type="text"
+            placeholder="lnbc...."
+            required
+            autoFocus
+            value={invoice}
+            onChange={(e) => {
+              setInvoice(e.target.value.trim());
+            }}
+          />
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction disabled={!invoice} onClick={onConfirm}>
+          Confirm
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  );
+}
+
+function ProbeKeysendDialogContent({ apiRequest }: Props) {
+  const [amount, setAmount] = React.useState<string>("");
+  const [nodeId, setNodeId] = React.useState<string>("");
+
+  async function onConfirm() {
+    await apiRequest("/api/send-spontaneous-payment-probes", "POST", {
+      amount: (parseInt(amount) || 0) * 1000,
+      nodeId,
+    });
+    setAmount("");
+    setNodeId("");
+  }
+
+  return (
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Probe Keysend</AlertDialogTitle>
+        <AlertDialogDescription className="text-start">
+          <div>
+            <Label htmlFor="amount" className="block mb-2">
+              Enter Amount (sats)
+            </Label>
+            <Input
+              id="amount"
+              name="amount"
+              type="number"
+              min={0}
+              autoFocus
+              value={amount}
+              onChange={(e) => {
+                setAmount(e.target.value.trim());
+              }}
+            />
+          </div>
+          <div className="mt-4">
+            <Label htmlFor="pubkey" className="block mb-2">
+              Enter Node Pubkey
+            </Label>
+            <Input
+              id="pubkey"
+              type="text"
+              value={nodeId}
+              onChange={(e) => {
+                setNodeId(e.target.value.trim());
+              }}
+            />
+          </div>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction
+          disabled={!parseInt(amount) || !nodeId}
+          onClick={onConfirm}
+        >
+          Confirm
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  );
+}
+
+function GetLogsDialogContent({ apiRequest, target }: Props) {
+  const [maxLen, setMaxLen] = React.useState<string>("");
+
+  async function onConfirm() {
+    await apiRequest(`/api/log/${target}?maxLen=${maxLen}`, "GET");
+    setMaxLen("");
+  }
+
+  return (
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle className="capitalize">
+          Get {target} Logs
+        </AlertDialogTitle>
+        <AlertDialogDescription className="text-start">
+          <Label htmlFor="maxLength" className="block mb-2">
+            Enter Max Length (in characters)
+          </Label>
+          <Input
+            id="maxLength"
+            name="maxLength"
+            type="number"
+            required
+            autoFocus
+            min={1}
+            value={maxLen}
+            onChange={(e) => {
+              setMaxLen(e.target.value.trim());
+            }}
+          />
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction disabled={!parseInt(maxLen)} onClick={onConfirm}>
+          Confirm
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  );
+}
+
+function GetNetworkGraphDialogContent({ apiRequest }: Props) {
+  const [nodeIds, setNodeIds] = React.useState<string>("");
+
+  async function onConfirm() {
+    await apiRequest(`/api/node/network-graph?nodeIds=${nodeIds}`, "GET");
+    setNodeIds("");
+  }
+
+  return (
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Get Network Graph</AlertDialogTitle>
+        <AlertDialogDescription className="text-start">
+          <Label htmlFor="nodes" className="block mb-2">
+            Enter Node Pubkeys (separated by commas)
+          </Label>
+          <Input
+            id="nodes"
+            type="text"
+            placeholder="e.g. nodepubkey1,nodepubkey2,nodepubkey3"
+            value={nodeIds}
+            onChange={(e) => {
+              setNodeIds(e.target.value.trim());
+            }}
+          />
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction disabled={!nodeIds} onClick={onConfirm}>
+          Confirm
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  );
+}
+
 export default function DebugTools() {
-  const [apiResponse, setApiResponse] = useState<string>("");
+  const [apiResponse, setApiResponse] = React.useState<string>("");
+  const [dialog, setDialog] = React.useState<
+    | "probeInvoice"
+    | "probeKeysend"
+    | "getAppLogs"
+    | "getNodeLogs"
+    | "getNetworkGraph"
+    | "resetRoutingData"
+  >();
+
+  const { data: info } = useInfo();
 
   async function apiRequest(
     endpoint: string,
@@ -41,98 +253,92 @@ export default function DebugTools() {
 
   return (
     <div>
-      <div className="grid gap-6 m-8 md:grid-cols-2 xl:grid-cols-3">
-        <Button
-          onClick={() => {
-            const invoice = window.prompt("enter invoice");
-            apiRequest("/api/send-payment-probes", "POST", {
-              invoice: invoice,
-            });
-          }}
-        >
-          Probe Invoice
-        </Button>
-        <Button
-          onClick={() => {
-            const amount = window.prompt("Enter amount in sats:");
-            if (amount) {
-              const nodeId = window.prompt("Enter node pubkey:");
-              if (nodeId) {
-                apiRequest("/api/send-spontaneous-payment-probes", "POST", {
-                  amount: parseInt(amount) * 1000,
-                  nodeId,
-                });
-              }
+      <div className="grid gap-6 mb-8 lg:mb-8 md:grid-cols-2 xl:grid-cols-3">
+        <AlertDialog
+          onOpenChange={() => {
+            if (!open) {
+              setDialog(undefined);
             }
           }}
         >
-          Probe Keysend
-        </Button>
-        <Button onClick={() => apiRequest("/api/peers", "GET")}>
-          List Peers
-        </Button>
-        <Button onClick={() => apiRequest("/api/channels", "GET")}>
-          List Channels
-        </Button>
-        <Button
-          onClick={() => {
-            const maxLen = window.prompt("Enter max length (in characters):");
-
-            if (maxLen) {
-              apiRequest(`/api/log/app?maxLen=${maxLen}`, "GET");
-            }
-          }}
-        >
-          Get App Logs
-        </Button>
-        <Button
-          onClick={() => {
-            const maxLen = window.prompt("Enter max length (in characters):");
-
-            if (maxLen) {
-              apiRequest(`/api/log/node?maxLen=${maxLen}`, "GET");
-            }
-          }}
-        >
-          Get Node Logs
-        </Button>
-        <Button
-          onClick={() => {
-            apiRequest(`/api/node/status`, "GET");
-          }}
-        >
-          Get Node Status
-        </Button>
-        <Button
-          onClick={() => {
-            apiRequest(`/api/balances`, "GET");
-          }}
-        >
-          Get Balances
-        </Button>
-        <Button
-          onClick={() => {
-            const nodeIds = window.prompt(
-              "Enter node IDs, comma-separated:",
-              "030a58b8653d32b99200a2334cfe913e51dc7d155aa0116c176657a4f1722677a3,03b65c19de2da9d35895b37e6fa263cefbf8d184e6b61c0713747ebf12409d219f"
-            );
-            if (nodeIds) {
-              apiRequest(`/api/node/network-graph?nodeIds=${nodeIds}`, "GET");
-            }
-          }}
-        >
-          Get Network Graph
-        </Button>
-        <AlertDialog>
+          {info?.backendType === "LDK" && (
+            <AlertDialogTrigger asChild>
+              <Button onClick={() => setDialog("probeInvoice")}>
+                Probe Invoice
+              </Button>
+            </AlertDialogTrigger>
+          )}
+          {info?.backendType === "LDK" && (
+            <AlertDialogTrigger asChild>
+              <Button onClick={() => setDialog("probeKeysend")}>
+                Probe Keysend
+              </Button>
+            </AlertDialogTrigger>
+          )}
+          <Button onClick={() => apiRequest("/api/peers", "GET")}>
+            List Peers
+          </Button>
+          <Button onClick={() => apiRequest("/api/channels", "GET")}>
+            List Channels
+          </Button>
+          <AlertDialogTrigger asChild>
+            <Button onClick={() => setDialog("getAppLogs")}>
+              Get App Logs
+            </Button>
+          </AlertDialogTrigger>
           <AlertDialogTrigger asChild>
-            <Button>Clear Routing Data</Button>
+            <Button onClick={() => setDialog("getNodeLogs")}>
+              Get Node Logs
+            </Button>
           </AlertDialogTrigger>
-          <ResetRoutingDataDialogContent />
+          <Button
+            onClick={() => {
+              apiRequest(`/api/node/status`, "GET");
+            }}
+          >
+            Get Node Status
+          </Button>
+          <Button
+            onClick={() => {
+              apiRequest(`/api/balances`, "GET");
+            }}
+          >
+            Get Balances
+          </Button>
+          <AlertDialogTrigger asChild>
+            <Button onClick={() => setDialog("getNetworkGraph")}>
+              Get Network Graph
+            </Button>
+          </AlertDialogTrigger>
+          {info?.backendType === "LDK" && (
+            <AlertDialogTrigger asChild>
+              <Button onClick={() => setDialog("resetRoutingData")}>
+                Clear Routing Data
+              </Button>
+            </AlertDialogTrigger>
+          )}
+
+          {dialog === "probeInvoice" && (
+            <ProbeInvoiceDialogContent apiRequest={apiRequest} />
+          )}
+          {dialog === "probeKeysend" && (
+            <ProbeKeysendDialogContent apiRequest={apiRequest} />
+          )}
+          {(dialog === "getAppLogs" || dialog === "getNodeLogs") && (
+            <GetLogsDialogContent
+              apiRequest={apiRequest}
+              target={dialog === "getAppLogs" ? "app" : "node"}
+            />
+          )}
+          {dialog === "getNetworkGraph" && (
+            <GetNetworkGraphDialogContent apiRequest={apiRequest} />
+          )}
+          {dialog === "resetRoutingData" && <ResetRoutingDataDialogContent />}
         </AlertDialog>
       </div>
       {apiResponse && (
         <Textarea
-          className="whitespace-pre-wrap break-words font-emoji"
+          className="whitespace-pre-wrap break-words font-mono"
           rows={35}
           value={`API Response: ${apiResponse}`}
         />