diff --git a/app/static/java/activeWalletDisplay.js b/app/static/java/activeWalletDisplay.js new file mode 100644 index 0000000..e45c47a --- /dev/null +++ b/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(); + diff --git a/app/static/java/fetchWallets.js b/app/static/java/fetchWallets.js index e7ccc9b..7ff84f9 100644 --- a/app/static/java/fetchWallets.js +++ b/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)); diff --git a/app/static/java/setActiveWallet.js b/app/static/java/setActiveWallet.js deleted file mode 100644 index 9901bb6..0000000 --- a/app/static/java/setActiveWallet.js +++ /dev/null @@ -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); - }); -} \ No newline at end of file diff --git a/app/static/style/output.css b/app/static/style/output.css index 605d6c7..ffece73 100644 --- a/app/static/style/output.css +++ b/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)); +} diff --git a/app/templates/index.html b/app/templates/index.html index c4943ef..2bd788f 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -85,8 +85,10 @@