This commit is contained in:
sairajzero 2022-05-04 15:16:27 +05:30
commit cb8a83a6f8
4 changed files with 263 additions and 131 deletions

View File

@ -143,6 +143,10 @@ sm-form {
--gap: 1rem; --gap: 1rem;
} }
sm-copy {
font-size: 0.9rem;
}
ul { ul {
list-style: none; list-style: none;
} }
@ -461,6 +465,9 @@ details summary {
cursor: pointer; cursor: pointer;
padding: 1rem 0; padding: 1rem 0;
} }
details .icon {
flex-shrink: 0;
}
details[open] { details[open] {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -518,6 +525,27 @@ sm-checkbox {
flex-shrink: 0; flex-shrink: 0;
} }
.tooltip {
position: relative;
z-index: 1;
cursor: pointer;
}
.tooltip .banner {
position: absolute;
right: 0;
width: min(20rem, 100vw - 1rem);
display: none;
font-size: 0.9rem;
background-color: rgba(var(--foreground-color), 1);
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
border: solid thin rgba(var(--text-color), 0.2);
}
.tooltip:hover .banner {
display: block;
}
.page-layout { .page-layout {
display: grid; display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
@ -558,10 +586,6 @@ sm-checkbox {
#sign_up header { #sign_up header {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
#sign_up sm-copy {
font-size: 0.9rem;
--button-border-radius: 0.5rem;
}
#sign_up .h2 { #sign_up .h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -805,6 +829,8 @@ sm-checkbox {
} }
.transaction-card { .transaction-card {
content-visibility: auto;
contain-intrinsic-size: 2.5rem;
grid-template-columns: repeat(3, 1fr) 2rem; grid-template-columns: repeat(3, 1fr) 2rem;
} }
.transaction-card__type { .transaction-card__type {
@ -828,14 +854,14 @@ sm-checkbox {
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
#market_orders_list .list__header { #market_orders_wrapper .list__header {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
} }
#market_orders_list .list__header div { #market_orders_wrapper .list__header div {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
#market_orders_list .list__header { #market_orders_wrapper .list__header {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
grid-template-columns: repeat(3, 1fr) 2rem; grid-template-columns: repeat(3, 1fr) 2rem;
} }
@ -1304,7 +1330,6 @@ sm-checkbox {
transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s;
} }
.order-card .cancel-order .icon { .order-card .cancel-order .icon {
opacity: 0;
transform: translateX(100%); transform: translateX(100%);
} }
.order-card .cancel-order span { .order-card .cancel-order span {
@ -1319,12 +1344,4 @@ sm-checkbox {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
.transaction-card button {
opacity: 0;
transition: opacity 0.3s;
}
.transaction-card:hover button {
opacity: 1;
}
} }

File diff suppressed because one or more lines are too long

View File

@ -133,6 +133,9 @@ sm-button {
sm-form { sm-form {
--gap: 1rem; --gap: 1rem;
} }
sm-copy {
font-size: 0.9rem;
}
ul { ul {
list-style: none; list-style: none;
} }
@ -442,7 +445,9 @@ details {
cursor: pointer; cursor: pointer;
padding: 1rem 0; padding: 1rem 0;
} }
.icon {
flex-shrink: 0;
}
&[open] { &[open] {
padding-bottom: 1rem; padding-bottom: 1rem;
summary { summary {
@ -496,6 +501,26 @@ sm-checkbox {
flex-shrink: 0; flex-shrink: 0;
} }
} }
.tooltip {
position: relative;
z-index: 1;
cursor: pointer;
.banner {
position: absolute;
right: 0;
width: min(20rem, calc(100vw - 1rem));
display: none;
font-size: 0.9rem;
background-color: rgba(var(--foreground-color), 1);
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
border: solid thin rgba(var(--text-color), 0.2);
}
&:hover .banner {
display: block;
}
}
.page-layout { .page-layout {
display: grid; display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
@ -532,10 +557,6 @@ sm-checkbox {
header { header {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
sm-copy {
font-size: 0.9rem;
--button-border-radius: 0.5rem;
}
.h2 { .h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -768,6 +789,8 @@ sm-checkbox {
} }
.transaction-card { .transaction-card {
content-visibility: auto;
contain-intrinsic-size: 2.5rem;
grid-template-columns: repeat(3, 1fr) 2rem; grid-template-columns: repeat(3, 1fr) 2rem;
&__type { &__type {
font-size: 0.9rem; font-size: 0.9rem;
@ -794,7 +817,7 @@ sm-checkbox {
} }
} }
#market_orders_list { #market_orders_wrapper {
.list__header { .list__header {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
@ -1209,7 +1232,6 @@ sm-checkbox {
transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s;
} }
.icon { .icon {
opacity: 0;
transform: translateX(100%); transform: translateX(100%);
} }
span { span {
@ -1233,13 +1255,4 @@ sm-checkbox {
} }
} }
} }
.transaction-card {
button {
opacity: 0;
transition: opacity 0.3s;
}
&:hover button {
opacity: 1;
}
}
} }

View File

@ -112,7 +112,10 @@
</sm-form> </sm-form>
<section id="exchange_wrapper" class="hide user-content"> <section id="exchange_wrapper" class="hide user-content">
<div id="asset_list_wrapper" class="grid gap-1 align-start"> <div id="asset_list_wrapper" class="grid gap-1 align-start">
<h5>ASSETS</h5> <div class="flex align-center space-between">
<h5>ASSETS</h5>
<h5>PRICE</h5>
</div>
<ul id="listed_assets" class="user-content hide"></ul> <ul id="listed_assets" class="user-content hide"></ul>
</div> </div>
<div id="asset_page" class="hide-on-mobile"> <div id="asset_page" class="hide-on-mobile">
@ -131,7 +134,7 @@
</nav> </nav>
<div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile"> <div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile">
<div id="chart_header" class="flex align-center space-between"> <div id="chart_header" class="flex align-center space-between">
<div id="chart_asset"></div> <H4 id="chart_asset"></H4>
<strip-select id="price_duration_selector"> <strip-select id="price_duration_selector">
<strip-option value="hour" title="1 Hour price interval" selected>Hour <strip-option value="hour" title="1 Hour price interval" selected>Hour
</strip-option> </strip-option>
@ -150,15 +153,13 @@
<strip-option value="sell">Sell</strip-option> <strip-option value="sell">Sell</strip-option>
</strip-select> </strip-select>
</div> </div>
<sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.0001" required <div id="get_price" class="flex align-center space-between"></div>
animate> <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001" required
</sm-input>
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required
animate> animate>
</sm-input> </sm-input>
</sm-input> </sm-input>
<sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" <sm-input id="get_total" placeholder="Locked amount (₹)" type="number" min="0.00000001"
required animate> step="0.00000001" required animate>
</sm-input> </sm-input>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<div id="quantity_selector" class="flex align-center quantity-selector"> <div id="quantity_selector" class="flex align-center quantity-selector">
@ -203,7 +204,7 @@
</h4> </h4>
<strip-select id="my_orders_category_selector" class="tab"> <strip-select id="my_orders_category_selector" class="tab">
<strip-option value="open" selected>Open</strip-option> <strip-option value="open" selected>Open</strip-option>
<strip-option value="completed">History</strip-option> <strip-option value="completed">Trades</strip-option>
</strip-select> </strip-select>
</div> </div>
<div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide"> <div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide">
@ -240,7 +241,7 @@
<section id="market" class="grid gap-1 hide mobile-page"> <section id="market" class="grid gap-1 hide mobile-page">
<div class="orders_section__header flex align-center space-between"> <div class="orders_section__header flex align-center space-between">
<h4 class="flex align-center"> <h4 class="flex align-center">
Market orders Market-wide trades
<button onclick="refresh();" title="Refresh" style="margin-left: 1rem;"> <button onclick="refresh();" title="Refresh" style="margin-left: 1rem;">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
@ -252,13 +253,43 @@
</h4> </h4>
<strip-select id="market_orders_category_selector" class="tab"> <strip-select id="market_orders_category_selector" class="tab">
<strip-option value="open" selected>Open</strip-option> <strip-option value="open" selected>Open</strip-option>
<strip-option value="completed">History</strip-option> <strip-option value="completed">Trades</strip-option>
</strip-select> </strip-select>
</div> </div>
<ul id="market_orders_list" class="observe-empty-state"></ul> <div id="market_orders_wrapper">
<p class="empty-state"> <div class="grid gap-1">
No orders placed <div class="flex align-center space-between">
</p> <div class="grid">
<h4>Open orders</h4>
<p>Order placement denotes priority at which orders will get executed.</p>
</div>
<strip-select id="market_open_orders_type_selector" class="tab">
<strip-option value="buy" selected>Buy</strip-option>
<strip-option value="sell">Sell</strip-option>
</strip-select>
</div>
<div id="market_open_orders_wrapper">
<div>
<ul id="market_buy_orders" class="observe-empty-state"></ul>
<p class="empty-state">
No buy orders placed
</p>
</div>
<div>
<ul id="market_sell_orders" class="observe-empty-state"></ul>
<p class="empty-state">
No sell orders placed
</p>
</div>
</div>
</div>
<div>
<ul id="market_trades" class="observe-empty-state"></ul>
<p class="empty-state">
No trades happened
</p>
</div>
</div>
</section> </section>
<section id="wallet" class="grid mobile-page hide"> <section id="wallet" class="grid mobile-page hide">
<h4 id="wallet__header" class="flex align-center"> <h4 id="wallet__header" class="flex align-center">
@ -338,6 +369,24 @@
app. app.
</p> </p>
</details> </details>
<details>
<summary class="interact">
<h4>
Why is there a difference between current asset prices and prices shown as
buying/selling price?
</h4>
<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="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
</svg>
</summary>
<p>
Contrary to other exchanges, the price you see as buying/selling price works as a upper
bound for buying and lower bound for selling. you order will bne executed at
best price determined by the exchange algorithm.
</p>
</details>
<details> <details>
<summary class="interact"> <summary class="interact">
<h4> <h4>
@ -469,14 +518,21 @@
<a href="#/help" class="main_navbar__item user-content hide interact"> <a href="#/help" class="main_navbar__item user-content hide interact">
<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"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /> d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
</svg> </svg>
<div class="item__title">Help</div> <div class="item__title">Help</div>
</a> </a>
</nav> </nav>
</article> </article>
<!--
* show all trades are happening at current price
* show max price allow
* add min price when total is entered
* add amount locked when quantity is entered
* add warning to show if an order is not considered
-->
<sm-popup id="confirm_trade_popup"> <sm-popup id="confirm_trade_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">
@ -643,7 +699,7 @@
</div> </div>
<div class="grid"> <div class="grid">
<h5 id="transaction_time__label" class="label">Completed</h5> <h5 id="transaction_time__label" class="label">Completed</h5>
<h4 id="transaction_time"></h4> <time style="font-size: 0.9rem;" id="transaction_time"></time>
</div> </div>
</div> </div>
</sm-popup> </sm-popup>
@ -687,7 +743,7 @@
<div class="order-card__quantity"></div> <div class="order-card__quantity"></div>
</div> </div>
<div class="grid"> <div class="grid">
<span class="label order-card__price-type">Unit price</span> <span class="label order-card__price-type"></span>
<div class="order-card__price"></div> <div class="order-card__price"></div>
</div> </div>
<time class="order-card__time"></time> <time class="order-card__time"></time>
@ -708,7 +764,7 @@
<div class="transaction-card__quantity"></div> <div class="transaction-card__quantity"></div>
</div> </div>
<div class="grid"> <div class="grid">
<span class="label transaction-card__price-type">Unit price</span> <span class="label transaction-card__price-type">Valid upto</span>
<div class="transaction-card__price"></div> <div class="transaction-card__price"></div>
</div> </div>
<div class="grid"> <div class="grid">
@ -731,7 +787,7 @@
<div class="transaction-card__quantity"></div> <div class="transaction-card__quantity"></div>
</div> </div>
<div class="grid"> <div class="grid">
<span class="label transaction-card__price-type">Unit price</span> <span class="label transaction-card__price-type">Valid upto</span>
<div class="transaction-card__price"></div> <div class="transaction-card__price"></div>
</div> </div>
<div class="grid"> <div class="grid">
@ -774,7 +830,7 @@
<template id="market_transaction_list_template"> <template id="market_transaction_list_template">
<h4 class="grid list__header"> <h4 class="grid list__header">
<div>Quantity</div> <div>Quantity</div>
<div>Unit price</div> <div>Traded at</div>
<div>Total</div> <div>Total</div>
<div></div> <div></div>
</h4> </h4>
@ -1096,11 +1152,11 @@
if (getRef('listed_assets').querySelector('.listed-asset--active')) if (getRef('listed_assets').querySelector('.listed-asset--active'))
getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active') getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active') getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(floGlobals.exchangeRates[params.asset])}</p>` getRef('chart_asset').textContent = `${params.asset}/INR`
getRef('get_price').value = (parseFloat(floGlobals.exchangeRates[params.asset]) * deviation[tradeType]).toFixed(6) ; showSuggestedPrice(params.asset)
getRef('traded_asset').textContent = `Trade ${params.asset}` getRef('traded_asset').textContent = `Trade ${params.asset}`
getRef('trade_button').textContent = `${tradeType} ${params.asset}` getRef('trade_button').textContent = `${tradeType} ${params.asset}`
getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}` getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net, true) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}`
updateTooltip(params.asset, tradeType) updateTooltip(params.asset, tradeType)
} }
const animOptions = { const animOptions = {
@ -1289,6 +1345,14 @@
mobileQuery.addEventListener('change', handleMobileChange) mobileQuery.addEventListener('change', handleMobileChange)
handleMobileChange(mobileQuery) handleMobileChange(mobileQuery)
function showChild(id, index) {
[...getRef(id).children].forEach((child, i) => {
if (i === index)
child.classList.remove('hide')
else
child.classList.add('hide')
})
}
</script> </script>
<script> <script>
function buttonLoader(id, show) { function buttonLoader(id, show) {
@ -1353,8 +1417,36 @@
return listedAssets.hasOwnProperty(asset) ? listedAssets[asset].icon : listedAssets.default.icon; return listedAssets.hasOwnProperty(asset) ? listedAssets[asset].icon : listedAssets.default.icon;
} }
function formatAmount(amount) { function formatAmount(amount, shorten = false) {
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 }) return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: shorten ? 2 : 8 })
}
function getSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
const tradeType = getRef('trade_type_selector').value
return parseFloat((parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType]).toFixed(8))
}
function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
const tradeType = getRef('trade_type_selector').value
getRef('get_price').innerHTML = `
<div class="grid">
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">Current price</div>
<h3>${formatAmount(floGlobals.exchangeRates[asset])}</h3>
</div>
<div class="grid">
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">${tradeType === 'buy' ? 'Highest' : 'Lowest'} price</div>
<h3>${formatAmount(getSuggestedPrice(asset))}</h3>
</div>
<div class="tooltip">
<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 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
<p class="banner">
${tradeType === 'buy' ?
`<b>Highest price</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> higher than current price.` :
`<b>Lowest price</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> lower than current price.`
} System will always try to execute your order at the <b>nearest price possible to current price</b>.
</p>
</div>
`
} }
const chartDimensions = { const chartDimensions = {
@ -1378,7 +1470,7 @@
card.dataset.type = type card.dataset.type = type
card.querySelector('.order-card__type').textContent = type card.querySelector('.order-card__type').textContent = type
card.querySelector('.order-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.order-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.order-card__price-type').textContent = type === 'buy' ? 'Max price' : 'Min price' card.querySelector('.order-card__price-type').textContent = type === 'buy' ? 'Valid upto' : 'Valid until'
card.querySelector('.order-card__price').textContent = formatAmount(price) card.querySelector('.order-card__price').textContent = formatAmount(price)
card.querySelector('.order-card__time').textContent = relativeTime.from(new Date(time).getTime()) card.querySelector('.order-card__time').textContent = relativeTime.from(new Date(time).getTime())
return card return card
@ -1452,18 +1544,6 @@
chartDimensions.width = entries[0].contentRect.width; chartDimensions.width = entries[0].contentRect.width;
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height }); chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
}).observe(getRef('price_chart_wrapper')); }).observe(getRef('price_chart_wrapper'));
function setLastBarText() {
getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
}
setLastBarText();
chart.subscribeCrosshairMove(function (param) {
if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > chartDimensions.width || param.point.y < 0 || param.point.y > chartDimensions.height) {
setLastBarText();
} else {
const price = param.seriesPrices.get(lineSeries);
getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(price)}</p>`;
}
});
}) })
}, },
userOrders() { userOrders() {
@ -1512,34 +1592,60 @@
} }
getRef('orders_list').append(frag) getRef('orders_list').append(frag)
}, },
async marketOrders() { marketOrders() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
getRef('market_orders_list').innerHTML = '';
const ordersType = getRef('market_orders_category_selector').value const ordersType = getRef('market_orders_category_selector').value
const openOrdersType = getRef('market_open_orders_type_selector').value
if (ordersType === 'open') { if (ordersType === 'open') {
try { showChild('market_orders_wrapper', 0)
const [buyOrders, sellOrders] = await Promise.all([floExchangeAPI.getBuyList(), floExchangeAPI.getSellList()]) if (openOrdersType === 'buy') {
const allOpenOrders = [...buyOrders, ...sellOrders].sort((a, b) => new Date(b.time_placed).getTime() - new Date(a.time_placed).getTime()) showChild('market_open_orders_wrapper', 0)
allOpenOrders.forEach(order => { getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>';
const { floID, asset, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order floExchangeAPI.getBuyList().then(buyOrders => {
const orderDetails = { getRef('market_buy_orders').innerHTML = '';
floID, buyOrders.forEach(order => {
asset, const { id, asset, quantity, maxPrice, time_placed } = order
quantity, const orderDetails = {
type: minPrice ? 'sell' : 'buy', id,
unitValue: minPrice || maxPrice, asset,
time: time_placed quantity,
} type: 'buy',
frag.append(render.marketOrderCard(orderDetails)) unitValue: maxPrice,
time: time_placed
}
frag.append(render.marketOrderCard(orderDetails))
})
getRef('market_buy_orders').append(frag)
}).catch(err => {
console.log(err)
})
} else {
showChild('market_open_orders_wrapper', 1)
getRef('market_sell_orders').innerHTML = '<sm-spinner></sm-spinner>';
floExchangeAPI.getSellList().then(sellOrders => {
getRef('market_sell_orders').innerHTML = '';
sellOrders.forEach(order => {
const { id, asset, quantity, minPrice, time_placed } = order
const orderDetails = {
id,
asset,
quantity,
type: 'sell',
unitValue: minPrice,
time: time_placed
}
frag.append(render.marketOrderCard(orderDetails))
})
getRef('market_sell_orders').append(frag)
}).catch(err => {
console.log(err)
}) })
} }
catch (err) {
notify(err.message, 'error')
}
} else { } else {
try { showChild('market_orders_wrapper', 1)
const marketTransactions = await floExchangeAPI.getTradeList() getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>';
marketTransactions.forEach(transaction => { floExchangeAPI.getTradeList().then(trades => {
trades.forEach(transaction => {
const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction
const transactionDetails = { const transactionDetails = {
buyer, buyer,
@ -1551,14 +1657,14 @@
} }
frag.append(render.marketTransactionCard(transactionDetails)) frag.append(render.marketTransactionCard(transactionDetails))
}) })
getRef('market_trades').innerHTML = '';
const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true) const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
getRef('market_orders_list').append(marketTransactionList) getRef('market_trades').append(marketTransactionList)
} getRef('market_trades').append(frag)
catch (err) { }).catch(err => {
notify(err.message, 'error') console.log(err)
} })
} }
getRef('market_orders_list').append(frag)
} }
} }
@ -1650,10 +1756,10 @@
getRef('trade_type_selector').addEventListener('change', e => { getRef('trade_type_selector').addEventListener('change', e => {
tradeType = e.detail.value tradeType = e.detail.value
const selectedAsset = pagesData.params.asset const selectedAsset = pagesData.params.asset
getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price') showSuggestedPrice()
getRef('get_price').value = (parseFloat(floGlobals.exchangeRates[selectedAsset]) * deviation[tradeType]).toFixed(6) ; getRef('get_total').setAttribute('placeholder', tradeType === 'buy' ? `Locked amount (₹)` : `Min amount received (₹)`)
getRef('trade_button').textContent = `${tradeType} ${selectedAsset}` getRef('trade_button').textContent = `${tradeType} ${selectedAsset}`
getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[selectedAsset].net.toFixed(4))} ${selectedAsset}` getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net, true) : `${parseFloat(allTokens[selectedAsset].net.toFixed(4))} ${selectedAsset}`
updateTooltip(selectedAsset, tradeType) updateTooltip(selectedAsset, tradeType)
}) })
getRef('price_duration_selector').addEventListener('change', e => { getRef('price_duration_selector').addEventListener('change', e => {
@ -1663,7 +1769,7 @@
hidePopup() hidePopup()
const asset = pagesData.params.asset; const asset = pagesData.params.asset;
const quantity = parseFloat(getRef('get_quantity').value) const quantity = parseFloat(getRef('get_quantity').value)
const price = parseFloat(getRef('get_price').value) const price = getSuggestedPrice()
showProcess('trade_button_wrapper') showProcess('trade_button_wrapper')
try { try {
if (tradeType === 'buy') { if (tradeType === 'buy') {
@ -1698,34 +1804,27 @@
} }
getRef('quantity_selector').addEventListener('click', e => { getRef('quantity_selector').addEventListener('click', e => {
if (e.target.closest('button')) { if (e.target.closest('button')) {
const target = e.target.closest('button')
const unitValue = parseFloat(getRef('get_price').value)
const fraction = parseFloat(target.value)
const selectedAsset = pagesData.params.asset const selectedAsset = pagesData.params.asset
const target = e.target.closest('button')
const unitValue = getSuggestedPrice()
const fraction = parseFloat(target.value)
if (tradeType === 'buy') { if (tradeType === 'buy') {
console.log(parseFloat((fraction * allTokens['rupee'].net).toFixed(4)), parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4))) getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(8))
getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(2)) getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(8))
getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4))
} else { } else {
getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(2)) getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(8))
getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(4)) getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(8))
} }
} }
}) })
getRef('get_price').addEventListener('keyup', e => {
const unitValue = parseFloat(getRef('get_price').value) || floGlobals.exchangeRates[pagesData.params.asset]
const quantity = parseFloat(getRef('get_quantity').value) || 0
getRef('get_total').value = parseFloat((quantity * unitValue).toFixed(2)) || 0
})
getRef('get_quantity').addEventListener('keyup', e => { getRef('get_quantity').addEventListener('keyup', e => {
const unitValue = parseFloat(getRef('get_price').value) const unitValue = getSuggestedPrice()
getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(2)) || 0 getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(8)) || 0
}) })
getRef('get_total').addEventListener('keyup', e => { getRef('get_total').addEventListener('keyup', e => {
const unitValue = parseFloat(getRef('get_price').value) const unitValue = getSuggestedPrice()
getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitValue).toFixed(6)) || 0 getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitValue).toFixed(8)) || 0
}) })
getRef('wallet_actions').addEventListener('click', e => { getRef('wallet_actions').addEventListener('click', e => {
@ -1734,7 +1833,7 @@
const type = target.value const type = target.value
const asset = getRef('wallet_asset_selector').value const asset = getRef('wallet_asset_selector').value
getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[asset].net.toFixed(4))} ${asset}` getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${parseFloat(allTokens[asset].net.toFixed(4))} ${asset}`
getRef('wallet_popup__cta').textContent = `${type} ${asset}` getRef('wallet_popup__cta').textContent = `${type} ${asset}`
getRef('wallet_popup__cta').setAttribute('value', type) getRef('wallet_popup__cta').setAttribute('value', type)
getRef('wallet_popup__title').textContent = `${type} ${asset}` getRef('wallet_popup__title').textContent = `${type} ${asset}`
@ -2070,7 +2169,8 @@
getRef('my_orders_category_selector').addEventListener('change', render.userOrders) getRef('my_orders_category_selector').addEventListener('change', render.userOrders)
getRef('market_orders_category_selector').addEventListener('change', render.marketOrders) getRef('market_orders_category_selector').addEventListener('change', render.marketOrders)
getRef('market_orders_list').addEventListener('click', e => { getRef('market_open_orders_type_selector').addEventListener('change', render.marketOrders)
getRef('market').addEventListener('click', e => {
if (e.target.closest('.more-info')) { if (e.target.closest('.more-info')) {
showMoreDetails(e) showMoreDetails(e)
} }
@ -2091,10 +2191,10 @@
const asset = pagesData.params.asset; const asset = pagesData.params.asset;
const tradeType = getRef('trade_type_selector').value const tradeType = getRef('trade_type_selector').value
const quantity = parseFloat(getRef('get_quantity').value) const quantity = parseFloat(getRef('get_quantity').value)
const price = parseFloat(getRef('get_price').value) const price = getSuggestedPrice()
const total = parseFloat(getRef('get_total').value) const total = parseFloat(getRef('get_total').value)
getRef('confirm_trade__title').textContent = `${tradeType} ${asset}` getRef('confirm_trade__title').textContent = `${tradeType} ${asset}`
getRef('confirm_trade__price_type').textContent = tradeType === 'buy' ? 'Max price' : 'Min price' getRef('confirm_trade__price_type').textContent = tradeType === 'buy' ? 'Valid upto' : 'Valid until'
getRef('confirm_trade__price').textContent = formatAmount(price) getRef('confirm_trade__price').textContent = formatAmount(price)
getRef('confirm_trade__quantity').textContent = quantity getRef('confirm_trade__quantity').textContent = quantity
getRef('confirm_trade__total').textContent = formatAmount(total) getRef('confirm_trade__total').textContent = formatAmount(total)
@ -2247,8 +2347,10 @@
} }
} }
} }
if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== '')) if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== '')) {
getRef('get_price').value = (parseFloat(rates[pagesData.params.asset]) * deviation[tradeType]).toFixed(6) ; const tradeType = getRef('trade_type_selector').value
showSuggestedPrice()
}
if (refreshButton) if (refreshButton)
buttonLoader('wallet_balance_refresh_button', false); buttonLoader('wallet_balance_refresh_button', false);
}).catch(error => console.error(error.message)) }).catch(error => console.error(error.message))
@ -2296,9 +2398,9 @@
document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide')) document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide'))
getRef("user_id").value = acc.floID; getRef("user_id").value = acc.floID;
getRef("sink_id").value = acc.sinkID; getRef("sink_id").value = acc.sinkID;
if(acc.subAdmin) if (acc.subAdmin)
console.info("logged in as subAdmin"); console.info("logged in as subAdmin");
// rupee balance init // rupee balance init
allTokens[floGlobals.currency] = { allTokens[floGlobals.currency] = {
total: 0, total: 0,