feat: Add WalletShield page with RPC endpoints

Author: xendarboh

src/App.tsx

@@ -4,7 +4,7 @@ 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 { Footer, Header, Message } from "./components";
-import { Networks, Settings } from "./pages";
+import { Networks, Settings, WalletShield } from "./pages";
 import { useStore } from "./store";
 import { getNetworks, getPlatformArch } from "./utils";
 import "./App.css";
@@ -43,6 +43,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Networks />} />
             <Route path="/settings" element={<Settings />} />
+            <Route path="/walletshield" element={<WalletShield />} />
           </Routes>
           <Message />
         </main>

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import { Link } from "react-router";
-import { IconBars3, IconCog, IconGlobe } from ".";
+import { IconBars3, IconCog, IconGlobe, IconShieldCheck } from ".";
 import { useStore } from "../store";
 
 export function Header() {
@@ -64,6 +64,11 @@ export function Header() {
         <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 />} />
+          <NavItem
+            to="/walletshield"
+            label="WalletShield"
+            icon={<IconShieldCheck />}
+          />
         </ul>
       </div>
     </div>

src/components/RPCEndpoints.tsx

@@ -0,0 +1,117 @@
+import { useState, useMemo, useEffect } from "react";
+import { useStore } from "../store";
+import * as log from "@tauri-apps/plugin-log";
+import {
+  defaultWalletshieldListenAddress,
+  NetworkServices,
+  readNetworkAssetFile,
+} from "../utils";
+
+export function RPCEndpoints() {
+  const [includeTestnets, setIncludeTestnets] = useState(true);
+  const [search, setSearch] = useState("");
+  const [services, setServices] = useState<NetworkServices | null>();
+
+  const networkConnected = useStore((s) => s.networkConnected);
+  const setMessage = useStore((s) => s.setMessage);
+
+  const walletshieldListenAddress = useStore(
+    (s) => s.walletshieldListenAddress,
+  );
+  const wla = walletshieldListenAddress || defaultWalletshieldListenAddress;
+  const BASE_URL = `http://localhost${wla}`;
+
+  useEffect(() => {
+    try {
+      (async () => {
+        // read services file of the connected network
+        if (networkConnected) {
+          const f = await readNetworkAssetFile(
+            networkConnected,
+            "services.json",
+          );
+          const s = JSON.parse(f) as NetworkServices;
+          setServices(s);
+        }
+      })();
+    } catch (error: any) {
+      log.error(`${error}`);
+      setMessage("error", `${error}`);
+    }
+  }, []);
+
+  const filtered = useMemo(() => {
+    if (!services) return [];
+    const endpoints = services.RPCEndpoints;
+    return endpoints
+      .filter((n) => includeTestnets || !n.isTestnet)
+      .filter((n) => {
+        const term = search.toLowerCase();
+        return (
+          n.chain.toLowerCase().includes(term) ||
+          n.network.toLowerCase().includes(term)
+        );
+      });
+  }, [includeTestnets, search, services]);
+
+  if (!networkConnected) {
+    return (
+      <div className="p-4 flex justify-center">
+        <div className="alert alert-warning shadow-lg">
+          <span>Connect to a network to see its supported RPC endpoints.</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4 space-y-2 md:space-y-0">
+        <div className="form-control flex flex-row gap-x-4">
+          <label className="label">
+            <span className="label-text">Search Networks</span>
+          </label>
+          <input
+            type="text"
+            placeholder="Search..."
+            className="input input-bordered"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          <label className="label cursor-pointer">
+            <span className="label-text">Include Testnets</span>
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary"
+              checked={includeTestnets}
+              onChange={(e) => setIncludeTestnets(e.target.checked)}
+            />
+          </label>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="table w-full table-zebra">
+          <thead>
+            <tr>
+              <th>Chain</th>
+              <th>Network</th>
+              <th>ChainID</th>
+              <th>RPC URL</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((n, idx) => (
+              <tr key={idx}>
+                <td>{n.chain}</td>
+                <td>{n.network}</td>
+                <td>{n.chainId ?? ""}</td>
+                <td>{`${BASE_URL}${n.rpcPath}`}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/index.ts

@@ -1,5 +1,6 @@
 export { Footer } from "./Footer";
 export { Header } from "./Header";
 export { Message } from "./Message";
+export { RPCEndpoints } from "./RPCEndpoints";
 
 export * from "./icons.tsx";

src/pages/WalletShield.tsx

@@ -0,0 +1,18 @@
+import { RPCEndpoints } from "../components";
+
+export function WalletShield() {
+  return (
+    <div className="tabs tabs-border">
+      <input
+        type="radio"
+        name="tabs_1"
+        className="tab"
+        aria-label="RPC Endpoints"
+        defaultChecked
+      />
+      <div className="tab-content border-base-300 bg-base-100">
+        <RPCEndpoints />
+      </div>
+    </div>
+  );
+}

src/pages/index.ts

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