added warning for low FLO balance to user

css/main.css

@@ -72,6 +72,14 @@ strong:not(:last-of-type) {
   margin-bottom: 1.5rem;
 }
 
+.warning {
+  line-height: normal;
+  padding: 1rem;
+  background-color: khaki;
+  border-radius: 1rem;
+  color: rgba(0, 0, 0, 0.8);
+}
+
 a {
   text-decoration: none;
   color: var(--accent-color);

css/main.scss

@@ -68,6 +68,13 @@ strong {
     margin-bottom: 1.5rem;
   }
 }
+.warning {
+  line-height: normal;
+  padding: 1rem;
+  background-color: khaki;
+  border-radius: 1rem;
+  color: rgba(0, 0, 0, 0.8);
+}
 a {
   text-decoration: none;
   color: var(--accent-color);

index.html

@@ -813,6 +813,7 @@
                         </g>
                     </svg>
                 </sm-input>
+                <strong id="low_user_flo_warning" class="warning"></strong>
                 <button class="button button--primary cta" onclick="continueWalletTopup()"
                     type="submit">Continue</button>
             </sm-form>

scripts/components.js

@@ -647,7 +647,7 @@ customElements.define('sm-input',
                 }
                 else if (name === 'type') {
                     if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
-                        this.input.setAttribute('inputmode', 'numeric');
+                        this.input.setAttribute('inputmode', 'decimal');
                     }
                 }
                 else if (name === 'helper-text') {

scripts/fn_ui.js

@@ -680,6 +680,12 @@ function refreshBalance(button) {
     floBlockchainAPI.getBalance(myFloID).then(balance => {
         const [beforeDecimal, afterDecimal = '00'] = String(balance).split('.')
         getRef('flo_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
+        if (balance < floGlobals.settings.user_flo_threshold) {
+            getRef('low_user_flo_warning').textContent = `Your FLO balance is low. You will receive ${floGlobals.settings.send_user_flo} FLO by deducting equivalent rupee tokens.`;
+            getRef('low_user_flo_warning').classList.remove('hide');
+        } else {
+            getRef('low_user_flo_warning').classList.add('hide');
+        }
         if (button)
             buttonLoader(button, false)
     })