feat: add settings page to config walletshield listen address

Author: xendarboh

src/App.tsx

@@ -3,8 +3,8 @@ import { MemoryRouter, Route, Routes } from "react-router";
 import * as app from "@tauri-apps/api/app";
 import * as log from "@tauri-apps/plugin-log";
 import { arch, platform } from "@tauri-apps/plugin-os";
-import { Networks } from "./pages";
 import { Footer, Header, Message } from "./components";
+import { Networks, Settings } from "./pages";
 import { useStore } from "./store";
 import { getNetworks, getPlatformArch } from "./utils";
 import "./App.css";
@@ -42,6 +42,7 @@ function App() {
         <main className="flex-grow mt-10">
           <Routes>
             <Route path="/" element={<Networks />} />
+            <Route path="/settings" element={<Settings />} />
           </Routes>
         </main>
         <Message />

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import { Link } from "react-router";
-import { IconBars3, IconGlobe } from ".";
+import { IconBars3, IconCog, IconGlobe } from ".";
 import { useStore } from "../store";
 
 export function Header() {
@@ -63,6 +63,7 @@ export function Header() {
         ></label>
         <ul className="menu bg-base-200 text-base-content min-h-full w-40 p-4">
           <NavItem to="/" label="Networks" icon={<IconGlobe />} />
+          <NavItem to="/settings" label="Settings" icon={<IconCog />} />
         </ul>
       </div>
     </div>

src/pages/Networks.tsx

@@ -19,6 +19,9 @@ export function Networks() {
   const networkConnected = useStore((s) => s.networkConnected);
   const networks = useStore((s) => s.networks);
   const platformArch = useStore((s) => s.platformArch);
+  const walletshieldListenAddress = useStore(
+    (s) => s.walletshieldListenAddress,
+  );
 
   const setClientPid = useStore((s) => s.setClientPid);
   const setIsConnected = useStore((s) => s.setIsConnected);
@@ -141,7 +144,8 @@ export function Networks() {
     ////////////////////////////////////////////////////////////////////////
     setMessage("info", "Starting network client...");
     const cmd = "walletshield";
-    const args = ["-listen", ":7070", "-config", "client.toml"];
+    const listen = walletshieldListenAddress ?? ":7070";
+    const args = ["-listen", listen, "-config", "client.toml"];
     const command = Command.create("walletshield-listen", args, {
       cwd: dirNetwork,
       env: {

src/pages/Settings.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { useStore } from "../store";
+
+export function Settings() {
+  const [listenAddress, setListenAddress] = useState("");
+
+  const walletshieldListenAddress = useStore(
+    (s) => s.walletshieldListenAddress,
+  );
+
+  const setMessage = useStore((s) => s.setMessage);
+  const setWalletshieldListenAddress = useStore(
+    (s) => s.setWalletshieldListenAddress,
+  );
+
+  useEffect(() => {
+    setListenAddress(walletshieldListenAddress);
+  }, []);
+
+  const handleReset = () => {
+    setListenAddress("");
+    setWalletshieldListenAddress("");
+    setMessage("success", "Settings reset to default.");
+  };
+
+  const handleApply = () => {
+    setWalletshieldListenAddress(listenAddress);
+    setMessage("success", "Settings saved.");
+  };
+
+  return (
+    <div className="flex flex-col items-center h-full">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleApply();
+        }}
+      >
+        <fieldset className="fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
+          <legend className="fieldset-legend">Walletshield</legend>
+
+          <label className="fieldset-label">Listen Address &amp; Port</label>
+          <input
+            type="text"
+            className="input validator"
+            placeholder=":7070"
+            value={listenAddress}
+            onChange={(e) => setListenAddress(e.target.value)}
+            pattern="^((\d{1,3}\.){3}\d{1,3}|[a-zA-Z0-9.-]+)?:(\d{1,5})$"
+            required
+          />
+          <p className="fieldset-label">
+            Where the Walletshield listens for connections.
+          </p>
+        </fieldset>
+        <div className="flex w-full h-full gap-4 p-4">
+          <div className="tooltip flex-1" data-tip="Restore Defaults">
+            <button
+              type="button"
+              className="btn btn-secondary w-full"
+              onClick={handleReset}
+            >
+              Reset
+            </button>
+          </div>
+          <div className="tooltip flex-1" data-tip="Save Settings">
+            <button type="submit" className="btn btn-primary w-full">
+              Apply
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

src/pages/index.ts

@@ -1 +1,2 @@
 export { Networks } from "./Networks";
+export { Settings } from "./Settings";

src/store/index.ts

@@ -13,6 +13,7 @@ export const useStore = create(
       networkConnected: "",
       networks: [] as string[],
       platformArch: "",
+      walletshieldListenAddress: "",
     },
     (set) => ({
       setAppVersion: (appVersion: string) => set({ appVersion }),
@@ -28,6 +29,8 @@ export const useStore = create(
         set({ networkConnected }),
       setNetworks: (networks: string[]) => set({ networks }),
       setPlatformArch: (platformArch: string) => set({ platformArch }),
+      setWalletshieldListenAddress: (walletshieldListenAddress: string) =>
+        set({ walletshieldListenAddress }),
     }),
   ),
 );