RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added more asset conversion UI

Browse Source
This commit is contained in:
sairaj mote 2023-04-14 02:38:30 +05:30
parent 9a5d173915
commit adacfdcccd
5 changed files with 150 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/main.css
View File

@ -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;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
css/main.scss
View File

@ -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 {

193
index.html
View File

@ -1267,28 +1267,8 @@
</svg>
</button>
</header>
<sm-form id="conversion_form" class="hidden">
<div class="grid gap-0-5">
<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-form id="conversion_form" class="hidden"></sm-form>
<div id="conversion_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 }) {
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';
function convertCurrency(amount) {
let convertedAmount = 0;
if (fromAmount && !Number.isNaN(fromAmount)) {
if (amount && !Number.isNaN(amount)) {
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') {
getRef('convert_asset_title').textContent = `Convert to BTC`;
getRef('convert_asset_description').textContent = 'Enter the amount of rupee tokens you want to convert to BTC';
getRef('conversion_asset_icon').innerHTML = assetIcons.rupee;
} else {
getRef('convert_asset_title').textContent = `Convert to Rupee tokens`;
getRef('convert_asset_description').textContent = 'Enter the amount of BTC you want to convert to rupee tokens';
getRef('conversion_asset_icon').innerHTML = assetIcons.btc;
}
const fromAsset = toAsset === 'btc' ? 'rupee' : 'btc';
setCorrectInputParams({ fromAsset, toAsset: convertingTo });
getRef('convert_asset_title').textContent = `Convert to ${toAsset}`;
getRef('converted_amount').textContent = formatAmount(0, toAsset === 'btc' ? 'btc' : 'inr');
let assetBalance = 0;
if (convertingTo === 'btc') {
assetBalance = await floTokenAPI.getBalance(floGlobals.myFloID)
} else {
assetBalance = await btcOperator.getBalance(floGlobals.myBtcID)
}
getRef('conversion_amount').setAttribute('max', assetBalance)
renderElem(getRef('conversion_form'), html`
<div class="grid gap-0-5">
<h3 id="convert_asset_title">${title}</h3>
<p id="convert_asset_description">${description}</p>
</div>
${isRange ? html`
<sm-input id="conversion_amount" oninput=${handleConversionAmountInput} min=${leastAllowed} max=${maxAllowed} step=${step} type="number" placeholder="Amount" autofocus animate required>
<div id="conversion_asset_icon" slot="icon">
${fromAsset === 'rupee' ?
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>` :
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>`
}
</div>
</sm-input>
`: html`
<fieldset class="flex flex-wrap gap-0-3 align-center" onchange=${handleConversionAmountSelection}>
${(convertingTo === 'btc' ? permissibleBtc : permissibleRupee).map((amount) => html`
<label class="amount-option">
<input type="radio" name="amount" value="${amount}" required>
<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)

2
scripts/components.js
View File

File diff suppressed because one or more lines are too long