frontend built for active wallet and list

app/app.py

@@ -10,6 +10,38 @@ app = Flask(__name__, static_folder="static")
 def show_wallet_form():
     return render_template("index.html")
 
+# Route to get the current RPC configuration
+@app.route("/get_rpc_config", methods=["GET"])
+def get_rpc_config():
+    return jsonify(
+        {
+            "rpcHost": request.cookies.get("rpcHost"),
+            "rpcPort": request.cookies.get("rpcPort"),
+            "rpcUser": request.cookies.get("rpcUser"),
+            "rpcPassword": request.cookies.get("rpcPassword"),
+        }
+    )
+
+
+# Route to update the RPC configuration
+@app.route("/update_rpc_config", methods=["POST"])
+def update_rpc_config():
+    try:
+        # Extract RPC config from the POST request
+        rpc_host = request.form["rpcHost"]
+        rpc_port = request.form["rpcPort"]
+        rpc_user = request.form["rpcUser"]
+        rpc_password = request.form["rpcPassword"]
+
+        # Update localStorage with the new values
+        response = jsonify({"message": "RPC configuration updated successfully."})
+        response.set_cookie("rpcHost", value=rpc_host)
+        response.set_cookie("rpcPort", value=rpc_port)
+        response.set_cookie("rpcUser", value=rpc_user)
+        response.set_cookie("rpcPassword", value=rpc_password)
+        return response
+    except Exception as e:
+        return jsonify({"message": f"Error updating RPC configuration: {str(e)}"})
 
 @app.route("/create_wallet", methods=["POST"])
 def handle_create_wallet():
@@ -50,41 +82,12 @@ def list_wallets():
         error_message = "An Exception occurred: " + str(general_exception)
         return jsonify({"error": error_message})  # Return JSON error response
 
+@app.route("/set_active_wallet", methods=["POST"])
+def set_active_wallet():
+    wallet_name = request.form["walletName"]
+    return jsonify({"message": f"Active wallet set to '{wallet_name}'."})
 
-
-# Route to get the current RPC configuration
-@app.route("/get_rpc_config", methods=["GET"])
-def get_rpc_config():
-    return jsonify(
-        {
-            "rpcHost": request.cookies.get("rpcHost"),
-            "rpcPort": request.cookies.get("rpcPort"),
-            "rpcUser": request.cookies.get("rpcUser"),
-            "rpcPassword": request.cookies.get("rpcPassword"),
-        }
-    )
-
-
-# Route to update the RPC configuration
-@app.route("/update_rpc_config", methods=["POST"])
-def update_rpc_config():
-    try:
-        # Extract RPC config from the POST request
-        rpc_host = request.form["rpcHost"]
-        rpc_port = request.form["rpcPort"]
-        rpc_user = request.form["rpcUser"]
-        rpc_password = request.form["rpcPassword"]
-
-        # Update localStorage with the new values
-        response = jsonify({"message": "RPC configuration updated successfully."})
-        response.set_cookie("rpcHost", value=rpc_host)
-        response.set_cookie("rpcPort", value=rpc_port)
-        response.set_cookie("rpcUser", value=rpc_user)
-        response.set_cookie("rpcPassword", value=rpc_password)
-        return response
-    except Exception as e:
-        return jsonify({"message": f"Error updating RPC configuration: {str(e)}"})
-
+active_wallet = {}  # Store active wallets in memory
 
 if __name__ == "__main__":
     app.run(debug=True)

app/static/java/activeWalletDisplay.js

@@ -0,0 +1,31 @@
+// Assuming you have a variable that holds the active wallet
+let activeWallet = ''; // Replace this with your active wallet variable
+
+
+function setActiveWallet(walletName) {
+  activeWallet = walletName; // Update the activeWallet variable with the clicked wallet
+  updateActiveWalletDisplay(); // Update the displayed content
+
+  localStorage.setItem('activeWallet', walletName);
+
+  fetch('/set_active_wallet', {
+    method: 'POST',
+    body: new URLSearchParams({ walletName })
+})
+.then(response => response.json())
+.then(data => {
+    console.log(data.message); // Log success message from the backend
+})
+.catch(error => {
+    console.error('Error:', error);
+});
+}
+
+function updateActiveWalletDisplay() {
+  const activeWalletDisplay = document.getElementById('activeWalletDisplay');
+  activeWalletDisplay.textContent = `Active Wallet: ${activeWallet}`;
+}
+
+// Call the function to initially update the display
+updateActiveWalletDisplay();
+

app/static/java/fetchWallets.js

@@ -0,0 +1,38 @@
+// Function to fetch wallets and display them
+function fetchWallets() {
+  fetch('/wallets')
+      .then(response => response.json())
+      .then(data => {
+          const wallets = data.wallets;
+
+          // Display wallets in the frontend (e.g., as a list or dropdown)
+          const walletsList = document.getElementById('walletList');
+          walletsList.innerHTML = '';
+
+          wallets.forEach(wallet => {
+              const walletItem = document.createElement('div');
+              walletItem.textContent = wallet;
+              walletItem.classList.add(
+                'p-1', // Padding
+                'm-1', // Margin bottom
+                'cursor-pointer', // Cursor style
+                'hover:bg-blue-300', // Hover background color (change to suit your preference)
+                'w-fit',
+                'bg-blue-400',
+                'rounded-md',
+                'ml-2'
+              );
+            
+              // Add event listener to set the wallet as active on click
+              walletItem.addEventListener('click', () => setActiveWallet(wallet));
+              
+              walletsList.appendChild(walletItem);
+          });
+      })
+      .catch(error => {
+          console.error('Error:', error);
+      });
+}
+
+// Call fetchWallets function on page load to get and display wallets
+document.addEventListener('DOMContentLoaded', fetchWallets);

app/static/java/walletFormResponse.js

@@ -14,4 +14,4 @@ document.getElementById('walletForm').addEventListener('submit', function(event)
     .catch(error => {
         console.error('Error:', error);
     });
-});
+});

app/static/java/walletList.js

@@ -1,21 +0,0 @@
-window.onload = function () {
-    fetch("/wallets")
-      .then((response) => response.json())
-      .then((data) => {
-        const walletList = document.getElementById("walletList");
-        if (data.wallets && data.wallets.length > 0) {
-          const wallets = data.wallets;
-          const walletsHTML = wallets
-            .map((wallet) => `<p>${wallet}</p>`)
-            .join("");
-          walletList.innerHTML = walletsHTML;
-        } else {
-          walletList.innerHTML = "<p>No wallets found.</p>";
-        }
-      })
-      .catch((error) => {
-        console.error("Error fetching wallet list:", error);
-        const walletList = document.getElementById("walletList");
-        walletList.innerHTML = "<p>Error fetching wallets.</p>";
-      });
-  };

app/static/style/output.css

@@ -544,6 +544,14 @@ video {
   position: static;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -560,10 +568,27 @@ video {
   margin-top: 1.5rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -579,10 +604,29 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -619,3 +663,13 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(127 29 29 / var(--tw-bg-opacity));
 }
+
+.hover\:bg-blue-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}

app/templates/index.html

@@ -85,8 +85,10 @@
     <script src="{{ url_for('static', filename='java/rpcResult.js') }}"></script>
 
     <h1 class="mt-6 mb-4 ml-2 text-xl font-bold">Available Wallets</h1>
-    <div id="walletList" class="ml-4"></div>
-    <script src="{{ url_for('static', filename='java/walletList.js') }}"></script>
+    <div id="walletList"></div>
+    <script src="{{ url_for('static', filename='java/fetchWallets.js') }}"></script>
+    <div id="activeWalletDisplay" class="p-1 m-2 font-bold bg-green-600 rounded-md w-fit"></div>
+    <script src="{{ url_for('static', filename='java/activeWalletDisplay.js') }}"></script>
 
   </body>
 </html>