Skip to content

Commit

Permalink
In-game crypto offfer validation (#2451)
Browse files Browse the repository at this point in the history 
* Validate in-game stake amount

* checkbox checked by default
  • Loading branch information
@umairkhannn
umairkhannn authored Apr 16, 2024
1 parent 8096d91 commit 523304d
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 45 deletions.
27 changes: 27 additions & 0 deletions lib/saito/browser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion lib/saito/ui/game-crypto-transfer-manager/game-crypto-transfer-manager-stake.template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 2 additions & 26 deletions lib/saito/ui/saito-crypto/overlays/withdraw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

}
Expand Down
78 changes: 63 additions & 15 deletions mods/crypto/lib/overlays/select-amount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -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;
8 changes: 6 additions & 2 deletions mods/crypto/lib/overlays/select-amount.template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 19 additions & 1 deletion web/saito/css-imports/saito-crypto-transfer-manager.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down

0 comments on commit 523304d

Please sign in to comment.