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

code refactoring

Browse Source
This commit is contained in:
sairaj mote 2022-05-16 01:02:06 +05:30
parent c1101cfe04
commit 6d134ec22f
4 changed files with 89 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/css/main.css
View File

@ -763,7 +763,7 @@ sm-checkbox {
}
#quantity_type,
#wallet_quantity_type {
#portfolio_quantity_type {
font-size: 0.8rem;
padding-right: 0.5rem;
border-right: thin solid rgba(var(--text-color), 0.3);
@ -1013,7 +1013,7 @@ sm-checkbox {
background-color: #e2135110;
}
#wallet {
#portfolio {
display: grid;
width: auto;
gap: 1.5rem;
@ -1021,12 +1021,12 @@ sm-checkbox {
align-content: flex-start;
}
.wallet_actions__wrapper {
.portfolio_actions__wrapper {
grid-column: span 3;
gap: 0.5rem;
margin-top: 0.5rem;
}
.wallet_actions__wrapper .button {
.portfolio_actions__wrapper .button {
flex: 1;
}
@ -1086,11 +1086,11 @@ sm-checkbox {
text-align: right;
}
#wallet_result {
#portfolio_result {
justify-content: center;
text-align: center;
}
#wallet_result__icon {
#portfolio_result__icon {
display: flex;
padding: 1rem;
border-radius: 50%;
@ -1099,7 +1099,7 @@ sm-checkbox {
-webkit-animation: pop-up 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: pop-up 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#wallet_result__icon .icon {
#portfolio_result__icon .icon {
height: 2rem;
width: 2rem;
}
@ -1134,7 +1134,7 @@ sm-checkbox {
opacity: 1;
}
}
#wallet_result__cta {
#portfolio_result__cta {
padding: 1.5rem 1rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06);
@ -1453,15 +1453,15 @@ sm-checkbox {
grid-column: 1/-1;
}
#wallet {
#portfolio {
gap: 1rem 2rem;
grid-template-columns: 20rem 24rem;
}
#wallet__header {
#portfolio__header {
grid-column: 1/3;
padding-bottom: 1rem;
}
#wallet .balance-card {
#portfolio .balance-card {
border: solid thin rgba(var(--text-color), 0.2);
}
}

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
docs/css/main.scss
View File

@ -722,7 +722,7 @@ sm-checkbox {
}
#quantity_type,
#wallet_quantity_type {
#portfolio_quantity_type {
font-size: 0.8rem;
padding-right: 0.5rem;
border-right: thin solid rgba(var(--text-color), 0.3);
@ -918,14 +918,14 @@ sm-checkbox {
background-color: #e2135110;
}
}
#wallet {
#portfolio {
display: grid;
width: auto;
gap: 1.5rem;
grid-template-columns: minmax(0, 1fr);
align-content: flex-start;
}
.wallet_actions__wrapper {
.portfolio_actions__wrapper {
grid-column: span 3;
gap: 0.5rem;
margin-top: 0.5rem;
@ -986,7 +986,7 @@ sm-checkbox {
}
}
}
#wallet_result {
#portfolio_result {
justify-content: center;
text-align: center;
&__icon {
@ -1019,7 +1019,7 @@ sm-checkbox {
opacity: 1;
}
}
#wallet_result__cta {
#portfolio_result__cta {
padding: 1.5rem 1rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06);
@ -1295,7 +1295,7 @@ sm-checkbox {
#asset_page__nav {
grid-column: 1/-1;
}
#wallet {
#portfolio {
gap: 1rem 2rem;
grid-template-columns: 20rem 24rem;
&__header {

158
docs/index.html
View File

@ -85,7 +85,7 @@
</button>
</header>
<section id="pages_container">
<section id="exchange" class="mobile-page hide">
<div id="exchange" class="mobile-page hide">
<sm-form id="login_form">
<div class="grid gap-0-5">
<h2>Login</h2>
@ -99,13 +99,9 @@
Remember me
</span>
</sm-checkbox>
<input type="text" id="sign_in_code" style="display: none;" hidden />
<input type="text" id="sign_in_hash" style="display: none;" hidden />
<div id="login_button_wrapper" class="stateful-button-wrapper">
<sm-button variant="primary" onclick="UI_evt.login();">Log in</sm-button>
</div>
<sm-button onclick="showPopup('registration_popup')" style="display: none;" disabled>Not registered?
click here!</sm-button>
<div class="grid gap-0-5">
<p>Don't have FLO credentials?</p>
<sm-button onclick="showPopup('sign_up_popup')">Generate FLO credentials</sm-button>
@ -200,8 +196,8 @@
</sm-form>
</div>
</section>
</section>
<section id="my_orders" class="grid gap-1 hide mobile-page">
</div>
<div id="my_orders" class="grid gap-1 hide mobile-page">
<div id="my_orders_section__header" class="orders_section__header flex">
<div id="orders_section__header--primary" class="flex w-100 align-center space-between">
<h4 id="my_orders__title">
@ -242,8 +238,8 @@
</h4>
<p>My orders will only show completed orders</p>
</div>
</section>
<section id="market" class="grid gap-1-5 hide mobile-page">
</div>
<div id="market" class="grid gap-1-5 hide mobile-page">
<div class="grid gap-1 align-start">
<div class="flex align-center space-between">
<h5>ASSETS</h5>
@ -299,15 +295,9 @@
</div>
</div>
</div>
</section>
<section id="wallet" class="grid mobile-page hide">
<h4 id="wallet__header" class="flex align-center">
<svg class="icon margin-right-0-5" 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">
<rect fill="none" height="24" width="24" />
<path
d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10h8c1.1,0,2-0.9,2-2v-8C22,6.48,17.52,2,12,2z M12,20c-2.89,0-5.43-1.54-6.83-3.84 l2.95-2.95L11.41,16L16,11.42V13h2V8h-5v2h1.58l-3.28,3.28L8,10.5l-3.69,3.7C4.11,13.5,4,12.76,4,12c0-4.41,3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M19.5,20.5c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S20.05,20.5,19.5,20.5z" />
</svg>
</div>
<div id="portfolio" class="grid mobile-page hide">
<h4 id="portfolio__header">
My portfolio
</h4>
<div class="grid gap-1-5">
@ -315,10 +305,10 @@
<span class="label">Portfolio valuation</span>
<h1 id="portfolio_value" style="font-size: 2.5rem;"></h1>
</div>
<div id="wallet_actions" class="w-100" style="z-index: 5;">
<div id="portfolio_actions" class="w-100" style="z-index: 5;">
<p class="label">Select asset</p>
<sm-select id="wallet_asset_selector"></sm-select>
<div class="flex wallet_actions__wrapper">
<sm-select id="portfolio_asset_selector"></sm-select>
<div class="flex portfolio_actions__wrapper">
<button class="button" value="deposit">
Deposit
</button>
@ -336,7 +326,7 @@
<div class="flex align-center space-between">
<h4>Balance</h4>
<div class="multi-state-button">
<button id="wallet_balance_refresh_button" class="button button--small"
<button id="portfolio_balance_refresh_button" class="button button--small"
onclick="refresh(false,this);" title="Refresh">
Refresh
</button>
@ -347,7 +337,7 @@
</div>
<ul id="my_assets" class="grid"></ul>
</div>
</section>
</div>
<div id="help" class="mobile-page hide grid gap-2">
<h1>Hey there! How can we help you today?</h1>
<div class="grid gap-0-5">
@ -445,7 +435,7 @@
<details>
<summary class="interact">
<h4>
I have rupee tokens in FLO ID, so why can't I see them in my wallet?
I have rupee tokens in FLO ID, so why can't I see them in my portfolio?
</h4>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
@ -523,7 +513,7 @@
</svg>
<div class="item__title">Market</div>
</a>
<a href="#/wallet" class="main_navbar__item user-content hide interact">
<a href="#/portfolio" class="main_navbar__item user-content hide interact">
<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">
<rect fill="none" height="24" width="24" />
@ -620,7 +610,7 @@
</strong>
</section>
</sm-popup>
<sm-popup id="wallet_popup">
<sm-popup id="portfolio_popup">
<header slot="header" class="popup__header">
<button class="popup__header__close" onclick="hidePopup()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
@ -629,17 +619,17 @@
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
</svg>
</button>
<h4 id="wallet_popup__title" class="capitalize"></h4>
<h4 id="portfolio_popup__title" class="capitalize"></h4>
</header>
<sm-form id="wallet_form">
<sm-form id="portfolio_form">
<input type="text" id="sink_id" style="display: none;" hidden />
<sm-input id="get_receiver_id" placeholder="Receiver FLO ID" error-text="Invalid FLO ID" data-flo-id
required animate></sm-input>
<sm-input id="get_user_amount" placeholder="Quantity" type="number" min="0.00000001" step="0.00000001"
required animate>
</sm-input>
<div id="wallet_quantity_selector" class="flex align-center quantity-selector">
<span id="wallet_quantity_type">Rupee</span>
<div id="portfolio_quantity_selector" class="flex align-center quantity-selector">
<span id="portfolio_quantity_type">Rupee</span>
<button class="button" value="0.25">25%</button>
<button class="button" value="0.5">50%</button>
<button class="button" value="0.75">75%</button>
@ -651,17 +641,17 @@
<sm-input id="get_private_key" placeholder="FLO private key" type="password" required
error-text="Invalid private key" data-private-key="" animate>
</sm-input>
<div id="wallet_popup__cta_wrapper" class="stateful-button-wrapper">
<sm-button id="wallet_popup__cta" class="uppercase" variant="primary"></sm-button>
<div id="portfolio_popup__cta_wrapper" class="stateful-button-wrapper">
<sm-button id="portfolio_popup__cta" class="uppercase" variant="primary"></sm-button>
</div>
</sm-form>
<div id="wallet_result" class="grid gap-2 hide">
<div id="wallet_result__icon"></div>
<div id="portfolio_result" class="grid gap-2 hide">
<div id="portfolio_result__icon"></div>
<div class="grid gap-0-5">
<h4 id="wallet_result__title"></h4>
<p id="wallet_result__description"></p>
<h4 id="portfolio_result__title"></h4>
<p id="portfolio_result__description"></p>
</div>
<div id="wallet_result__cta" class="hide grid gap-1-5">
<div id="portfolio_result__cta" class="hide grid gap-1-5">
<div class="grid gap-0-5">
<h4>Low on rupee balance?</h4>
<p>Visit RanchiMall Pay to deposit rupee in your FLO ID.</p>
@ -1243,7 +1233,7 @@
break;
case 'market':
break;
case 'wallet':
case 'portfolio':
break;
}
}
@ -1845,7 +1835,7 @@
catch (err) {
getRef('trade_button_wrapper').append(getRef('failure_template').content.cloneNode(true))
if (err.message === 'Insufficient rupee') {
notify(`Insufficient balance to ${tradeType} ${asset}. Please deposit rupee to wallet first.`, 'error', { pinned: true })
notify(`Insufficient balance to ${tradeType} ${asset}. Please deposit rupee to portfolio first.`, 'error', { pinned: true })
} else {
notify(err.message, 'error')
}
@ -1902,22 +1892,22 @@
getRef('get_quantity').value = toFixed(parseFloat(e.target.value) / unitValue)
})
getRef('wallet_actions').addEventListener('click', e => {
getRef('portfolio_actions').addEventListener('click', e => {
if (e.target.closest('.button')) {
const target = e.target.closest('.button')
const type = target.value
const asset = getRef('wallet_asset_selector').value
const asset = getRef('portfolio_asset_selector').value
getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${toFixed(allTokens[asset].net)} ${asset}`
getRef('wallet_popup__cta').textContent = `${type} ${asset}`
getRef('wallet_popup__cta').setAttribute('value', type)
getRef('wallet_popup__title').textContent = `${type} ${asset}`
getRef('portfolio_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${toFixed(allTokens[asset].net)} ${asset}`
getRef('portfolio_popup__cta').textContent = `${type} ${asset}`
getRef('portfolio_popup__cta').setAttribute('value', type)
getRef('portfolio_popup__title').textContent = `${type} ${asset}`
// default form element state
getRef('get_receiver_id').removeAttribute('required')
getRef('get_receiver_id').classList.add('hide')
getRef('get_private_key').removeAttribute('required')
getRef('get_private_key').classList.add('hide')
getRef('wallet_quantity_selector').classList.remove('hide')
getRef('portfolio_quantity_selector').classList.remove('hide')
switch (type) {
case 'withdraw':
if (asset === 'FLO') {
@ -1927,15 +1917,15 @@
case 'deposit':
getRef('get_private_key').setAttribute('required', '')
getRef('get_private_key').classList.remove('hide')
getRef('wallet_quantity_selector').classList.add('hide')
getRef('portfolio_quantity_selector').classList.add('hide')
break;
case 'transfer':
getRef('get_receiver_id').setAttribute('required', '')
getRef('get_receiver_id').classList.remove('hide')
break;
}
getRef('wallet_form').elementsChanged()
showPopup('wallet_popup')
getRef('portfolio_form').elementsChanged()
showPopup('portfolio_popup')
}
})
function showWalletResult(status, title, description, cta = '') {
@ -1958,19 +1948,19 @@
d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
</svg>`
}
getRef('wallet_result__icon').innerHTML = icon
getRef('wallet_result__title').textContent = title
getRef('wallet_result__description').textContent = description
getRef('wallet_form').animate(slideOutLeft, animOptions)
getRef('portfolio_result__icon').innerHTML = icon
getRef('portfolio_result__title').textContent = title
getRef('portfolio_result__description').textContent = description
getRef('portfolio_form').animate(slideOutLeft, animOptions)
.onfinish = () => {
getRef('wallet_form').classList.add('hide')
getRef('wallet_result').classList.remove('hide')
getRef('wallet_result').animate(slideInLeft, animOptions)
getRef('portfolio_form').classList.add('hide')
getRef('portfolio_result').classList.remove('hide')
getRef('portfolio_result').animate(slideInLeft, animOptions)
}
getRef('wallet_result__cta').classList.add('hide')
getRef('portfolio_result__cta').classList.add('hide')
switch (cta) {
case 'open-upi':
getRef('wallet_result__cta').classList.remove('hide')
getRef('portfolio_result__cta').classList.remove('hide')
break;
default:
break;
@ -1982,18 +1972,18 @@
easing: 'ease',
fill: 'forwards'
}
getRef('wallet_result').animate(slideOutRight, animOptions)
getRef('portfolio_result').animate(slideOutRight, animOptions)
.onfinish = () => {
getRef('wallet_result').classList.add('hide')
getRef('wallet_form').classList.remove('hide')
getRef('wallet_form').animate(slideInRight, animOptions)
getRef('portfolio_result').classList.add('hide')
getRef('portfolio_form').classList.remove('hide')
getRef('portfolio_form').animate(slideInRight, animOptions)
}
}
getRef('wallet_quantity_selector').addEventListener('click', e => {
getRef('portfolio_quantity_selector').addEventListener('click', e => {
// Get latest balance and exchange rate
if (e.target.closest('button')) {
const target = e.target.closest('button')
const asset = getRef('wallet_asset_selector').value
const asset = getRef('portfolio_asset_selector').value
const fraction = parseFloat(target.value)
let total = toFixed(allTokens[asset].net * fraction);
if (asset == 'FLO' && fraction === 1 & total > 0.1) {
@ -2002,12 +1992,12 @@
getRef('get_user_amount').value = total
}
})
getRef('wallet_popup__cta').addEventListener('click', async e => {
const asset = getRef('wallet_asset_selector').value
getRef('portfolio_popup__cta').addEventListener('click', async e => {
const asset = getRef('portfolio_asset_selector').value
const type = e.target.getAttribute('value')
const quantity = parseFloat(getRef('get_user_amount').value)
try {
showProcess('wallet_popup__cta_wrapper')
showProcess('portfolio_popup__cta_wrapper')
const proxySecret = await proxy.secret;
let response
switch (type) {
@ -2019,7 +2009,7 @@
response = await floExchangeAPI.depositToken(asset, quantity, proxy.userID, proxy.sinkID, privKey, proxySecret)
}
console.log(response)
showWalletResult('success', `Sent ${asset} deposit request`, 'This may take upto 30 mins to reflect in your wallet.')
showWalletResult('success', `Sent ${asset} deposit request`, 'This may take upto 30 mins to reflect in your portfolio.')
break;
case 'withdraw':
if (asset === 'FLO') {
@ -2028,7 +2018,7 @@
response = await floExchangeAPI.withdrawToken(asset, quantity, proxy.userID, proxySecret)
}
console.log(response)
showWalletResult('success', `Sent ${asset} withdraw request`, 'This may take upto 30 mins to reflect in your wallet.')
showWalletResult('success', `Sent ${asset} withdraw request`, 'This may take upto 30 mins to reflect in your portfolio.')
break;
case 'transfer':
const receiverID = getRef('get_receiver_id').value.trim();
@ -2037,7 +2027,7 @@
}
response = await floExchangeAPI.transferToken(receiver, asset, proxy.userID, proxySecret)
console.log(response)
showWalletResult('success', `Sent ${quantity} ${asset} to ${receiverID}`, `This may take upto 30 mins to reflect in receiver's wallet.`)
showWalletResult('success', `Sent ${quantity} ${asset} to ${receiverID}`, `This may take upto 30 mins to reflect in receiver's portfolio.`)
break;
}
}
@ -2049,7 +2039,7 @@
}
}
finally {
hideProcess('wallet_popup__cta_wrapper')
hideProcess('portfolio_popup__cta_wrapper')
refresh()
}
})
@ -2269,9 +2259,6 @@
document.addEventListener('popupopened', e => {
switch (e.target.id) {
case 'registration_popup':
getRef('get_registration_key').focusIn()
break;
case 'sign_up_popup':
const { floID, privKey } = floCrypto.generateNewID()
getRef('generated_flo_id').value = floID
@ -2311,7 +2298,7 @@
})
document.addEventListener('popupclosed', e => {
switch (e.target.id) {
case 'wallet_popup':
case 'portfolio_popup':
hideWalletResult()
getRef('withdraw_flo_tip').classList.add('hide')
break;
@ -2417,7 +2404,7 @@
console.debug(rates);
if (init) {
floGlobals.exchangeRates = rates
getRef('wallet_asset_selector').append(
getRef('portfolio_asset_selector').append(
createElement('sm-option', {
textContent: floGlobals.currency,
attributes: { value: floGlobals.currency },
@ -2433,7 +2420,7 @@
}
// dynamically render listed assets if not already rendered
getRef('listed_assets').append(render.listedAsset(asset, formatAmount(parseFloat(rate)), countDown[asset]));
getRef('wallet_asset_selector').append(createElement('sm-option', {
getRef('portfolio_asset_selector').append(createElement('sm-option', {
textContent: asset,
attributes: { value: asset },
}));
@ -2479,15 +2466,14 @@
async function refresh(init = false, refreshButton) {
if (refreshButton)
buttonLoader('wallet_balance_refresh_button', true);
buttonLoader('portfolio_balance_refresh_button', true);
if (init) {
console.info("init");
if (!proxy.userID) {
floExchangeAPI.getLoginCode().then(response => {
floExchangeAPI.getLoginCode().then(({ code, hash }) => {
getRef("login_form").classList.remove('hide');
document.querySelectorAll(".user-content").forEach(elem => elem.classList.add('hide'))
getRef('sign_in_code').value = response.code;
getRef('sign_in_hash').value = response.hash;
floGlobals.loginDetails = { code, hash }
proxy.clear();
setTimeout(() => {
getRef('login_form__priv_key').focusIn()
@ -2505,7 +2491,7 @@
if (proxy.userID) {
await account();
if (refreshButton)
buttonLoader('wallet_balance_refresh_button', false);
buttonLoader('portfolio_balance_refresh_button', false);
}
}
@ -2554,7 +2540,7 @@
console.debug("RUPEE", allTokens['rupee']);
// render all assets in wallet
// render all assets in portfolio
const frag = document.createDocumentFragment();
let totalPortfolio = 0;
Object.entries(allTokens).sort((a, b) => b[1].net - a[1].net).forEach(([asset]) => {
@ -2603,16 +2589,14 @@
login() {
showProcess('login_button_wrapper')
let privKey = getRef('login_form__priv_key').value;
let code = getRef('sign_in_code').value,
hash = getRef('sign_in_hash').value;
const { code, hash } = floGlobals.loginDetails;
let rememberMe = getRef('remember_me').checked;
let tmpKey = floCrypto.generateNewID();
floExchangeAPI.login(privKey, tmpKey.pubKey, code, hash).then(result => {
console.log(result);
proxy.secret = tmpKey.privKey;
proxy.userID = floCrypto.getFloID(privKey);
getRef('sign_in_code').value = null;
getRef('sign_in_hash').value = null;
delete floGlobals.loginDetails
account();
}).catch(error => {
notify(error.message, 'error')