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

Feature update

Browse Source 
-- added option to transfer rupee tokens directly to blockchain bonds and bon's fund
This commit is contained in:
sairaj mote 2022-08-21 02:47:16 +05:30
parent f12ece1a8f
commit 7511e3e95b
6 changed files with 183 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/main.css
View File

@ -454,6 +454,10 @@ ol li::before {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.margin-top-1 {
margin-top: 1rem;
}
.margin-top-1-5 { .margin-top-1-5 {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -970,12 +974,9 @@ ol li::before {
} }
.wallet-action .icon:first-of-type, .wallet-action .icon:first-of-type,
.integrated-action-button .icon:first-of-type { .integrated-action-button .icon:first-of-type {
height: 2.3rem; height: 1.5rem;
width: 2.3rem; width: 1.5rem;
padding: 0.5rem; fill: var(--accent-color);
fill: rgba(var(--foreground-color), 1);
background-color: var(--accent-color);
border-radius: 2rem;
} }
.wallet-action .badge, .wallet-action .badge,
.integrated-action-button .badge { .integrated-action-button .badge {
@ -987,10 +988,13 @@ ol li::before {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
align-items: center; align-items: center;
font-weight: 500;
font-size: 0.8rem; font-size: 0.8rem;
white-space: initial; white-space: initial;
padding: 0.8rem; padding: 0.8rem;
border: solid thin rgba(var(--text-color), 0.1);
}
.wallet-action:hover {
border: solid thin rgba(var(--text-color), 0.5);
} }
.wallet-action .icon { .wallet-action .icon {
margin-bottom: 0.8rem; margin-bottom: 0.8rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
css/main.scss
View File

@ -416,6 +416,9 @@ ol {
.margin-left-0-5 { .margin-left-0-5 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.margin-top-1 {
margin-top: 1rem;
}
.margin-top-1-5 { .margin-top-1-5 {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -893,12 +896,9 @@ ol {
color: inherit; color: inherit;
font-weight: 500; font-weight: 500;
.icon:first-of-type { .icon:first-of-type {
height: 2.3rem; height: 1.5rem;
width: 2.3rem; width: 1.5rem;
padding: 0.5rem; fill: var(--accent-color);
fill: rgba(var(--foreground-color), 1);
background-color: var(--accent-color);
border-radius: 2rem;
} }
.badge { .badge {
left: 0; left: 0;
@ -909,10 +909,13 @@ ol {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
align-items: center; align-items: center;
font-weight: 500;
font-size: 0.8rem; font-size: 0.8rem;
white-space: initial; white-space: initial;
padding: 0.8rem; padding: 0.8rem;
border: solid thin rgba(var(--text-color), 0.1);
&:hover {
border: solid thin rgba(var(--text-color), 0.5);
}
.icon { .icon {
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }

95
index.html
View File

@ -296,8 +296,7 @@
</svg> </svg>
Request Request
</button> </button>
<button class="wallet-action cashier-option" <button class="wallet-action" onclick="openPopup('topup_wallet_popup', true)">
onclick="openPopup('topup_wallet_popup', true)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
@ -306,8 +305,7 @@
</svg> </svg>
Top-up Top-up
</button> </button>
<button class="wallet-action cashier-option" <button class="wallet-action" onclick="openPopup('withdraw_wallet_popup')">
onclick="openPopup('withdraw_wallet_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" <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" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
@ -335,7 +333,7 @@
<path <path
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" /> d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
</svg> </svg>
View rupee top-up and withdrawal history View top-up and withdrawal history
<svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px" <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
@ -363,21 +361,39 @@
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg> </svg>
</a> </a>
<button class="integrated-action-button align-center" <div class="grid gap-1"
onclick="openPopup('transfer_to_exchange_popup')"> style="border-top: solid thin rgba(var(--text-color), 0.5); padding-top: 1rem">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <h5>Transfer rupee tokens to other RanchiMall Products</h5>
width="24px" fill="#000000"> <div class="actions-wrapper">
<path d="M0 0h24v24H0z" fill="none" /> <button class="wallet-action" onclick="openExternalTransferPopup('exchange')">
<path <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" /> viewBox="0 0 24 24" width="24px" fill="#000000">
</svg> <path d="M0 0h24v24H0z" fill="none" />
Send rupee tokens to exchange <path
<svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px" d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
viewBox="0 0 24 24" width="24px" fill="#000000"> </svg>
<path d="M0 0h24v24H0z" fill="none" /> Exchange market
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> </button>
</svg> <button class="wallet-action" onclick="openExternalTransferPopup('btc-bonds')">
</button> <svg class="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="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
</svg>
Blockchain Bonds
</button>
<button class="wallet-action" onclick="openExternalTransferPopup('bobs-fund')">
<svg class="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="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
</svg>
Bob's fund
</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="flex flex-direction-column gap-0-5"> <div class="flex flex-direction-column gap-0-5">
@ -1396,7 +1412,7 @@
</button> </button>
</sm-form> </sm-form>
</sm-popup> </sm-popup>
<sm-popup id="transfer_to_exchange_popup"> <sm-popup id="external_transfer_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">
<button class="popup__header__close justify-self-start"> <button class="popup__header__close justify-self-start">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@ -1407,42 +1423,7 @@
</svg> </svg>
</button> </button>
</header> </header>
<div id="exchange_transfer_process"> <div id="external_transfer_process"></div>
<sm-form>
<div class="grid gap-0-5">
<h4>Send</h4>
<p>
Deposit rupee tokens to RanchiMall Exchange.
</p>
</div>
<sm-input id="exchange_transfer__amount" type="number" placeholder="Amount" min="1" step="0.01"
error-text="minimum amount is ₹1" animate required autofocus>
</sm-input>
<div class="multi-state-button">
<button id="exchange_transfer__button" class="button button--primary cta"
onclick="transferToExchange()" type="submit">Send</button>
</div>
</sm-form>
<div class="grid gap-0-5 hidden justify-center text-center">
<svg class="icon user-action-result__icon success" 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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>
<b id="exchange_transfer__success_message">Sent rupee tokens</b>
<p>Amount may take upto 30 mins to show up in exchange</p>
</div>
<div class="grid gap-0-5 hidden justify-center text-center">
<svg class="icon user-action-result__icon failed" 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
</svg>
<b>Failed to Send</b>
<p id="exchange_transfer__failed_reason"></p>
</div>
</div>
</sm-popup> </sm-popup>
<sm-popup id="secure_pwd_popup"> <sm-popup id="secure_pwd_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">

138
scripts/fn_ui.js
View File

@ -131,33 +131,117 @@ function withdrawMoneyFromWallet() {
console.error(error) console.error(error)
}) })
} }
function openExternalTransferPopup(type) {
let title = ``;
let description = ``;
let successTitle = '';
let successDescription = null;
switch (type) {
case 'exchange': {
title = 'Transfer to Exchange';
description = 'Deposit rupee tokens in RanchiMall Exchange';
successTitle = 'Rupees transfer initiated';
successDescription = html`<p>Amount may take upto 30 mins to show up in exchange</p>`;
} break;
case 'btc-bonds': {
title = 'Transfer to Blockchain Bonds';
description = 'Buy Blockchain Bonds with rupee tokens';
successTitle = 'Rupees transferred for Blockchain Bonds';
} break;
case 'bobs-fund': {
title = `Transfer to Bob's fund`;
description = `Buy Bob's fund with rupee tokens`;
successTitle = `Rupees transferred for Bob's fund`;
} break;
}
renderElem(getRef('external_transfer_process'), html`
<sm-form>
<div class="grid gap-0-5">
<h4>${title}</h4>
<p>${description}</p>
</div>
<sm-input id="external_transfer__amount" type="number" placeholder="Amount" min="1" step="0.01" error-text="minimum amount is ₹1" animate required autofocus> </sm-input>
<div class="multi-state-button">
<button id="external_transfer__button" class="button button--primary cta" onclick={externalTransfer()} data-type="${type}" type="submit">Transfer</button>
</div>
</sm-form>
<div class="grid gap-0-5 hidden justify-center text-center">
<svg class="icon user-action-result__icon success" 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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
<b id="external_transfer__success_message">${successTitle}</b>
${successDescription}
${(type === 'btc-bonds'|| type === 'bobs-fund') ? html`<a id="external_transfer__link" target="_blank" class="margin-top-1">View transaction on blockchain</a>`: ''}
</div>
<div class="grid gap-0-5 hidden justify-center text-center">
<svg class="icon user-action-result__icon failed" 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" /> </svg>
<b>Failed to transfer</b>
<p id="external_transfer__failed_reason"></p>
</div>
`)
openPopup('external_transfer_popup');
}
function transferToExchange() { function externalTransfer() {
const amount = parseFloat(getRef('exchange_transfer__amount').value.trim()); const type = document.getElementById('external_transfer__button').dataset.type;
buttonLoader('exchange_transfer__button', true); let confirmationMessage = '';
floDapps.user.private.then(privateKey => { let amount = parseFloat(document.getElementById('external_transfer__amount').value.trim());
if (!privateKey) return; let receiverFloID = '';
floExchangeAPI.depositToken('rupee', amount, floDapps.user.id, 'FRJkPqdbbsug3TtQRAWviqvTL9Qr2EMnrm', privateKey).then(txid => { let remarks = '';
console.log(txid); let name = '';
showChildElement('exchange_transfer_process', 1); switch (type) {
getRef('exchange_transfer__success_message').textContent = `Transferred ${formatAmount(amount)} to exchange`; case 'exchange': {
}).catch(error => { confirmationMessage = `You are depositing ${amount} rupee tokens to exchange`;
console.log(error); receiverFloID = 'FRJkPqdbbsug3TtQRAWviqvTL9Qr2EMnrm';
if (error.code) { name = 'RanchiMall Exchange';
error = error.message; } break;
} case 'btc-bonds': {
if (error === 'Insufficient rupee# balance') receiverFloID = 'FBBstZ2GretgQqDP55yt8iVd4KNZkdvEzH';
error = 'Insufficient rupee token balance in your wallet, please top-up your wallet.'; confirmationMessage = `You are transferring ${amount} rupee tokens to blockchain bond at FLO address ${receiverFloID}`;
getRef('exchange_transfer__failed_reason').textContent = error; remarks = '|blockchain-bond';
showChildElement('exchange_transfer_process', 2); name = 'Blockchain Bonds';
}).finally(() => { } break;
buttonLoader('exchange_transfer__button', false); case 'bobs-fund': {
}); receiverFloID = 'FFXy5pJnfzu2fCDLhpUremyXQjGtFpgCDN';
}).catch(error => { confirmationMessage = `You are transferring ${amount} rupee tokens to Bob's fund at FLO address ${receiverFloID}`;
console.log(error); remarks = '|bobs-fund';
notify('Invalid password', 'error'); name = `Bob's Fund`;
closePopup(); } break;
return false; }
getConfirmation('Continue?', { message: confirmationMessage, confirmText: 'Transfer' }).then(confirmation => {
if (confirmation) {
floDapps.user.private.then(async privateKey => {
if (!privateKey) return;
try {
buttonLoader('external_transfer__button', true);
let result
if (type === 'btc-bonds' || type === 'bobs-fund') {
result = await User.sendToken(receiverFloID, amount, remarks)
document.getElementById('external_transfer__link').href = `https://flosight.duckdns.org/tx/${result}`;
} else if (type === 'exchange') {
result = await floExchangeAPI.depositToken('rupee', amount, floDapps.user.id, receiverFloID, privateKey)
}
console.log(result);
showChildElement('external_transfer_process', 1);
document.getElementById('external_transfer__success_message').textContent = `Transferred ${formatAmount(amount)} to ${name}`;
} catch (error) {
let errorText = error;
console.log(error);
if (error.code) {
errorText = error.message;
}
if (error === 'Insufficient rupee# balance')
errorText = 'Insufficient rupee token balance in your wallet, please top-up your wallet.';
document.getElementById('external_transfer__failed_reason').textContent = errorText;
showChildElement('external_transfer_process', 2);
} finally {
buttonLoader('external_transfer__button', false);
}
}).catch(error => {
console.log(error);
notify('Invalid password', 'error');
closePopup();
return false;
})
}
}) })
} }
@ -804,7 +888,7 @@ const render = {
}; };
function buttonLoader(id, show) { function buttonLoader(id, show) {
const button = typeof id === 'string' ? getRef(id) : id; const button = typeof id === 'string' ? document.getElementById(id) : id;
button.disabled = show; button.disabled = show;
const animOptions = { const animOptions = {
duration: 200, duration: 200,

22
scripts/std_ui.js
View File

@ -132,9 +132,10 @@ document.addEventListener('popupclosed', e => {
getRef('select_withdraw_upi_id').innerHTML = '' getRef('select_withdraw_upi_id').innerHTML = ''
showChildElement('withdraw_wallet_process', 0) showChildElement('withdraw_wallet_process', 0)
break; break;
case 'transfer_to_exchange_popup': case 'external_transfer_popup':
showChildElement('exchange_transfer_process', 0); showChildElement('external_transfer_process', 0);
buttonLoader('exchange_transfer__button', false); buttonLoader('external_transfer__button', false);
document.getElementById('external_transfer__amount').value = '';
break; break;
case 'confirm_topup_popup': case 'confirm_topup_popup':
showChildElement('confirm_topup_wrapper', 0); showChildElement('confirm_topup_wrapper', 0);
@ -853,23 +854,24 @@ function showChildElement(id, index, options = {}) {
easing: 'ease', easing: 'ease',
fill: 'forwards' fill: 'forwards'
} }
const visibleElement = [...getRef(id).children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden')); const parent = typeof id === 'string' ? document.getElementById(id) : id;
if (visibleElement === getRef(id).children[index]) return; const visibleElement = [...parent.children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden'));
if (visibleElement === parent.children[index]) return;
if (visibleElement) { if (visibleElement) {
if (exit) { if (exit) {
visibleElement.animate(exit, animOptions).onfinish = () => { visibleElement.animate(exit, animOptions).onfinish = () => {
visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden') visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden')
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden') parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
if (entry) if (entry)
getRef(id).children[index].animate(entry, animOptions) parent.children[index].animate(entry, animOptions)
} }
} else { } else {
visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden') visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden')
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden') parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
} }
} else { } else {
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden') parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
getRef(id).children[index].animate(entry, animOptions) parent.children[index].animate(entry, animOptions)
} }
} }