UI and UX improvements
-- New market-wide open orders UI -- better confirmation message details for buying and selling
This commit is contained in:
sairaj mote
parent
d6bb46b092
commit
86d8e274ec
@ -155,6 +155,10 @@ ul {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
@ -233,6 +237,10 @@ ul {
|
|||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gap-0-3 {
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
.gap-0-5 {
|
.gap-0-5 {
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
@ -415,13 +423,13 @@ ul {
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 1.5rem 0 0.8rem;
|
padding: 0 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
grid-template-columns: auto 1fr auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup__header__close {
|
.popup__header__close {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
margin-left: -0.7rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -828,32 +836,49 @@ sm-checkbox {
|
|||||||
margin-left: 0.3rem;
|
margin-left: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transaction-card {
|
.transaction-card__type,
|
||||||
content-visibility: auto;
|
.live-order__type {
|
||||||
contain-intrinsic-size: 2.5rem;
|
|
||||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
|
||||||
}
|
|
||||||
.transaction-card__type {
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
.transaction-card[data-type=Bought] .transaction-card__type, .transaction-card--buy .transaction-card__type {
|
.transaction-card[data-type=Bought] .transaction-card__type, .transaction-card--buy .transaction-card__type,
|
||||||
|
.transaction-card[data-type=Bought] .live-order__type,
|
||||||
|
.transaction-card--buy .live-order__type,
|
||||||
|
.live-order[data-type=Bought] .transaction-card__type,
|
||||||
|
.live-order--buy .transaction-card__type,
|
||||||
|
.live-order[data-type=Bought] .live-order__type,
|
||||||
|
.live-order--buy .live-order__type {
|
||||||
color: var(--green);
|
color: var(--green);
|
||||||
}
|
}
|
||||||
.transaction-card[data-type=Sold] .transaction-card__type, .transaction-card--sell .transaction-card__type {
|
.transaction-card[data-type=Sold] .transaction-card__type, .transaction-card--sell .transaction-card__type,
|
||||||
|
.transaction-card[data-type=Sold] .live-order__type,
|
||||||
|
.transaction-card--sell .live-order__type,
|
||||||
|
.live-order[data-type=Sold] .transaction-card__type,
|
||||||
|
.live-order--sell .transaction-card__type,
|
||||||
|
.live-order[data-type=Sold] .live-order__type,
|
||||||
|
.live-order--sell .live-order__type {
|
||||||
color: var(--danger-color);
|
color: var(--danger-color);
|
||||||
}
|
}
|
||||||
.transaction-card__total {
|
.transaction-card__total,
|
||||||
|
.live-order__total {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
.transaction-card__quantity, .transaction-card__price {
|
.transaction-card__quantity, .transaction-card__price,
|
||||||
|
.live-order__quantity,
|
||||||
|
.live-order__price {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: rgba(var(--text-color), 0.9);
|
color: rgba(var(--text-color), 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.transaction-card {
|
||||||
|
content-visibility: auto;
|
||||||
|
contain-intrinsic-size: 2.5rem;
|
||||||
|
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
#market_orders_wrapper .list__header {
|
#market_orders_wrapper .list__header {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -866,6 +891,20 @@ sm-checkbox {
|
|||||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.live-order {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
|
}
|
||||||
|
.live-order[data-type=buy] {
|
||||||
|
background-color: #00fa9a10;
|
||||||
|
}
|
||||||
|
.live-order[data-type=sell] {
|
||||||
|
background-color: #e2135110;
|
||||||
|
}
|
||||||
|
|
||||||
#wallet {
|
#wallet {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: auto;
|
width: auto;
|
||||||
@ -1160,7 +1199,7 @@ sm-checkbox {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.popup__header {
|
.popup__header {
|
||||||
padding: 1rem 1.5rem 0 0.8rem;
|
padding: 1rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#confirmation_popup {
|
#confirmation_popup {
|
||||||
|
|||||||
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
@ -143,6 +143,9 @@ ul {
|
|||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -223,6 +226,9 @@ ul {
|
|||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gap-0-3 {
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
.gap-0-5 {
|
.gap-0-5 {
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
@ -396,13 +402,13 @@ ul {
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 1.5rem 0 0.8rem;
|
padding: 0 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
grid-template-columns: auto 1fr auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup__header__close {
|
.popup__header__close {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
margin-left: -0.7rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -788,10 +794,8 @@ sm-checkbox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.transaction-card {
|
.transaction-card,
|
||||||
content-visibility: auto;
|
.live-order {
|
||||||
contain-intrinsic-size: 2.5rem;
|
|
||||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
|
||||||
&__type {
|
&__type {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -816,6 +820,11 @@ sm-checkbox {
|
|||||||
color: rgba(var(--text-color), 0.9);
|
color: rgba(var(--text-color), 0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.transaction-card {
|
||||||
|
content-visibility: auto;
|
||||||
|
contain-intrinsic-size: 2.5rem;
|
||||||
|
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
#market_orders_wrapper {
|
#market_orders_wrapper {
|
||||||
.list__header {
|
.list__header {
|
||||||
@ -830,6 +839,19 @@ sm-checkbox {
|
|||||||
grid-template-columns: repeat(3, 1fr) 2rem;
|
grid-template-columns: repeat(3, 1fr) 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.live-order {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
|
&[data-type="buy"] {
|
||||||
|
background-color: #00fa9a10;
|
||||||
|
}
|
||||||
|
&[data-type="sell"] {
|
||||||
|
background-color: #e2135110;
|
||||||
|
}
|
||||||
|
}
|
||||||
#wallet {
|
#wallet {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: auto;
|
width: auto;
|
||||||
@ -1076,7 +1098,7 @@ sm-checkbox {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
.popup__header {
|
.popup__header {
|
||||||
padding: 1rem 1.5rem 0 0.8rem;
|
padding: 1rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
#confirmation_popup {
|
#confirmation_popup {
|
||||||
--width: 24rem;
|
--width: 24rem;
|
||||||
|
|||||||
182
docs/index.html
182
docs/index.html
@ -258,24 +258,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="market_orders_wrapper">
|
<div id="market_orders_wrapper">
|
||||||
<div class="grid gap-1">
|
<div class="grid gap-1">
|
||||||
<div class="flex align-center space-between">
|
<div class="grid">
|
||||||
<div class="grid">
|
<h4>Open orders</h4>
|
||||||
<h4>Open orders</h4>
|
<p>Order placement denotes priority at which orders will get executed.</p>
|
||||||
<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>
|
||||||
<div id="market_open_orders_wrapper">
|
<div class="flex text-center">
|
||||||
<div>
|
<b class="flex-1" style="color: var(--green);">Buy</b>
|
||||||
|
<b class="flex-1" style="color: var(--danger-color);">Sell</b>
|
||||||
|
</div>
|
||||||
|
<div id="market_open_orders_wrapper" class="flex gap-0-5">
|
||||||
|
<div class="flex-1">
|
||||||
<ul id="market_buy_orders" class="observe-empty-state"></ul>
|
<ul id="market_buy_orders" class="observe-empty-state"></ul>
|
||||||
<p class="empty-state">
|
<p class="empty-state">
|
||||||
No buy orders placed
|
No buy orders placed
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="flex-1">
|
||||||
<ul id="market_sell_orders" class="observe-empty-state"></ul>
|
<ul id="market_sell_orders" class="observe-empty-state"></ul>
|
||||||
<p class="empty-state">
|
<p class="empty-state">
|
||||||
No sell orders placed
|
No sell orders placed
|
||||||
@ -530,7 +528,6 @@
|
|||||||
* show all trades are happening at current price
|
* show all trades are happening at current price
|
||||||
* show max price allow
|
* show max price allow
|
||||||
* add min price when total is entered
|
* add min price when total is entered
|
||||||
* add amount locked when quantity is entered
|
|
||||||
* add warning to show if an order is not considered
|
* add warning to show if an order is not considered
|
||||||
-->
|
-->
|
||||||
|
|
||||||
@ -546,29 +543,7 @@
|
|||||||
<h3 id="confirm_trade__title" class="uppercase">BUY</h3>
|
<h3 id="confirm_trade__title" class="uppercase">BUY</h3>
|
||||||
</header>
|
</header>
|
||||||
<section class="grid gap-1-5">
|
<section class="grid gap-1-5">
|
||||||
<div class="grid gap-0-5">
|
<div id="confirm_trade__details" class="grid gap-1-5"></div>
|
||||||
<h5 id="confirm_trade__price_type"></h5>
|
|
||||||
<h4 id="confirm_trade__price"></h4>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-0-5">
|
|
||||||
<h5>Quantity</h5>
|
|
||||||
<h4 id="confirm_trade__quantity"></h4>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-0-5">
|
|
||||||
<h5>Total</h5>
|
|
||||||
<h4 id="confirm_trade__total"></h4>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-center tip">
|
|
||||||
<svg class="icon margin-right-0-5" style="height: 1em; width: 1em;" 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" y="0" />
|
|
||||||
<path
|
|
||||||
d="M7,20h4c0,1.1-0.9,2-2,2S7,21.1,7,20z M5,19h8v-2H5V19z M16.5,9.5c0,3.82-2.66,5.86-3.77,6.5H5.27 C4.16,15.36,1.5,13.32,1.5,9.5C1.5,5.36,4.86,2,9,2S16.5,5.36,16.5,9.5z M14.5,9.5C14.5,6.47,12.03,4,9,4S3.5,6.47,3.5,9.5 c0,2.47,1.49,3.89,2.35,4.5h6.3C13.01,13.39,14.5,11.97,14.5,9.5z M21.37,7.37L20,8l1.37,0.63L22,10l0.63-1.37L24,8l-1.37-0.63L22,6 L21.37,7.37z M19,6l0.94-2.06L22,3l-2.06-0.94L19,0l-0.94,2.06L16,3l2.06,0.94L19,6z" />
|
|
||||||
</svg>
|
|
||||||
<p id="confirm_trade__tip" style="font-size: inherit;">
|
|
||||||
Buy FLO worth of the above percentage rupee
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<sm-button variant="primary" onclick="tradeAsset()" autofocus>Confirm</sm-button>
|
<sm-button variant="primary" onclick="tradeAsset()" autofocus>Confirm</sm-button>
|
||||||
</section>
|
</section>
|
||||||
</sm-popup>
|
</sm-popup>
|
||||||
@ -758,26 +733,27 @@
|
|||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
<template id="market_order_template">
|
<template id="market_order_template">
|
||||||
<li class="list__item transaction-card align-center">
|
<li class="live-order align-center">
|
||||||
<div class="grid">
|
<div class="flex gap-1 space-between align-start">
|
||||||
<div class="transaction-card__type capitalize"></div>
|
<b class="transaction-card__quantity"></b>
|
||||||
<div class="transaction-card__quantity"></div>
|
<button class="more-info" title="View order details">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid">
|
<div class="flex gap-0-5">
|
||||||
<span class="label transaction-card__price-type">Valid upto</span>
|
<div class="grid flex-1">
|
||||||
<div class="transaction-card__price"></div>
|
<span class="label">Valid upto</span>
|
||||||
|
<b class="transaction-card__price"></b>
|
||||||
|
</div>
|
||||||
|
<div class="grid flex-1">
|
||||||
|
<span class="label">Total</span>
|
||||||
|
<div class="transaction-card__total"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid">
|
|
||||||
<span class="label transaction-card__price-type">Total</span>
|
|
||||||
<div class="transaction-card__total"></div>
|
|
||||||
</div>
|
|
||||||
<button class="more-info" title="View order details">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
|
|
||||||
<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>
|
|
||||||
</button>
|
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
<template id="transaction_template">
|
<template id="transaction_template">
|
||||||
@ -787,7 +763,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">Valid upto</span>
|
<span class="label transaction-card__price-type">Unit price</span>
|
||||||
<div class="transaction-card__price"></div>
|
<div class="transaction-card__price"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
@ -1493,7 +1469,6 @@
|
|||||||
const unitValue = minPrice || maxPrice;
|
const unitValue = minPrice || maxPrice;
|
||||||
card.dataset.type = type
|
card.dataset.type = type
|
||||||
card.classList.add(`transaction-card--${type}`)
|
card.classList.add(`transaction-card--${type}`)
|
||||||
card.querySelector('.transaction-card__type').textContent = type
|
|
||||||
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
||||||
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
|
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
|
||||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat((unitValue * quantity).toFixed(2)))
|
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat((unitValue * quantity).toFixed(2)))
|
||||||
@ -1594,40 +1569,34 @@
|
|||||||
marketOrders() {
|
marketOrders() {
|
||||||
const frag = document.createDocumentFragment()
|
const frag = document.createDocumentFragment()
|
||||||
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') {
|
||||||
showChild('market_orders_wrapper', 0)
|
showChild('market_orders_wrapper', 0)
|
||||||
if (openOrdersType === 'buy') {
|
getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>';
|
||||||
showChild('market_open_orders_wrapper', 0)
|
floExchangeAPI.getBuyList().then(buyOrders => {
|
||||||
getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>';
|
getRef('market_buy_orders').innerHTML = '';
|
||||||
floExchangeAPI.getBuyList().then(buyOrders => {
|
buyOrders.forEach(order => {
|
||||||
getRef('market_buy_orders').innerHTML = '';
|
frag.append(render.marketOrderCard({
|
||||||
buyOrders.forEach(order => {
|
...order,
|
||||||
frag.append(render.marketOrderCard({
|
type: 'buy'
|
||||||
...order,
|
}))
|
||||||
type: 'buy'
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
getRef('market_buy_orders').append(frag)
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
})
|
||||||
} else {
|
getRef('market_buy_orders').append(frag)
|
||||||
showChild('market_open_orders_wrapper', 1)
|
}).catch(err => {
|
||||||
getRef('market_sell_orders').innerHTML = '<sm-spinner></sm-spinner>';
|
console.log(err)
|
||||||
floExchangeAPI.getSellList().then(sellOrders => {
|
})
|
||||||
getRef('market_sell_orders').innerHTML = '';
|
getRef('market_sell_orders').innerHTML = '<sm-spinner></sm-spinner>';
|
||||||
sellOrders.forEach(order => {
|
floExchangeAPI.getSellList().then(sellOrders => {
|
||||||
frag.append(render.marketOrderCard({
|
getRef('market_sell_orders').innerHTML = '';
|
||||||
...order,
|
sellOrders.forEach(order => {
|
||||||
type: 'sell'
|
frag.append(render.marketOrderCard({
|
||||||
}))
|
...order,
|
||||||
})
|
type: 'sell'
|
||||||
getRef('market_sell_orders').append(frag)
|
}))
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
})
|
||||||
}
|
getRef('market_sell_orders').append(frag)
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
showChild('market_orders_wrapper', 1)
|
showChild('market_orders_wrapper', 1)
|
||||||
getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>';
|
getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>';
|
||||||
@ -1819,12 +1788,6 @@
|
|||||||
getRef('quantity_selector_tip').innerHTML = `<b>Min amount</b> received is lowest total amount you'll get by selling specified quantity, most likely you will get more than this amount. `
|
getRef('quantity_selector_tip').innerHTML = `<b>Min amount</b> received is lowest total amount you'll get by selling specified quantity, most likely you will get more than this amount. `
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
getRef('get_quantity').addEventListener('focusout', e => {
|
|
||||||
getRef('quantity_selector_tip').textContent = `${tradeType} ${pagesData.params.asset} worth of the above percentage`
|
|
||||||
})
|
|
||||||
getRef('get_total').addEventListener('focusout', e => {
|
|
||||||
getRef('quantity_selector_tip').textContent = `${tradeType} ${pagesData.params.asset} worth of the above percentage`
|
|
||||||
})
|
|
||||||
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(8)) || 0
|
getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(8)) || 0
|
||||||
@ -2176,7 +2139,6 @@
|
|||||||
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_open_orders_type_selector').addEventListener('change', render.marketOrders)
|
|
||||||
getRef('market').addEventListener('click', e => {
|
getRef('market').addEventListener('click', e => {
|
||||||
if (e.target.closest('.more-info')) {
|
if (e.target.closest('.more-info')) {
|
||||||
showMoreDetails(e)
|
showMoreDetails(e)
|
||||||
@ -2197,19 +2159,29 @@
|
|||||||
case 'confirm_trade_popup':
|
case 'confirm_trade_popup':
|
||||||
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 = getSuggestedPrice()
|
const currentPrice = parseFloat(floGlobals.exchangeRates[asset].toFixed(8));
|
||||||
const total = parseFloat(getRef('get_total').value)
|
const price = parseFloat(getSuggestedPrice().toFixed(8));
|
||||||
|
const total = formatAmount(parseFloat(getRef('get_total').value))
|
||||||
|
const minTotal = formatAmount(parseFloat((currentPrice * quantity).toFixed(8)))
|
||||||
getRef('confirm_trade__title').textContent = `${tradeType} ${asset}`
|
getRef('confirm_trade__title').textContent = `${tradeType} ${asset}`
|
||||||
getRef('confirm_trade__price_type').textContent = tradeType === 'buy' ? 'Valid upto' : 'Valid until'
|
getRef('confirm_trade__details').innerHTML = `
|
||||||
getRef('confirm_trade__price').textContent = formatAmount(price)
|
<div class="grid">
|
||||||
getRef('confirm_trade__quantity').textContent = quantity
|
<p>Quantity</p>
|
||||||
getRef('confirm_trade__total').textContent = formatAmount(total)
|
<b>${quantity} ${asset}</b>
|
||||||
if (price !== floGlobals.exchangeRates[asset]) {
|
</div>
|
||||||
getRef('confirm_trade__tip').textContent = `Trade will only happen at current price of ${asset}. So ${tradeType}ing at ${price > floGlobals.exchangeRates[asset] ? 'higher' : 'lower'} price won't execute until price matches that.`
|
<div class="grid">
|
||||||
getRef('confirm_trade__tip').parentNode.classList.remove('hide')
|
<p>${tradeType === 'buy' ? 'Min cost (Amount locked)' : 'Max earned'}</p>
|
||||||
} else {
|
<div>
|
||||||
getRef('confirm_trade__tip').parentNode.classList.add('hide')
|
<b>${minTotal}</b><span> @ ${currentPrice}/${asset}</span>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-0-3">
|
||||||
|
<p>${tradeType === 'buy' ? 'Max cost (Amount locked)' : 'Min earned'}</p>
|
||||||
|
<div>
|
||||||
|
<b>${total}</b><span> @ ${price}/${asset}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user