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

code refactoring

Browse Source
This commit is contained in:
sairaj mote 2022-05-29 01:11:29 +05:30
parent 2419d754d5
commit f11e121b95
4 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/css/main.css
View File

@ -1615,6 +1615,7 @@ sm-checkbox {
.is-signed-in #exchange { .is-signed-in #exchange {
display: flex; display: flex;
width: 100%;
} }
.is-signed-in #exchange_wrapper { .is-signed-in #exchange_wrapper {
display: grid; display: grid;

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

File diff suppressed because one or more lines are too long

1
docs/css/main.scss
View File

@ -1447,6 +1447,7 @@ sm-checkbox {
.is-signed-in { .is-signed-in {
#exchange { #exchange {
display: flex; display: flex;
width: 100%;
} }
#exchange_wrapper { #exchange_wrapper {
display: grid; display: grid;

75
docs/index.html
View File

@ -821,20 +821,7 @@
</button> </button>
<h4>Transaction details</h4> <h4>Transaction details</h4>
</header> </header>
<div class="grid gap-1-5"> <div id="transaction_details" class="grid gap-1-5"></div>
<div id="transaction__buyer_wrapper" class="grid">
<h5 class="label capitalize">Buyer</h5>
<sm-copy id="transaction__buyer"></sm-copy>
</div>
<div id="transaction__seller_wrapper" class="grid">
<h5 class="label capitalize">Seller</h5>
<sm-copy id="transaction__seller"></sm-copy>
</div>
<div class="grid">
<h5 id="transaction_time__label" class="label">Completed</h5>
<time style="font-size: 0.9rem;" id="transaction_time"></time>
</div>
</div>
</sm-popup> </sm-popup>
<!-- templates --> <!-- templates -->
@ -1051,6 +1038,7 @@
<a class="history-entry__txid button" target="_blank">See on blockchain</a> <a class="history-entry__txid button" target="_blank">See on blockchain</a>
</li> </li>
</template> </template>
<script src="//unpkg.com/uhtml"></script>
<script> <script>
/** /**
@ -1064,6 +1052,7 @@
</script> </script>
<script id="ui_utils"> <script id="ui_utils">
// Global variables // Global variables
const { html, render: renderElem } = uhtml;
const domRefs = {}; const domRefs = {};
let timerId; let timerId;
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
@ -1712,7 +1701,9 @@
} }
function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') { function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
getRef('get_price').innerHTML = ` renderElem(
getRef('get_price'),
html`
<div class="grid"> <div class="grid">
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">Current price</div> <div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">Current price</div>
<h3>${formatAmount(floGlobals.exchangeRates[asset])}</h3> <h3>${formatAmount(floGlobals.exchangeRates[asset])}</h3>
@ -1725,12 +1716,12 @@
<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">
${tradeType === 'buy' ? ${tradeType === 'buy' ?
`<b>Valid upto</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION_BUY * 100}%</b> higher than current price.` : html`<b>Valid upto</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION_BUY * 100}%</b> higher than current price.` :
`<b>Valid until</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION_SELL * 100}%</b> lower than current price.` html`<b>Valid until</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION_SELL * 100}%</b> lower than current price.`
} System will always try to execute your order at the <b>nearest price possible to current price</b>. } System will always try to execute your order at the <b>nearest price possible to current price</b>.
</p> </p>
</div> </div>`
` )
} }
const chartDimensions = { const chartDimensions = {
@ -1979,7 +1970,7 @@
entry.querySelector('.history-entry__status').textContent = status === 'SUCCESS' ? 'Success' : 'Pending' entry.querySelector('.history-entry__status').textContent = status === 'SUCCESS' ? 'Success' : 'Pending'
entry.querySelector('.history-entry__time').textContent = floGlobals.allTxs.hasOwnProperty(txid) ? getFormattedTime(floGlobals.allTxs[txid].time * 1000) : '' entry.querySelector('.history-entry__time').textContent = floGlobals.allTxs.hasOwnProperty(txid) ? getFormattedTime(floGlobals.allTxs[txid].time * 1000) : ''
entry.querySelector('.history-entry__txid').href = `https://flosight.duckdns.org/tx/${txid}` entry.querySelector('.history-entry__txid').href = `https://flosight.duckdns.org/tx/${txid}`
return entry return entry;
} }
} }
@ -2460,25 +2451,23 @@
function showMoreDetails(e) { function showMoreDetails(e) {
const target = e.target.closest('.more-info') const target = e.target.closest('.more-info')
showPopup('transaction_info_popup') showPopup('transaction_info_popup')
if (target.dataset.buyer !== 'undefined') { renderElem(getRef('transaction_details'), html`
getRef('transaction__buyer_wrapper').classList.remove('hide') ${target.dataset.buyer !== 'undefined' ? html`<div class="grid">
getRef('transaction__buyer').value = target.dataset.buyer <h5 class="label capitalize">Buyer</h5>
} else { <sm-copy value="${target.dataset.buyer}"></sm-copy>
getRef('transaction__buyer_wrapper').classList.add('hide') </div> `: ''
} }
if (target.dataset.seller !== 'undefined') { ${target.dataset.seller !== 'undefined' ? html`<div class="grid">
getRef('transaction__seller_wrapper').classList.remove('hide') <h5 class="label capitalize">Seller</h5>
getRef('transaction__seller').value = target.dataset.seller <sm-copy value="${target.dataset.seller}"></sm-copy>
} else { </div> `: ''
getRef('transaction__seller_wrapper').classList.add('hide') }
} ${target.dataset.time !== undefined ? html`<div class="grid">
if (target.dataset.time !== undefined) { <h5 class="label">${target.dataset.pending === 'true' ? 'Placed on' : 'Completed on'}</h5>
getRef('transaction_time__label').textContent = target.dataset.pending === 'true' ? 'Placed on' : 'Completed on' <time style="font-size: 0.9rem;">${getFormattedTime(target.dataset.time)}</time>
getRef('transaction_time').textContent = getFormattedTime(target.dataset.time) </div>`: ''
getRef('transaction_time').parentNode.classList.remove('hide') }
} else { `)
getRef('transaction_time').parentNode.classList.add('hide')
}
} }
getRef('orders_list').addEventListener('click', e => { getRef('orders_list').addEventListener('click', e => {
@ -2711,8 +2700,8 @@
function updateRate(init = false) { function updateRate(init = false) {
floExchangeAPI.getRates().then(({ rates, countDown }) => { floExchangeAPI.getRates().then(({ rates, countDown }) => {
console.debug(rates); console.debug(rates);
floGlobals.exchangeRates = rates
if (init) { if (init) {
floGlobals.exchangeRates = rates
Object.entries(rates).sort((a, b) => a[1] < b[1] ? 1 : -1).forEach(([asset, rate]) => { Object.entries(rates).sort((a, b) => a[1] < b[1] ? 1 : -1).forEach(([asset, rate]) => {
if (!allTokens.hasOwnProperty(asset)) { if (!allTokens.hasOwnProperty(asset)) {
allTokens[asset] = { allTokens[asset] = {
@ -2732,13 +2721,13 @@
` `
})) }))
}) })
} else { } else {
// update rates in UI // update rates in UI
for (const asset in rates) { for (const asset in rates) {
const rate = rates[asset]
const listedAsset = getRef(`listed_assets`).querySelector(`[data-listed-asset="${asset}"]`) const listedAsset = getRef(`listed_assets`).querySelector(`[data-listed-asset="${asset}"]`)
if (listedAsset) { if (listedAsset) {
listedAsset.querySelector('.listed-asset__rate').textContent = formatAmount(parseFloat(rate)) listedAsset.querySelector('.listed-asset__rate').textContent = formatAmount(parseFloat(rates[asset]))
if (floGlobals.countDowns.intervals.hasOwnProperty(asset)) { if (floGlobals.countDowns.intervals.hasOwnProperty(asset)) {
clearInterval(floGlobals.countDowns.intervals[asset]); clearInterval(floGlobals.countDowns.intervals[asset]);
} }