In-game crypto offfer validation (#2451)

* Validate in-game stake amount

* checkbox checked by default

lib/saito/browser.ts

@@ -2460,6 +2460,33 @@ class Browser {
 			inputType
 		)
 	}
+
+	validateAmountLimit(amount, event){
+      // prevent user for adding number gretaer than 10^9 to input
+      if (amount > 1000000000) {
+        if (!isNaN(event.key)) {
+          event.preventDefault();
+          return false;
+        }
+      }
+
+      // prevent user for adding more than 8 decimal point precision
+      let amount_string = amount.toString();
+      let decimal_separator =  this.app.browser.getDecimalSeparator();
+
+      if (amount_string.indexOf(decimal_separator)) {
+        let myArray = amount.split(decimal_separator);
+        if (typeof myArray[1] != 'undefined') {
+	       let decimal_value = myArray[1];
+	       if (decimal_value.length > 8) {
+	         if (!isNaN(event.key)) {
+	           event.preventDefault();
+	           return false;
+	         }
+	       }
+	      }
+      } 
+	}
 }
 
 export default Browser;

lib/saito/ui/game-crypto-transfer-manager/game-crypto-transfer-manager-stake.template.js

@@ -8,7 +8,7 @@ module.exports = GameCryptoTransferManagerStakeTemplate = (app, sobj) => {
       <div class="crypto_msg">${sobj.crypto_msg}</div>
     </div>
     <div class="crypto-stake-confirm-container">
-      <input type="checkbox" name="crypto-stake-confirm-input" id="approve-crypto-stake-confirm-input">
+      <input type="checkbox" checked name="crypto-stake-confirm-input" id="approve-crypto-stake-confirm-input">
       <label for="approve-crypto-stake-confirm-input" class="commentary">peer-to-peer gaming is legal in my jurisdiction</label>
     </div>
 

lib/saito/ui/saito-crypto/overlays/withdraw.js

@@ -252,32 +252,8 @@ class Withdraw {
     	}
 
 	    document.querySelector("#withdraw-input-amount").onkeydown = async (e) => {
-      let amount = document.querySelector("#withdraw-input-amount").value;
-
-	      // prevent user for adding number gretaer than 10^9 to input
-	      if (amount > 1000000000) {
-	        if (!isNaN(event.key)) {
-	          e.preventDefault();
-	          return false;
-	        }
-	      }
-
-	      // prevent user for adding more than 8 decimal point precision
-	      let amount_string = amount.toString();
-	      let decimal_separator =  this_withdraw.app.browser.getDecimalSeparator();
-
-	      if (amount_string.indexOf(decimal_separator)) {
-	        let myArray = amount.split(decimal_separator);
-	        if (typeof myArray[1] != 'undefined') {
-		       let decimal_value = myArray[1];
-		       if (decimal_value.length > 8) {
-		         if (!isNaN(event.key)) {
-		           e.preventDefault();
-		           return false;
-		         }
-		       }
-		      }
-	      }
+	      let amount = document.querySelector("#withdraw-input-amount").value;
+	      this_withdraw.app.browser.validateAmountLimit(amount, e);
 	    }
 
 	  }

mods/crypto/lib/overlays/select-amount.js

@@ -7,6 +7,10 @@ class CryptoSelectAmount {
 		this.mod = mod;
 		this.overlay = new SaitoOverlay(app, mod);
 		this.callback = mycallback;
+		this.errors = {
+			'amount': false,
+			'checkbox': false
+		};
 	}
 
 	render(mycallback = null) {
@@ -18,6 +22,7 @@ class CryptoSelectAmount {
 	}
 
 	attachEvents(callback = null) {
+		let this_self = this;
 		let stake_input = document.getElementById('amount_to_stake_input');
 		if (!stake_input) {
 			return;
@@ -37,33 +42,76 @@ class CryptoSelectAmount {
 			};
 		}
 
-		document.querySelector('.crypto_amount_btn').onclick = (e) => {
+		stake_input.onkeydown = async(e) => {
 			let amount = stake_input.value;
-			let confirm = document.getElementById(
-				'crypto-stake-confirm-input'
-			).checked;
+			this_self.app.browser.validateAmountLimit(amount, e);
+		}
 
-			if (parseFloat(amount) <= 0) {
-				salert('You need to select a positive value');
-				return;
-			}
+		stake_input.oninput = async (e) => {
+      		this_self.validateAmount();
+  		};
 
-			if (parseFloat(amount) > this.mod.max_balance) {
-				salert('Not all the players have that much to stake');
-				return;
-			}
+		document.querySelector('.crypto_amount_btn').onclick = (e) => {
+			this_self.validateAmount();
+			this_self.validateCheckbox();
 
-			if (!confirm) {
-				salert('You need to confirm');
+			if (this_self.errors.amount == true || 
+				this_self.errors.checkbox) {
 				return;
 			}
-
+ 
 			if (callback != null) {
+				let amount = stake_input.value;
 				this.overlay.hide();
 				callback(amount);
 			}
 		};
 	}
+
+	validateAmount(){
+		let amount = document.getElementById('amount_to_stake_input').value;
+  		let input_err = document.querySelector('#stake-amount-error');
+		let errorMsg = '';
+
+		console.log('errors: ', this.errors);
+		this.errors.amount = false;
+
+		input_err.innerText = '';
+		input_err.style.display = 'none';
+
+  		if (parseFloat(amount) <= 0) {
+			errorMsg = 'You need to select a positive value';
+			this.errors.amount = true;
+		} else if (parseFloat(amount) > this.mod.max_balance) {
+			errorMsg = 'Not all the players have that much to stake';
+			this.errors.amount = true;
+		}
+
+		if (this.errors.amount) {
+			input_err.innerText = errorMsg;	
+			input_err.style.display = 'block';	
+		}
+	}
+
+	validateCheckbox(){
+		let confirm = document.getElementById('crypto-stake-confirm-input').checked;
+		let checkbox_err = document.querySelector('#stake-checkbox-error');
+		let errorMsg = '';
+		this.errors.checkbox = false;
+
+		checkbox_err.innerText = '';
+		checkbox_err.style.display = 'none';
+
+		if (!confirm) {
+			errorMsg = 'You need to confirm';
+			this.errors.checkbox = true;
+		}
+
+		if (this.errors.checkbox) {
+			checkbox_err.innerText = errorMsg;	
+			checkbox_err.style.display = 'block';	
+		}
+	}
 }
 
 module.exports = CryptoSelectAmount;

mods/crypto/lib/overlays/select-amount.template.js

@@ -6,15 +6,19 @@ module.exports = (app, mod) => {
       <h2 class="auth_title">Amount to Stake?</h2>
       
       <div class="stake-input-container">
-        <input autocomplete="off" id="amount_to_stake_input" class="stake" value="0.0" />
+        <input autocomplete="off" id="amount_to_stake_input" class="stake" 
+        type="number" min="0" max="9999999999.99999999" step="0.00000001" value="0.0" >
+
         <div class="crypto_msg select_max">Max: ${mod.max_balance}</div>
         <div class="crypto-ticker">${mod.ticker}</div>
       </div>
+      <div class="stake-input-error" id="stake-amount-error"></div>
 
       <div class="crypto-stake-confirm-container">
-        <input type="checkbox" name="crypto-stake-confirm-input" id="crypto-stake-confirm-input">
+        <input type="checkbox" checked name="crypto-stake-confirm-input" id="crypto-stake-confirm-input">
         <label for="crypto-stake-confirm-input" class="commentary">peer-to-peer gaming is legal in my jurisdiction</label>
       </div>
+      <div class="stake-input-error" id="stake-checkbox-error"></div>
 
       <div class="button saito-button-primary crypto_amount_btn" id="enable_staking_no">confirm</div>
 

web/saito/css-imports/saito-crypto-transfer-manager.css

@@ -29,6 +29,24 @@ input[type="checkbox"].ignore_checkbox {
   position: relative;
 }
 
+.stake-input-error {
+  display: none;
+  color: red;
+  font-size: 1.6rem;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 .game-crypto-transfer-manager-container .stake {
   background: none;
   border: none;
@@ -38,7 +56,7 @@ input[type="checkbox"].ignore_checkbox {
   padding: 1rem;
   font-size: 4rem;
   display: inline-block;
-  width: 18rem;
+  width: 100%;
 }
 
 .stake-input-container .crypto_msg {