Added balance checking

css/main.css

@@ -24,7 +24,7 @@ body {
   --green: #1cad59;
   --yellow: rgb(220, 165, 0);
   color: rgba(var(--text-color), 1);
-  background-color: rgba(var(--background-color), 1);
+  background-color: rgba(var(--foreground-color), 1);
 }
 
 body[data-theme=dark] {
@@ -121,7 +121,7 @@ button,
   font-weight: 500;
   white-space: nowrap;
   padding: 0.5rem 1rem;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
   justify-content: center;
   flex-shrink: 0;
 }
@@ -769,6 +769,17 @@ main {
   padding: 1.5rem;
 }
 
+.primary-action {
+  padding: 0.8rem;
+  gap: 0.5rem;
+  white-space: normal;
+  font-size: 0.9rem;
+  border-radius: 0.5rem;
+  background-color: transparent;
+  border: thin solid rgba(var(--text-color), 0.3);
+  text-align: start;
+}
+
 #flo_id_warning {
   padding-bottom: 1.5rem;
   border-bottom: thin solid rgba(var(--text-color), 0.3);
@@ -904,14 +915,14 @@ main {
     --width: 28rem;
   }
   main sm-form::part(form) {
-    gap: 0.5rem;
+    gap: 1rem;
     grid-template-columns: 1fr 1fr;
   }
   main sm-form > * {
     align-self: flex-start;
-    background-color: rgba(var(--foreground-color), 1);
+    border-radius: 0.8rem;
-    border-radius: 0.5rem;
+    padding: 1.5rem;
-    padding: 1rem;
+    background-color: rgba(var(--text-color), 0.03);
   }
 }
 @media only screen and (min-width: 1280px) {

css/main.scss

@@ -24,7 +24,7 @@ body {
   --green: #1cad59;
   --yellow: rgb(220, 165, 0);
   color: rgba(var(--text-color), 1);
-  background-color: rgba(var(--background-color), 1);
+  background-color: rgba(var(--foreground-color), 1);
 }
 
 body[data-theme="dark"] {
@@ -107,7 +107,7 @@ button,
   font-weight: 500;
   white-space: nowrap;
   padding: 0.5rem 1rem;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
   justify-content: center;
   flex-shrink: 0;
   &:focus-visible {
@@ -716,6 +716,16 @@ main {
   gap: 1.5rem;
   padding: 1.5rem;
 }
+.primary-action {
+  padding: 0.8rem;
+  gap: 0.5rem;
+  white-space: normal;
+  font-size: 0.9rem;
+  border-radius: 0.5rem;
+  background-color: transparent;
+  border: thin solid rgba(var(--text-color), 0.3);
+  text-align: start;
+}
 #flo_id_warning {
   padding-bottom: 1.5rem;
   border-bottom: thin solid rgba(var(--text-color), 0.3);
@@ -829,14 +839,14 @@ main {
   main {
     sm-form {
       &::part(form) {
-        gap: 0.5rem;
+        gap: 1rem;
         grid-template-columns: 1fr 1fr;
       }
       & > * {
         align-self: flex-start;
-        background-color: rgba(var(--foreground-color), 1);
+        border-radius: 0.8rem;
-        border-radius: 0.5rem;
+        padding: 1.5rem;
-        padding: 1rem;
+        background-color: rgba(var(--text-color), 0.03);
       }
     }
   }

index.html

@@ -27,22 +27,41 @@
             </a>
             <theme-toggle></theme-toggle>
         </header>
-        <menu>
+        <menu class="flex gap-0-5">
             <li>
-                <button class="button button--colored" onclick="openPopup('generate_address_popup')">
+                <button class="button button--colored primary-action" onclick="openPopup('generate_address_popup')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+                    </svg>
                     Create new address
                 </button>
-                <button class="button button--colored" onclick="openPopup('convert_to_taproot_popup')">
+            </li>
-                    Convert to Taproot address
+            <li>
+                <button class="button button--colored primary-action" onclick="openPopup('convert_to_taproot_popup')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" />
+                    </svg>
+                    Convert to Taproot
                 </button>
             </li>
         </menu>
         <h3>
-            Send Transaction
+            Perform Transaction
         </h3>
         <sm-form>
             <div class="flex flex-direction-column gap-0-5">
-                <h4>Sender</h4>
+                <div class="flex space-between align-center">
+                    <h4>Sender</h4>
+                    <button id="check_balance_button" class="button button--small button--colored" disabled
+                        onclick="checkBalance()">
+                        Check balance
+                    </button>
+                </div>
                 <sm-input id="private_key_input" placeholder="Sender's private key" data-private-key
                     class="password-field" type="password" required>
                     <svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
@@ -77,13 +96,15 @@
                         </svg>
                     </label>
                 </sm-input>
+                <div id="sender_balance_container" class="flex align-center gap-0-3 hidden"></div>
             </div>
             <div class="flex flex-direction-column gap-1">
                 <div class="flex flex-direction-column gap-0-5">
                     <h4>Receiver</h4>
                     <sm-input id="receiver_address_input" placeholder="Receiver's address" data-btc-address
                         required></sm-input>
-                    <sm-input id="amount_input" placeholder="Amount" type="number" required>
+                    <sm-input id="amount_input" placeholder="Amount" type="number" step="0.00000001" min="0.0000001"
+                        error-text="Amount should be grater than 0.0000001 BTC" required>
                         <div class="currency-symbol flex" slot="icon">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                 height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
@@ -491,11 +512,46 @@
         ]
     </script>
     <script type="text/javascript">
+        function formatAmount(amount = 0, currency = 'btc') {
+            // check if amount is a string and convert it to a number
+            if (typeof amount === 'string') {
+                amount = parseFloat(amount)
+            }
+            if (!amount)
+                return '0';
+            return amount.toLocaleString(null, { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 8 })
+        }
         function togglePrivateKeyVisibility(input) {
             const target = input.closest('sm-input')
             target.type = target.type === 'password' ? 'text' : 'password';
             target.focusIn()
         }
+        function checkBalance() {
+            const wif = getRef('private_key_input').value.trim()
+            if (!wif)
+                return notify(`Please enter sender's private key to check balance`)
+            getRef('sender_balance_container').classList.remove('hidden')
+            renderElem(getRef('sender_balance_container'), html`
+                Loading balance...<sm-spinner></sm-spinner>
+            `)
+            const { tr: { address } } = getTaprootAddress(wif)
+            btcOperator.getBalance(address).then(balance => {
+                console.log(balance)
+                renderElem(getRef('sender_balance_container'), html`
+                    Balance: <b>${formatAmount(balance)}</b>
+                `)
+            }).catch(err => {
+                notify(e, 'error')
+            })
+        }
+        getRef('private_key_input').addEventListener('input', e => {
+            if (!e.target.isValid) {
+                getRef('sender_balance_container').classList.add('hidden')
+                getRef('check_balance_button').disabled = true
+            } else {
+                getRef('check_balance_button').disabled = false
+            }
+        })
         getRef('convert_to_taproot_form').addEventListener('invalid', () => {
             if (!document.startViewTransition) {
                 getRef('converted_address_wrapper').classList.add('hidden')