added more asset conversion UI

css/main.css

@@ -1659,10 +1659,22 @@ fieldset legend {
   fill: var(--danger-color);
 }
 
-#conversion_loading_status {
+#conversion_status {
   padding-bottom: 1.5rem;
 }
 
+.amount-option {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  cursor: pointer;
+  accent-color: var(--accent-color);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
 @media screen and (max-width: 40rem) {
   #home.is-sub-admin {
     align-content: flex-start;

css/main.scss

@@ -1545,9 +1545,20 @@ fieldset {
     fill: var(--danger-color);
   }
 }
-#conversion_loading_status {
+#conversion_status {
   padding-bottom: 1.5rem;
 }
+.amount-option {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  cursor: pointer;
+  accent-color: var(--accent-color);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
 @media screen and (max-width: 40rem) {
   #home {
     &.is-sub-admin {

index.html

@@ -1267,28 +1267,8 @@
                 </svg>
             </button>
         </header>
-        <sm-form id="conversion_form" class="hidden">
+        <sm-form id="conversion_form" class="hidden"></sm-form>
-            <div class="grid gap-0-5">
+        <div id="conversion_status" class="grid gap-1 justify-center text-center"> </div>
-                <h3 id="convert_asset_title"></h3>
-                <p id="convert_asset_description"></p>
-            </div>
-            <sm-input id="conversion_amount" type="number" placeholder="Amount" autofocus animate required>
-                <div id="conversion_asset_icon" slot="icon"></div>
-            </sm-input>
-            <div class="flex align-center space-between">
-                You'll get:
-                <h4 id="converted_amount">0</h4>
-            </div>
-            <div class="flex align-center space-between">
-                Exchange rate:
-                <h4 id="conversion_rate"></h4>
-            </div>
-            <div class="multi-state-button">
-                <button id="convert_asset" type="submit" class="button button--primary cta w-100"
-                    onclick="convertAsset()" disabled>Convert</button>
-            </div>
-        </sm-form>
-        <div id="conversion_loading_status" class="grid gap-1 justify-center text-center"> </div>
     </sm-popup>
     <sm-popup id="change_cashier_upi_popup">
         <header slot="header" class="popup__header">
@@ -1562,11 +1542,6 @@
                             console.error(error)
                         })
                     refreshBalance()
-                    getExchangeRate().then(rate => {
-                        getRef('conversion_rate').textContent = `1BTC = ${formatAmount(rate.inr)}`;
-                    }).catch(error => {
-                        console.error(error)
-                    })
                     if (floGlobals.isSubAdmin) {
                         cashierUI.renderRequests(Cashier.Requests);
                         Cashier.init().then(result => {
@@ -1731,6 +1706,8 @@
                     getRef('select_withdraw_upi_id').parentNode.classList.add('hidden')
                     showChildElement('withdraw_wallet_process', 0)
                     break;
+                case 'convert_asset_popup':
+                    break
                 case 'external_transfer_popup':
                     showChildElement('external_transfer_process', 0);
                     buttonLoader('external_transfer__button', false);
@@ -4445,40 +4422,42 @@
             usd: `<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="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>`,
             rupee: `<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"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z"/></g></g></svg>`
         }
-        function setCorrectInputParams({ fromAsset, toAsset }) {
+        function convertCurrency(amount) {
-            const convertingTo = fromAsset === 'rupee' ? 'btc' : 'rupee';
-            getRef('conversion_amount').setAttribute('min', fromAsset === 'rupee' ? '10' : '0.00000001');
-            getRef('conversion_amount').setAttribute('step', fromAsset === 'rupee' ? '0.01' : '0.00000001');
-            getRef('conversion_amount').setAttribute('error-text', `Minimum amount is ${fromAsset === 'rupee' ? '₹10' : '0.000001BTC'}`);
-        }
-        getRef('conversion_amount').addEventListener('input', async e => {
-            const fromAmount = parseFloat(e.target.value.trim());
-            const fromAsset = convertingTo === 'btc' ? 'rupee' : 'btc';
             let convertedAmount = 0;
-
+            if (amount && !Number.isNaN(amount)) {
-            if (fromAmount && !Number.isNaN(fromAmount)) {
                 if (convertingTo === 'rupee') {
-                    convertedAmount = parseFloat((fromAmount * globalExchangeRate.inr).toFixed(2));
+                    convertedAmount = parseFloat((amount * globalExchangeRate.inr).toFixed(2));
                 } else {
-                    convertedAmount = parseFloat((fromAmount / globalExchangeRate.inr).toFixed(8))
+                    convertedAmount = parseFloat((amount / globalExchangeRate.inr).toFixed(8))
                 }
             }
+            return convertedAmount;
+        }
+        function handleConversionAmountInput(e) {
+            const fromAmount = parseFloat(e.target.value.trim());
+            const convertedAmount = convertCurrency(fromAmount);
             getRef('converted_amount').textContent = formatAmount(convertedAmount, convertingTo === 'btc' ? 'btc' : 'inr');
             if (e.target.validity.rangeUnderflow)
                 e.target.setAttribute('error-text', `Minimum amount is ${convertingTo === 'btc' ? '₹10' : '0.000001BTC'}`)
             if (e.target.validity.rangeOverflow)
                 e.target.setAttribute('error-text', `You do not have enough ${convertingTo === 'btc' ? 'rupee tokens' : 'BTC'}`)
-        })
+        }
+        function handleConversionAmountSelection(e) {
+            const fromAmount = parseFloat(e.target.value.trim());
+            const convertedAmount = convertCurrency(fromAmount);
+            getRef('converted_amount').textContent = formatAmount(convertedAmount, convertingTo === 'btc' ? 'btc' : 'inr');
+        }
 
         let convertingTo = 'btc';
         async function initConversion(toAsset) {
             try {
                 convertingTo = toAsset;
-                renderElem(getRef('conversion_loading_status'), html`
+                const fromAsset = convertingTo === 'btc' ? 'rupee' : 'btc';
+                renderElem(getRef('conversion_status'), html`
                     <sm-spinner class="justify-self-center"></sm-spinner>
                     <p class="text-center">Checking conversion capability...</p>
                 `)
-                getRef('conversion_loading_status').classList.remove('hidden');
+                getRef('conversion_status').classList.remove('hidden');
                 getRef('conversion_form').classList.add('hidden');
                 openPopup('convert_asset_popup');
                 // get possible conversion values
@@ -4486,51 +4465,113 @@
                     [floExchangeAPI.processCode.CONVERT_MODE_GET]: permissibleBtc,
                     [floExchangeAPI.processCode.CONVERT_MODE_PUT]: permissibleRupee
                 } = await floExchangeAPI.getConvertValues()
+                // const {
+                //     [floExchangeAPI.processCode.CONVERT_MODE_GET]: permissibleBtc,
+                //     [floExchangeAPI.processCode.CONVERT_MODE_PUT]: permissibleRupee
+                // } = { 0: [100, 200, 300], 1: [100, 200, 300] }
                 if (convertingTo === 'btc' && !permissibleBtc || convertingTo === 'rupee' && !permissibleRupee) {
-                    renderElem(getRef('conversion_loading_status'), html`
+                    renderElem(getRef('conversion_status'), html`
                         <svg class="icon justify-self-center error-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
                         <strong>Conversion service not available</strong>
                     `)
                     return
                 }
+                let assetBalance = 0;
+                let title = ''
+                let description = ''
+                let isRange = true;
+                let leastAllowed = 0;
+                let maxAllowed = 0;
+                let step = 0.1;
                 switch (convertingTo) {
                     case 'btc':
+                        assetBalance = await floTokenAPI.getBalance(floGlobals.myFloID)
                         if (Array.isArray(permissibleBtc)) {
-                            console.log(permissibleBtc)
+                            description = `Select the amount of rupee tokens you want to convert to BTC`
+                            isRange = false;
+                            step = 0.00000001;
+                            leastAllowed = Math.min(...permissibleBtc);
                         } else if (permissibleBtc.min) {
                             const { min, max } = permissibleBtc;
+                            description = `Enter the amount of rupee tokens you want to convert to BTC. Minimum amount is ${min} and maximum amount is ${max}`
+                            leastAllowed = min;
+                            maxAllowed = Math.min(max, assetBalance);
                         }
+                        title = `Convert Rupee tokens to BTC`;
                         break;
                     case 'rupee':
+                        assetBalance = await btcOperator.getBalance(floGlobals.myBtcID)
                         if (Array.isArray(permissibleRupee)) {
-                            console.log(permissibleRupee)
+                            description = `Select the amount of BTC you want to convert to rupee tokens`
+                            isRange = false;
+                            step = 0.01;
+                            leastAllowed = Math.min(...permissibleRupee);
                         } else if (permissibleRupee.min) {
                             const { min, max } = permissibleRupee;
+                            description = `Enter the amount of BTC you want to convert to rupee tokens. Minimum amount is ${min} and maximum amount is ${max}`
+                            leastAllowed = min;
+                            maxAllowed = Math.min(max, assetBalance);
                         }
+                        title = `Convert BTC to Rupee tokens`;
                         break;
                 }
-                getRef('conversion_loading_status').classList.add('hidden');
+                if (leastAllowed > assetBalance) {
+                    renderElem(getRef('conversion_status'), html`
+                            <svg class="icon justify-self-center error-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
+                            <strong>
+                                You do not have enough ${convertingTo === 'btc' ? 'Rupee tokens' : 'BTC'} to convert to ${convertingTo.toUpperCase()}. Minimum amount is ${leastAllowed}    
+                            </strong>
+                        `)
+                    return
+                }
+
+                getRef('conversion_status').classList.add('hidden');
                 getRef('conversion_form').classList.remove('hidden');
-                if (toAsset === 'btc') {
+                renderElem(getRef('conversion_form'), html`
-                    getRef('convert_asset_title').textContent = `Convert to BTC`;
+                    <div class="grid gap-0-5">
-                    getRef('convert_asset_description').textContent = 'Enter the amount of rupee tokens you want to convert to BTC';
+                        <h3 id="convert_asset_title">${title}</h3>
-                    getRef('conversion_asset_icon').innerHTML = assetIcons.rupee;
+                        <p id="convert_asset_description">${description}</p>
-                } else {
+                    </div>
-                    getRef('convert_asset_title').textContent = `Convert to Rupee tokens`;
+                    ${isRange ? html`
-                    getRef('convert_asset_description').textContent = 'Enter the amount of BTC you want to convert to rupee tokens';
+                            <sm-input id="conversion_amount" oninput=${handleConversionAmountInput} min=${leastAllowed} max=${maxAllowed} step=${step} type="number" placeholder="Amount" autofocus animate required>
-                    getRef('conversion_asset_icon').innerHTML = assetIcons.btc;
+                                <div id="conversion_asset_icon" slot="icon">
-                }
+                                    ${fromAsset === 'rupee' ?
-                const fromAsset = toAsset === 'btc' ? 'rupee' : 'btc';
+                            html`<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"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z"/></g></g></svg>` :
-                setCorrectInputParams({ fromAsset, toAsset: convertingTo });
+                            html`<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"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <path d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z"> </path> </g> </svg>`
-                getRef('convert_asset_title').textContent = `Convert to ${toAsset}`;
+                        }        
-                getRef('converted_amount').textContent = formatAmount(0, toAsset === 'btc' ? 'btc' : 'inr');
+                                </div>
-                let assetBalance = 0;
+                            </sm-input>
-                if (convertingTo === 'btc') {
+                        `: html`
-                    assetBalance = await floTokenAPI.getBalance(floGlobals.myFloID)
+                            <fieldset class="flex flex-wrap gap-0-3 align-center" onchange=${handleConversionAmountSelection}>
-                } else {
+                                ${(convertingTo === 'btc' ? permissibleBtc : permissibleRupee).map((amount) => html`
-                    assetBalance = await btcOperator.getBalance(floGlobals.myBtcID)
+                                        <label class="amount-option">
-                }
+                                            <input type="radio" name="amount" value="${amount}" required>
-                getRef('conversion_amount').setAttribute('max', assetBalance)
+                                            <span>${amount}</span>
+                                        </label>
+                                    `)
+                        }
+                            </fieldset>
+                        `
+                    }
+                    <p class="flex align-center space-between">
+                        You'll get:
+                        <b id="converted_amount">0</b>
+                    </p>
+                    <p class="flex align-center space-between">
+                        Exchange rate:
+                        <b id="conversion_rate"></b>
+                    </p>
+                    <div class="multi-state-button">
+                        <button id="convert_asset" type="submit" class="button button--primary cta w-100"
+                            onclick="convertAsset()" disabled>Convert</button>
+                    </div>
+                `)
+                getExchangeRate().then(rate => {
+                    document.getElementById('conversion_rate').textContent = `1BTC = ${formatAmount(rate.inr)}`;
+                }).catch(error => {
+                    notify('Could not get exchange rate', 'error')
+                    console.error(error)
+                })
             } catch (e) {
                 console.log(e)
                 notify(`Could not initialize conversion: ${e.message}`, 'error')
@@ -4542,7 +4583,7 @@
                 if (!res) return;
                 buttonLoader('convert_asset', true)
                 const fromAsset = convertingTo === 'btc' ? 'rupee' : 'btc';
-                const fromAmount = parseFloat(getRef('conversion_amount').value.trim());
+                const fromAmount = parseFloat((document.getElementById('conversion_amount') || document.querySelector('.amount-option input:checked')).value.trim());
                 try {
                     let result
                     if (convertingTo === 'btc') {
@@ -4551,9 +4592,21 @@
                         result = floExchangeAPI.convertFromBTC(fromAmount, floGlobals.myBtcID, floGlobals.convertSink, await floDapps.user.private)
                     }
                     console.log(result)
-                    notify('success', 'Conversion successful')
+                    renderElem(getRef('conversion_status'), html`
+                        <svg class="icon justify-self-center success-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L5.51 12.7 4.09 14.11 9 19l12-12-1.41-1.41z"/></svg>
+                        <h3>Conversion successful</h3>
+                        <p>Conversion of ${formatAmount(fromAmount)} ${fromAsset} to ${convertingTo} is in progress. You can check the status of your conversion in the <a href="/transactions">Transactions</a> tab.</p>
+                    `)
                 } catch (e) {
-                    notify('error', `Conversion failed: ${e.message}`)
+                    getRef('conversion_status').classList.remove('hidden');
+                    getRef('conversion_form').classList.add('hidden');
+                    renderElem(getRef('conversion_status'), html`
+                            <svg class="icon justify-self-center error-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
+                            <strong>
+                                <h3>Conversion failed</h3>
+                                <p>${e.message}</p>
+                            </strong>
+                        `)
                     console.log(e)
                 } finally {
                     buttonLoader('convert_asset', false)