frontend built for active wallet and list

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

@@ -12,8 +12,17 @@ function fetchWallets() {
           wallets.forEach(wallet => {
               const walletItem = document.createElement('div');
               walletItem.textContent = wallet;
-              walletItem.classList.add('wallet-item');
-
+              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));
               

app/static/java/setActiveWallet.js

@@ -1,20 +0,0 @@
-// Function to set the active wallet in localStorage
-function setActiveWallet(walletName) {
-    localStorage.setItem('activeWallet', walletName);
-
-    // Optionally, update UI to highlight/select the active wallet
-    // For example, you can add a CSS class to highlight the selected wallet
-    
-    // Send the selected wallet to the backend to set it as active
-    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);
-    });
-}

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>
+    <div id="walletList"></div>
     <script src="{{ url_for('static', filename='java/fetchWallets.js') }}"></script>
-    <script src="{{ url_for('static', filename='java/setActiveWallet.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>