Feature update
-- added option to transfer rupee tokens directly to blockchain bonds and bon's fund
This commit is contained in:
sairaj mote
parent
f12ece1a8f
commit
7511e3e95b
18
css/main.css
18
css/main.css
@ -454,6 +454,10 @@ ol li::before {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-top-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.margin-top-1-5 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -970,12 +974,9 @@ ol li::before {
|
||||
}
|
||||
.wallet-action .icon:first-of-type,
|
||||
.integrated-action-button .icon:first-of-type {
|
||||
height: 2.3rem;
|
||||
width: 2.3rem;
|
||||
padding: 0.5rem;
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 2rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.wallet-action .badge,
|
||||
.integrated-action-button .badge {
|
||||
@ -987,10 +988,13 @@ ol li::before {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
white-space: initial;
|
||||
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 {
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -416,6 +416,9 @@ ol {
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.margin-top-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.margin-top-1-5 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -893,12 +896,9 @@ ol {
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
.icon:first-of-type {
|
||||
height: 2.3rem;
|
||||
width: 2.3rem;
|
||||
padding: 0.5rem;
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 2rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.badge {
|
||||
left: 0;
|
||||
@ -909,10 +909,13 @@ ol {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
white-space: initial;
|
||||
padding: 0.8rem;
|
||||
border: solid thin rgba(var(--text-color), 0.1);
|
||||
&:hover {
|
||||
border: solid thin rgba(var(--text-color), 0.5);
|
||||
}
|
||||
.icon {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
95
index.html
95
index.html
@ -296,8 +296,7 @@
|
||||
</svg>
|
||||
Request
|
||||
</button>
|
||||
<button class="wallet-action cashier-option"
|
||||
onclick="openPopup('topup_wallet_popup', true)">
|
||||
<button class="wallet-action" onclick="openPopup('topup_wallet_popup', true)">
|
||||
<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" />
|
||||
@ -306,8 +305,7 @@
|
||||
</svg>
|
||||
Top-up
|
||||
</button>
|
||||
<button class="wallet-action cashier-option"
|
||||
onclick="openPopup('withdraw_wallet_popup')">
|
||||
<button class="wallet-action" onclick="openPopup('withdraw_wallet_popup')">
|
||||
<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">
|
||||
@ -335,7 +333,7 @@
|
||||
<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" />
|
||||
</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"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<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" />
|
||||
</svg>
|
||||
</a>
|
||||
<button class="integrated-action-button align-center"
|
||||
onclick="openPopup('transfer_to_exchange_popup')">
|
||||
<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>
|
||||
Send rupee tokens to exchange
|
||||
<svg class="icon justify-self-end" 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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="grid gap-1"
|
||||
style="border-top: solid thin rgba(var(--text-color), 0.5); padding-top: 1rem">
|
||||
<h5>Transfer rupee tokens to other RanchiMall Products</h5>
|
||||
<div class="actions-wrapper">
|
||||
<button class="wallet-action" onclick="openExternalTransferPopup('exchange')">
|
||||
<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>
|
||||
Exchange market
|
||||
</button>
|
||||
<button class="wallet-action" onclick="openExternalTransferPopup('btc-bonds')">
|
||||
<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 class="flex flex-direction-column gap-0-5">
|
||||
@ -1396,7 +1412,7 @@
|
||||
</button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<sm-popup id="transfer_to_exchange_popup">
|
||||
<sm-popup id="external_transfer_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<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"
|
||||
@ -1407,42 +1423,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div id="exchange_transfer_process">
|
||||
<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>
|
||||
<div id="external_transfer_process"></div>
|
||||
</sm-popup>
|
||||
<sm-popup id="secure_pwd_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
|
||||
138
scripts/fn_ui.js
138
scripts/fn_ui.js
@ -131,33 +131,117 @@ function withdrawMoneyFromWallet() {
|
||||
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() {
|
||||
const amount = parseFloat(getRef('exchange_transfer__amount').value.trim());
|
||||
buttonLoader('exchange_transfer__button', true);
|
||||
floDapps.user.private.then(privateKey => {
|
||||
if (!privateKey) return;
|
||||
floExchangeAPI.depositToken('rupee', amount, floDapps.user.id, 'FRJkPqdbbsug3TtQRAWviqvTL9Qr2EMnrm', privateKey).then(txid => {
|
||||
console.log(txid);
|
||||
showChildElement('exchange_transfer_process', 1);
|
||||
getRef('exchange_transfer__success_message').textContent = `Transferred ${formatAmount(amount)} to exchange`;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
if (error.code) {
|
||||
error = error.message;
|
||||
}
|
||||
if (error === 'Insufficient rupee# balance')
|
||||
error = 'Insufficient rupee token balance in your wallet, please top-up your wallet.';
|
||||
getRef('exchange_transfer__failed_reason').textContent = error;
|
||||
showChildElement('exchange_transfer_process', 2);
|
||||
}).finally(() => {
|
||||
buttonLoader('exchange_transfer__button', false);
|
||||
});
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
notify('Invalid password', 'error');
|
||||
closePopup();
|
||||
return false;
|
||||
function externalTransfer() {
|
||||
const type = document.getElementById('external_transfer__button').dataset.type;
|
||||
let confirmationMessage = '';
|
||||
let amount = parseFloat(document.getElementById('external_transfer__amount').value.trim());
|
||||
let receiverFloID = '';
|
||||
let remarks = '';
|
||||
let name = '';
|
||||
switch (type) {
|
||||
case 'exchange': {
|
||||
confirmationMessage = `You are depositing ${amount} rupee tokens to exchange`;
|
||||
receiverFloID = 'FRJkPqdbbsug3TtQRAWviqvTL9Qr2EMnrm';
|
||||
name = 'RanchiMall Exchange';
|
||||
} break;
|
||||
case 'btc-bonds': {
|
||||
receiverFloID = 'FBBstZ2GretgQqDP55yt8iVd4KNZkdvEzH';
|
||||
confirmationMessage = `You are transferring ${amount} rupee tokens to blockchain bond at FLO address ${receiverFloID}`;
|
||||
remarks = '|blockchain-bond';
|
||||
name = 'Blockchain Bonds';
|
||||
} break;
|
||||
case 'bobs-fund': {
|
||||
receiverFloID = 'FFXy5pJnfzu2fCDLhpUremyXQjGtFpgCDN';
|
||||
confirmationMessage = `You are transferring ${amount} rupee tokens to Bob's fund at FLO address ${receiverFloID}`;
|
||||
remarks = '|bobs-fund';
|
||||
name = `Bob's Fund`;
|
||||
} break;
|
||||
}
|
||||
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) {
|
||||
const button = typeof id === 'string' ? getRef(id) : id;
|
||||
const button = typeof id === 'string' ? document.getElementById(id) : id;
|
||||
button.disabled = show;
|
||||
const animOptions = {
|
||||
duration: 200,
|
||||
|
||||
@ -132,9 +132,10 @@ document.addEventListener('popupclosed', e => {
|
||||
getRef('select_withdraw_upi_id').innerHTML = ''
|
||||
showChildElement('withdraw_wallet_process', 0)
|
||||
break;
|
||||
case 'transfer_to_exchange_popup':
|
||||
showChildElement('exchange_transfer_process', 0);
|
||||
buttonLoader('exchange_transfer__button', false);
|
||||
case 'external_transfer_popup':
|
||||
showChildElement('external_transfer_process', 0);
|
||||
buttonLoader('external_transfer__button', false);
|
||||
document.getElementById('external_transfer__amount').value = '';
|
||||
break;
|
||||
case 'confirm_topup_popup':
|
||||
showChildElement('confirm_topup_wrapper', 0);
|
||||
@ -853,23 +854,24 @@ function showChildElement(id, index, options = {}) {
|
||||
easing: 'ease',
|
||||
fill: 'forwards'
|
||||
}
|
||||
const visibleElement = [...getRef(id).children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden'));
|
||||
if (visibleElement === getRef(id).children[index]) return;
|
||||
const parent = typeof id === 'string' ? document.getElementById(id) : id;
|
||||
const visibleElement = [...parent.children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden'));
|
||||
if (visibleElement === parent.children[index]) return;
|
||||
if (visibleElement) {
|
||||
if (exit) {
|
||||
visibleElement.animate(exit, animOptions).onfinish = () => {
|
||||
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)
|
||||
getRef(id).children[index].animate(entry, animOptions)
|
||||
parent.children[index].animate(entry, animOptions)
|
||||
}
|
||||
} else {
|
||||
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 {
|
||||
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
|
||||
getRef(id).children[index].animate(entry, animOptions)
|
||||
parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
|
||||
parent.children[index].animate(entry, animOptions)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user