Merge branch 'main' of https://github.com/ranchimall/exchange-market
This commit is contained in:
sairajzero
commit
cb8a83a6f8
@ -143,6 +143,10 @@ sm-form {
|
||||
--gap: 1rem;
|
||||
}
|
||||
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
@ -461,6 +465,9 @@ details summary {
|
||||
cursor: pointer;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
details .icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
details[open] {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
@ -518,6 +525,27 @@ sm-checkbox {
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
|
||||
@ -558,10 +586,6 @@ sm-checkbox {
|
||||
#sign_up header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
#sign_up sm-copy {
|
||||
font-size: 0.9rem;
|
||||
--button-border-radius: 0.5rem;
|
||||
}
|
||||
#sign_up .h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -805,6 +829,8 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
.transaction-card {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 2.5rem;
|
||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||
}
|
||||
.transaction-card__type {
|
||||
@ -828,14 +854,14 @@ sm-checkbox {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#market_orders_list .list__header {
|
||||
#market_orders_wrapper .list__header {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#market_orders_list .list__header div {
|
||||
#market_orders_wrapper .list__header div {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
#market_orders_list .list__header {
|
||||
#market_orders_wrapper .list__header {
|
||||
margin-bottom: 0.5rem;
|
||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||
}
|
||||
@ -1304,7 +1330,6 @@ sm-checkbox {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.order-card .cancel-order .icon {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.order-card .cancel-order span {
|
||||
@ -1319,12 +1344,4 @@ sm-checkbox {
|
||||
opacity: 1;
|
||||
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
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -133,6 +133,9 @@ sm-button {
|
||||
sm-form {
|
||||
--gap: 1rem;
|
||||
}
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
@ -442,7 +445,9 @@ details {
|
||||
cursor: pointer;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&[open] {
|
||||
padding-bottom: 1rem;
|
||||
summary {
|
||||
@ -496,6 +501,26 @@ sm-checkbox {
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
|
||||
@ -532,10 +557,6 @@ sm-checkbox {
|
||||
header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
--button-border-radius: 0.5rem;
|
||||
}
|
||||
.h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -768,6 +789,8 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
.transaction-card {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 2.5rem;
|
||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||
&__type {
|
||||
font-size: 0.9rem;
|
||||
@ -794,7 +817,7 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
#market_orders_list {
|
||||
#market_orders_wrapper {
|
||||
.list__header {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
@ -1209,7 +1232,6 @@ sm-checkbox {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.icon {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
span {
|
||||
@ -1233,13 +1255,4 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
}
|
||||
.transaction-card {
|
||||
button {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
&:hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
298
docs/index.html
298
docs/index.html
@ -112,7 +112,10 @@
|
||||
</sm-form>
|
||||
<section id="exchange_wrapper" class="hide user-content">
|
||||
<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>
|
||||
</div>
|
||||
<div id="asset_page" class="hide-on-mobile">
|
||||
@ -131,7 +134,7 @@
|
||||
</nav>
|
||||
<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_asset"></div>
|
||||
<H4 id="chart_asset"></H4>
|
||||
<strip-select id="price_duration_selector">
|
||||
<strip-option value="hour" title="1 Hour price interval" selected>Hour
|
||||
</strip-option>
|
||||
@ -150,15 +153,13 @@
|
||||
<strip-option value="sell">Sell</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.0001" required
|
||||
animate>
|
||||
</sm-input>
|
||||
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required
|
||||
<div id="get_price" class="flex align-center space-between"></div>
|
||||
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001" required
|
||||
animate>
|
||||
</sm-input>
|
||||
</sm-input>
|
||||
<sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01"
|
||||
required animate>
|
||||
<sm-input id="get_total" placeholder="Locked amount (₹)" type="number" min="0.00000001"
|
||||
step="0.00000001" required animate>
|
||||
</sm-input>
|
||||
<div class="grid gap-0-5">
|
||||
<div id="quantity_selector" class="flex align-center quantity-selector">
|
||||
@ -203,7 +204,7 @@
|
||||
</h4>
|
||||
<strip-select id="my_orders_category_selector" class="tab">
|
||||
<strip-option value="open" selected>Open</strip-option>
|
||||
<strip-option value="completed">History</strip-option>
|
||||
<strip-option value="completed">Trades</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<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">
|
||||
<div class="orders_section__header flex align-center space-between">
|
||||
<h4 class="flex align-center">
|
||||
Market orders
|
||||
Market-wide trades
|
||||
<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"
|
||||
width="24px" fill="#000000">
|
||||
@ -252,13 +253,43 @@
|
||||
</h4>
|
||||
<strip-select id="market_orders_category_selector" class="tab">
|
||||
<strip-option value="open" selected>Open</strip-option>
|
||||
<strip-option value="completed">History</strip-option>
|
||||
<strip-option value="completed">Trades</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<ul id="market_orders_list" class="observe-empty-state"></ul>
|
||||
<p class="empty-state">
|
||||
No orders placed
|
||||
</p>
|
||||
<div id="market_orders_wrapper">
|
||||
<div class="grid gap-1">
|
||||
<div class="flex align-center space-between">
|
||||
<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 id="wallet" class="grid mobile-page hide">
|
||||
<h4 id="wallet__header" class="flex align-center">
|
||||
@ -338,6 +369,24 @@
|
||||
app.
|
||||
</p>
|
||||
</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>
|
||||
<summary class="interact">
|
||||
<h4>
|
||||
@ -469,14 +518,21 @@
|
||||
<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"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M0 0h24v24H0V0z" 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 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>
|
||||
<div class="item__title">Help</div>
|
||||
</a>
|
||||
</nav>
|
||||
</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">
|
||||
<header slot="header" class="popup__header">
|
||||
@ -643,7 +699,7 @@
|
||||
</div>
|
||||
<div class="grid">
|
||||
<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>
|
||||
</sm-popup>
|
||||
@ -687,7 +743,7 @@
|
||||
<div class="order-card__quantity"></div>
|
||||
</div>
|
||||
<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>
|
||||
<time class="order-card__time"></time>
|
||||
@ -708,7 +764,7 @@
|
||||
<div class="transaction-card__quantity"></div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="grid">
|
||||
@ -731,7 +787,7 @@
|
||||
<div class="transaction-card__quantity"></div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="grid">
|
||||
@ -774,7 +830,7 @@
|
||||
<template id="market_transaction_list_template">
|
||||
<h4 class="grid list__header">
|
||||
<div>Quantity</div>
|
||||
<div>Unit price</div>
|
||||
<div>Traded at</div>
|
||||
<div>Total</div>
|
||||
<div></div>
|
||||
</h4>
|
||||
@ -1096,11 +1152,11 @@
|
||||
if (getRef('listed_assets').querySelector('.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('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(floGlobals.exchangeRates[params.asset])}</p>`
|
||||
getRef('get_price').value = (parseFloat(floGlobals.exchangeRates[params.asset]) * deviation[tradeType]).toFixed(6) ;
|
||||
getRef('chart_asset').textContent = `${params.asset}/INR`
|
||||
showSuggestedPrice(params.asset)
|
||||
getRef('traded_asset').textContent = `Trade ${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)
|
||||
}
|
||||
const animOptions = {
|
||||
@ -1289,6 +1345,14 @@
|
||||
mobileQuery.addEventListener('change', handleMobileChange)
|
||||
|
||||
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>
|
||||
function buttonLoader(id, show) {
|
||||
@ -1353,8 +1417,36 @@
|
||||
return listedAssets.hasOwnProperty(asset) ? listedAssets[asset].icon : listedAssets.default.icon;
|
||||
}
|
||||
|
||||
function formatAmount(amount) {
|
||||
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 })
|
||||
function formatAmount(amount, shorten = false) {
|
||||
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 = {
|
||||
@ -1378,7 +1470,7 @@
|
||||
card.dataset.type = type
|
||||
card.querySelector('.order-card__type').textContent = type
|
||||
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__time').textContent = relativeTime.from(new Date(time).getTime())
|
||||
return card
|
||||
@ -1452,18 +1544,6 @@
|
||||
chartDimensions.width = entries[0].contentRect.width;
|
||||
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
|
||||
}).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() {
|
||||
@ -1512,34 +1592,60 @@
|
||||
}
|
||||
getRef('orders_list').append(frag)
|
||||
},
|
||||
async marketOrders() {
|
||||
marketOrders() {
|
||||
const frag = document.createDocumentFragment()
|
||||
getRef('market_orders_list').innerHTML = '';
|
||||
const ordersType = getRef('market_orders_category_selector').value
|
||||
const openOrdersType = getRef('market_open_orders_type_selector').value
|
||||
if (ordersType === 'open') {
|
||||
try {
|
||||
const [buyOrders, sellOrders] = await Promise.all([floExchangeAPI.getBuyList(), floExchangeAPI.getSellList()])
|
||||
const allOpenOrders = [...buyOrders, ...sellOrders].sort((a, b) => new Date(b.time_placed).getTime() - new Date(a.time_placed).getTime())
|
||||
allOpenOrders.forEach(order => {
|
||||
const { floID, asset, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
|
||||
const orderDetails = {
|
||||
floID,
|
||||
asset,
|
||||
quantity,
|
||||
type: minPrice ? 'sell' : 'buy',
|
||||
unitValue: minPrice || maxPrice,
|
||||
time: time_placed
|
||||
}
|
||||
frag.append(render.marketOrderCard(orderDetails))
|
||||
showChild('market_orders_wrapper', 0)
|
||||
if (openOrdersType === 'buy') {
|
||||
showChild('market_open_orders_wrapper', 0)
|
||||
getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>';
|
||||
floExchangeAPI.getBuyList().then(buyOrders => {
|
||||
getRef('market_buy_orders').innerHTML = '';
|
||||
buyOrders.forEach(order => {
|
||||
const { id, asset, quantity, maxPrice, time_placed } = order
|
||||
const orderDetails = {
|
||||
id,
|
||||
asset,
|
||||
quantity,
|
||||
type: 'buy',
|
||||
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 {
|
||||
try {
|
||||
const marketTransactions = await floExchangeAPI.getTradeList()
|
||||
marketTransactions.forEach(transaction => {
|
||||
showChild('market_orders_wrapper', 1)
|
||||
getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>';
|
||||
floExchangeAPI.getTradeList().then(trades => {
|
||||
trades.forEach(transaction => {
|
||||
const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction
|
||||
const transactionDetails = {
|
||||
buyer,
|
||||
@ -1551,14 +1657,14 @@
|
||||
}
|
||||
frag.append(render.marketTransactionCard(transactionDetails))
|
||||
})
|
||||
getRef('market_trades').innerHTML = '';
|
||||
const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
|
||||
getRef('market_orders_list').append(marketTransactionList)
|
||||
}
|
||||
catch (err) {
|
||||
notify(err.message, 'error')
|
||||
}
|
||||
getRef('market_trades').append(marketTransactionList)
|
||||
getRef('market_trades').append(frag)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
getRef('market_orders_list').append(frag)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1650,10 +1756,10 @@
|
||||
getRef('trade_type_selector').addEventListener('change', e => {
|
||||
tradeType = e.detail.value
|
||||
const selectedAsset = pagesData.params.asset
|
||||
getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price')
|
||||
getRef('get_price').value = (parseFloat(floGlobals.exchangeRates[selectedAsset]) * deviation[tradeType]).toFixed(6) ;
|
||||
showSuggestedPrice()
|
||||
getRef('get_total').setAttribute('placeholder', tradeType === 'buy' ? `Locked amount (₹)` : `Min amount received (₹)`)
|
||||
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)
|
||||
})
|
||||
getRef('price_duration_selector').addEventListener('change', e => {
|
||||
@ -1663,7 +1769,7 @@
|
||||
hidePopup()
|
||||
const asset = pagesData.params.asset;
|
||||
const quantity = parseFloat(getRef('get_quantity').value)
|
||||
const price = parseFloat(getRef('get_price').value)
|
||||
const price = getSuggestedPrice()
|
||||
showProcess('trade_button_wrapper')
|
||||
try {
|
||||
if (tradeType === 'buy') {
|
||||
@ -1698,34 +1804,27 @@
|
||||
}
|
||||
getRef('quantity_selector').addEventListener('click', e => {
|
||||
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 target = e.target.closest('button')
|
||||
const unitValue = getSuggestedPrice()
|
||||
const fraction = parseFloat(target.value)
|
||||
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(2))
|
||||
getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4))
|
||||
getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(8))
|
||||
getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(8))
|
||||
} else {
|
||||
getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(2))
|
||||
getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(4))
|
||||
getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(8))
|
||||
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 => {
|
||||
const unitValue = parseFloat(getRef('get_price').value)
|
||||
getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(2)) || 0
|
||||
const unitValue = getSuggestedPrice()
|
||||
getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(8)) || 0
|
||||
})
|
||||
getRef('get_total').addEventListener('keyup', e => {
|
||||
const unitValue = parseFloat(getRef('get_price').value)
|
||||
getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitValue).toFixed(6)) || 0
|
||||
const unitValue = getSuggestedPrice()
|
||||
getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitValue).toFixed(8)) || 0
|
||||
})
|
||||
|
||||
getRef('wallet_actions').addEventListener('click', e => {
|
||||
@ -1734,7 +1833,7 @@
|
||||
const type = target.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').setAttribute('value', type)
|
||||
getRef('wallet_popup__title').textContent = `${type} ${asset}`
|
||||
@ -2070,7 +2169,8 @@
|
||||
getRef('my_orders_category_selector').addEventListener('change', render.userOrders)
|
||||
|
||||
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')) {
|
||||
showMoreDetails(e)
|
||||
}
|
||||
@ -2091,10 +2191,10 @@
|
||||
const asset = pagesData.params.asset;
|
||||
const tradeType = getRef('trade_type_selector').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)
|
||||
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__quantity').textContent = quantity
|
||||
getRef('confirm_trade__total').textContent = formatAmount(total)
|
||||
@ -2247,8 +2347,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== ''))
|
||||
getRef('get_price').value = (parseFloat(rates[pagesData.params.asset]) * deviation[tradeType]).toFixed(6) ;
|
||||
if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== '')) {
|
||||
const tradeType = getRef('trade_type_selector').value
|
||||
showSuggestedPrice()
|
||||
}
|
||||
if (refreshButton)
|
||||
buttonLoader('wallet_balance_refresh_button', false);
|
||||
}).catch(error => console.error(error.message))
|
||||
@ -2296,9 +2398,9 @@
|
||||
document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide'))
|
||||
getRef("user_id").value = acc.floID;
|
||||
getRef("sink_id").value = acc.sinkID;
|
||||
if(acc.subAdmin)
|
||||
if (acc.subAdmin)
|
||||
console.info("logged in as subAdmin");
|
||||
|
||||
|
||||
// rupee balance init
|
||||
allTokens[floGlobals.currency] = {
|
||||
total: 0,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user