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

UI and UX improvements

Browse Source 
-- separated market buy and sell orders with priority based rendering
This commit is contained in:
sairaj mote 2022-05-04 02:28:35 +05:30
parent 4ff4f4356e
commit 442562fc67
4 changed files with 143 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/css/main.css
View File

@ -829,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 {
@ -852,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;
} }
@ -1328,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 {
@ -1343,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;
}
} }

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

File diff suppressed because one or more lines are too long

14
docs/css/main.scss
View File

@ -789,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;
@ -815,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;
@ -1230,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 {
@ -1254,13 +1255,4 @@ sm-checkbox {
} }
} }
} }
.transaction-card {
button {
opacity: 0;
transition: opacity 0.3s;
}
&:hover button {
opacity: 1;
}
}
} }

194
docs/index.html
View File

@ -158,8 +158,8 @@
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">
@ -204,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">
@ -241,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">
@ -253,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">
@ -496,11 +526,13 @@
</a> </a>
</nav> </nav>
</article> </article>
<!--
* show all trades are happening at current price * show all trades are happening at current price
* show max price allow * show max price allow
* remove graph price * 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">
@ -667,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>
@ -711,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">Ordered at</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>
@ -732,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">Ordered at</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">
@ -755,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">Ordered at</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">
@ -798,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>Ordered at</div> <div>Traded at</div>
<div>Total</div> <div>Total</div>
<div></div> <div></div>
</h4> </h4>
@ -1124,7 +1156,7 @@
showSuggestedPrice(params.asset) 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 = {
@ -1313,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) {
@ -1377,8 +1417,8 @@
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') { function getSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
@ -1386,17 +1426,24 @@
return parseFloat((parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType]).toFixed(8)) return parseFloat((parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType]).toFixed(8))
} }
function showSuggestedPrice(asset) { function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
const tradeType = getRef('trade_type_selector').value const tradeType = getRef('trade_type_selector').value
getRef('get_price').innerHTML = ` getRef('get_price').innerHTML = `
<div class="grid"> <div class="grid">
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">${tradeType === 'buy' ? 'Buy order valid upto' : 'Sell order valid until'}</div> <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> <h3>${formatAmount(getSuggestedPrice(asset))}</h3>
</div> </div>
<div class="tooltip"> <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> <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"> <p class="banner">
This is the ${tradeType === 'buy' ? `<b>Highest price</b> upto` : `<b>Lowest price</b> until`} which your order will be considered valid. System will always try to match your order with the best price. ${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> </p>
</div> </div>
` `
@ -1545,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,
@ -1584,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)
} }
} }
@ -1684,8 +1757,9 @@
tradeType = e.detail.value tradeType = e.detail.value
const selectedAsset = pagesData.params.asset const selectedAsset = pagesData.params.asset
showSuggestedPrice() showSuggestedPrice()
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 => {
@ -1735,19 +1809,18 @@
const unitValue = getSuggestedPrice() const unitValue = getSuggestedPrice()
const fraction = parseFloat(target.value) 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_quantity').addEventListener('keyup', e => { getRef('get_quantity').addEventListener('keyup', e => {
const unitValue = getSuggestedPrice() 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 = getSuggestedPrice() const unitValue = getSuggestedPrice()
@ -1760,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}`
@ -2096,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)
} }