From 3cc72a1fbf938e794c44747af5c05424247b3b9e Mon Sep 17 00:00:00 2001
From: umairkhannn <104337801+umairkhannn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:23:05 +0500
Subject: [PATCH] In-game crypto offfer validation (#2451)
* Validate in-game stake amount
* checkbox checked by default
---
lib/saito/browser.ts | 27 +++++++
...-crypto-transfer-manager-stake.template.js | 2 +-
.../ui/saito-crypto/overlays/withdraw.js | 28 +------
mods/crypto/lib/overlays/select-amount.js | 78 +++++++++++++++----
.../lib/overlays/select-amount.template.js | 8 +-
.../saito-crypto-transfer-manager.css | 20 ++++-
6 files changed, 118 insertions(+), 45 deletions(-)
diff --git a/lib/saito/browser.ts b/lib/saito/browser.ts
index 2aea470cad..ea69fef308 100644
--- a/lib/saito/browser.ts
+++ b/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;
diff --git a/lib/saito/ui/game-crypto-transfer-manager/game-crypto-transfer-manager-stake.template.js b/lib/saito/ui/game-crypto-transfer-manager/game-crypto-transfer-manager-stake.template.js
index 37444b5ab9..6aa100003d 100644
--- a/lib/saito/ui/game-crypto-transfer-manager/game-crypto-transfer-manager-stake.template.js
+++ b/lib/saito/ui/game-crypto-transfer-manager/game-crypto-transfer-manager-stake.template.js
@@ -8,7 +8,7 @@ module.exports = GameCryptoTransferManagerStakeTemplate = (app, sobj) => {
${sobj.crypto_msg}
-
+
diff --git a/lib/saito/ui/saito-crypto/overlays/withdraw.js b/lib/saito/ui/saito-crypto/overlays/withdraw.js
index b59221edb0..b2cdda71c8 100644
--- a/lib/saito/ui/saito-crypto/overlays/withdraw.js
+++ b/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);
}
}
diff --git a/mods/crypto/lib/overlays/select-amount.js b/mods/crypto/lib/overlays/select-amount.js
index e9b3dcf5f7..95238d723b 100644
--- a/mods/crypto/lib/overlays/select-amount.js
+++ b/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;
diff --git a/mods/crypto/lib/overlays/select-amount.template.js b/mods/crypto/lib/overlays/select-amount.template.js
index 78fe313009..f012f9513d 100644
--- a/mods/crypto/lib/overlays/select-amount.template.js
+++ b/mods/crypto/lib/overlays/select-amount.template.js
@@ -6,15 +6,19 @@ module.exports = (app, mod) => {
Amount to Stake?
+
-
+
+
confirm
diff --git a/web/saito/css-imports/saito-crypto-transfer-manager.css b/web/saito/css-imports/saito-crypto-transfer-manager.css
index 3b836116e7..9b8c6f1490 100644
--- a/web/saito/css-imports/saito-crypto-transfer-manager.css
+++ b/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 {