Added better amount validation

index.html

@@ -241,8 +241,8 @@
                                         </svg>
                                     </label>
                                 </sm-input>
-                                <sm-input id="priv_key_bech32" placeholder="BTC address" data-btc-address
+                                <sm-input id="priv_key_bech32" placeholder="BTC address" data-btc-address animate
-                                    error-text="Invalid BTC address" animate required></sm-input>
+                                    required></sm-input>
                             </div>
                         </div>
                         <div class="grid gap-1">
@@ -333,8 +333,7 @@
                             </div>
                             <sm-form id="convert_btc_address_form" class="flex">
                                 <div class="input-action-wrapper">
-                                    <sm-input id="convert_btc_input" placeholder="BTC Address" data-btc-address
+                                    <sm-input id="convert_btc_input" placeholder="BTC Address" data-btc-address animate
-                                        error-text="Invalid BTC address. It usually starts with 'b'" animate
                                         required></sm-input>
                                     <button id="convert_to_flo" class="button--primary justify-self-center cta"
                                         type="submit">
@@ -509,8 +508,7 @@
     </sm-popup>
     <template id="sender_template">
         <fieldset class="sender-card card">
-            <sm-input class="sender-input" placeholder="Sender address" data-btc-address
+            <sm-input class="sender-input" placeholder="Sender address" animate required></sm-input>
-                error-text="Invalid BTC address" animate required></sm-input>
             <sm-input class="priv-key-input password-field" type="password" placeholder="Private Key" animate required>
                 <svg class="icon" slot="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">
@@ -566,11 +564,11 @@
     </template>
     <template id="receiver_template">
         <fieldset class="card receiver-card">
-            <sm-input class="receiver-input" placeholder="Receiver address" data-btc-address
+            <sm-input class="receiver-input" placeholder="Receiver address" data-btc-address animate
-                error-text="Invalid BTC address" animate required></sm-input>
+                required></sm-input>
             <div class="flex align-content-start gap-0-5 remove-card-wrapper">
-                <sm-input type="number" class="amount-input amount-shown" placeholder="Amount" min="0.00000001"
+                <sm-input type="number" class="amount-input amount-shown" placeholder="Amount" min="0.000006"
-                    step="0.00000001" error-text="Invalid amount" animate required>
+                    step="0.00000001" animate required>
                     <div class="currency-symbol flex" slot="icon"></div>
                 </sm-input>
                 <button class="remove-card button--small">
@@ -782,14 +780,7 @@
                 notify('Browser is not fully compatible, some features may not work. for best experience please use Chrome, Edge, Firefox or Safari', 'error')
             }
             document.body.classList.remove('hidden')
-            document.querySelectorAll('sm-input[data-btc-address]').forEach(input => input.customValidation = (value) => { return { isValid: btcOperator.validateAddress(value) } })
             document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = (value) => { return { isValid: floCrypto.validateFloID(value) } })
-            document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = (value) => {
-                return {
-                    isValid: floCrypto.getPubKeyHex(value),
-                    errorText: `Invalid private key. It's a long string of random characters usually starting with 'L' or 'R'.`
-                }
-            })
             document.addEventListener('keyup', (e) => {
                 if (e.key === 'Escape') {
                     closePopup()
@@ -1264,6 +1255,54 @@
         }
     </script>
     <script>
+        window.smCompConfig = {
+            'sm-input': [
+                {
+                    selector: '[data-btc-address]',
+                    customValidation: (value) => {
+                        if (!value) return { isValid: false, errorText: 'Please enter a BTC address' }
+                        return {
+                            isValid: btcOperator.validateAddress(value),
+                            errorText: `Invalid address.<br> It usually starts with "1", "3" or "bc1"`
+                        }
+                    }
+                },
+                {
+                    selector: '.sender-input',
+                    customValidation: (value) => {
+                        if (!value) return { isValid: false, errorText: 'Please enter a BTC address' }
+                        const validate = btcOperator.validateAddress(value)
+                        const isValid = !(validate === false || validate === 'bech32m')
+                        return { isValid, errorText: validate === 'bech32m' ? `This is a Taproot address. This wallet does't support claiming Taproot funds yet.` : 'Please enter valid BTC address' }
+                    }
+                },
+                {
+                    selector: '[data-private-key]',
+                    customValidation: (value) => {
+                        if (!value) return { isValid: false, errorText: 'Please enter a private key' }
+                        return {
+                            isValid: floCrypto.getPubKeyHex(value),
+                            errorText: `Invalid private key.<br> It usually starts with "L" or "R"`
+                        }
+                    }
+                },
+                {
+                    selector: '.amount-input',
+                    customValidation: (value) => {
+                        if (!value) return { isValid: false, errorText: 'Please enter an amount' }
+                        const minValidAmount = {
+                            btc: 0.000006,
+                            inr: roundUp(0.000006 * globalExchangeRate.inr, 2),
+                            usd: roundUp(0.000006 * globalExchangeRate.usd, 2),
+                        }
+                        return {
+                            isValid: parseFloat(value) >= minValidAmount[selectedCurrency],
+                            errorText: `Amount must be greater than ${formatAmount(minValidAmount[selectedCurrency])} ${selectedCurrency.toUpperCase()}`
+                        }
+                    }
+                }
+            ]
+        }
         let transactionsLazyLoader
         let txDetailsAbortController
         const render = {
@@ -1511,7 +1550,7 @@
             }
             if (!amount)
                 return '0';
-            return amount.toLocaleString(undefined, { style: 'currency', currency: selectedCurrency, maximumFractionDigits: selectedCurrency === 'btc' ? 8 : 2 })
+            return amount.toLocaleString(undefined, { style: 'currency', currency: selectedCurrency, minimumFractionDigits: 0, maximumFractionDigits: 8 })
         }
         let globalExchangeRate = {}
         async function getExchangeRate() {
@@ -1567,6 +1606,7 @@
                             break;
                     }
                     el.value = convertedAmount
+                    el.isValid // trigger validation
                 } else {
                     if (el.dataset.btcAmount === undefined) return
                     el.textContent = formatAmount(getConvertedAmount(el.dataset.btcAmount))
@@ -1727,11 +1767,6 @@
                 senderCard.querySelector('.remove-card').remove()
             }
             getRef('sender_container').appendChild(senderCard);
-            getRef('sender_container').querySelectorAll('sm-input[data-btc-address]').forEach(input => input.customValidation = (value) => {
-                const validate = btcOperator.validateAddress(value)
-                const isValid = !(validate === false || validate === 'bech32m')
-                return { isValid, errorText: validate === 'bech32m' ? `This is a Taproot address. This wallet does't support claiming Taproot funds yet.` : 'Please enter valid BTC address' }
-            })
             if (address) {
                 getRef('sender_container').lastElementChild.querySelector('.sender-input').value = address
             }
@@ -1776,7 +1811,6 @@
             }
             receiverCard.querySelector('.currency-symbol') ? receiverCard.querySelector('.currency-symbol').innerHTML = currencyIcons[selectedCurrency] : null;
             getRef('receiver_container').appendChild(receiverCard);
-            getRef('receiver_container').querySelectorAll('sm-input[data-btc-address]').forEach(input => input.customValidation = (value) => { return { isValid: btcOperator.validateAddress(value) } })
             if (address) {
                 getRef('receiver_container').lastElementChild.querySelector('.receiver-input').value = address
             }

scripts/btcOperator.js

@@ -792,7 +792,6 @@
     btcOperator.sendTx = function (senders, privkeys, receivers, amounts, fee = null, options = {}) {
         return new Promise((resolve, reject) => {
             createSignedTx(senders, privkeys, receivers, amounts, fee, options).then(result => {
-                // debugger;
                 broadcastTx(result.transaction.serialize())
                     .then(txid => resolve(txid))
                     .catch(error => reject(error));