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

Bug fixes for asset price change timer

Browse Source
This commit is contained in:
sairaj mote 2022-05-09 15:22:48 +05:30
parent a8c8993e5a
commit 6d66dc6cc3
4 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/css/main.css
View File

@ -708,7 +708,7 @@ sm-checkbox {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
grid-column: 1/-1; grid-column: 1/-1;
font-size: 0.8rem; font-size: 0.8rem;
background-color: #f0e68ca0; background-color: #f0e68cc0;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
} }
.listed-asset__icon { .listed-asset__icon {

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

File diff suppressed because one or more lines are too long

2
docs/css/main.scss
View File

@ -669,7 +669,7 @@ sm-checkbox {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
grid-column: 1/-1; grid-column: 1/-1;
font-size: 0.8rem; font-size: 0.8rem;
background-color: #f0e68ca0; background-color: #f0e68cc0;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
} }
&__icon { &__icon {

54
docs/index.html
View File

@ -4,9 +4,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta asset="viewport" content="width=device-width, initial-scale=1.0">
<title>RanchiMall exchange</title> <title>RanchiMall exchange</title>
<meta name="description" content="Trade FLO and FLO based RanchiMall tokens."> <meta asset="description" content="Trade FLO and FLO based RanchiMall tokens.">
<script src="scripts/components.js" defer></script> <script src="scripts/components.js" defer></script>
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
@ -690,7 +690,7 @@
<li> <li>
<a class="listed-asset interact grid align-center"> <a class="listed-asset interact grid align-center">
<div class="listed-asset__icon"></div> <div class="listed-asset__icon"></div>
<h4 class="listed-asset__name"></h4> <h4 class="listed-asset__asset"></h4>
<b class="listed-asset__rate"></b> <b class="listed-asset__rate"></b>
<div class="listed-asset__countdown"></div> <div class="listed-asset__countdown"></div>
</a> </a>
@ -902,14 +902,14 @@
} }
// returns dom with specified element // returns dom with specified element
function createElement(tagName, options = {}) { function createElement(tagasset, options = {}) {
const { className, textContent, innerHTML, attributes = {} } = options const { classasset, textContent, innerHTML, attributes = {} } = options
const elem = document.createElement(tagName) const elem = document.createElement(tagasset)
for (let attribute in attributes) { for (let attribute in attributes) {
elem.setAttribute(attribute, attributes[attribute]) elem.setAttribute(attribute, attributes[attribute])
} }
if (className) if (classasset)
elem.className = className elem.classasset = classasset
if (textContent) if (textContent)
elem.textContent = textContent elem.textContent = textContent
if (innerHTML) if (innerHTML)
@ -1442,18 +1442,24 @@
height: 0, height: 0,
width: 0 width: 0
} }
floGlobals.countDownIntervals = {} floGlobals.countDowns = {
intervals: {},
timeouts: {}
}
const render = { const render = {
listedAsset(name, rate, countDown) { listedAsset(asset, rate, countDown) {
const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild
clone.firstElementChild.href = `#/exchange?asset=${name}` clone.firstElementChild.href = `#/exchange?asset=${asset}`
clone.firstElementChild.dataset.listedAsset = name clone.firstElementChild.dataset.listedAsset = asset
clone.querySelector('.listed-asset__icon').innerHTML = getIcon(name) clone.querySelector('.listed-asset__icon').innerHTML = getIcon(asset)
clone.querySelector('.listed-asset__rate').textContent = formatAmount(rate) clone.querySelector('.listed-asset__rate').textContent = formatAmount(rate)
clone.querySelector('.listed-asset__name').textContent = name clone.querySelector('.listed-asset__asset').textContent = asset
floGlobals.countDownIntervals[name] = setInterval(() => { floGlobals.countDowns.intervals[asset] = setInterval(() => {
clone.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown)}`; clone.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown)}`;
}, 1000); }, 1000);
floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
updateRate()
}, countDown - Date.now());
return clone return clone
}, },
orderCard(orderDetails = {}) { orderCard(orderDetails = {}) {
@ -1511,7 +1517,7 @@
assetBalanceCard(asset) { assetBalanceCard(asset) {
const { net, locked } = allTokens[asset] const { net, locked } = allTokens[asset]
const card = getRef('asset_balance_card_template').content.cloneNode(true).firstElementChild const card = getRef('asset_balance_card_template').content.cloneNode(true).firstElementChild
card.className = `balance-card ${locked ? 'is-locked' : ''}` card.classasset = `balance-card ${locked ? 'is-locked' : ''}`
card.querySelector('.balance-card__token').textContent = asset card.querySelector('.balance-card__token').textContent = asset
card.querySelector('.balance-card__icon').innerHTML = getIcon(asset) card.querySelector('.balance-card__icon').innerHTML = getIcon(asset)
const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template'; const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template';
@ -2342,10 +2348,10 @@
attributes: { value: asset }, attributes: { value: asset },
})); }));
getRef('market_asset_rates').append(createElement('li', { getRef('market_asset_rates').append(createElement('li', {
className: 'listed-asset grid align-center', classasset: 'listed-asset grid align-center',
innerHTML: ` innerHTML: `
<div class="listed-asset__icon">${getIcon(asset)}</div> <div class="listed-asset__icon">${getIcon(asset)}</div>
<h4 class="listed-asset__name">${asset}</h4> <h4 class="listed-asset__asset">${asset}</h4>
<b class="listed-asset__rate">${formatAmount(rate)}</b> <b class="listed-asset__rate">${formatAmount(rate)}</b>
` `
})) }))
@ -2357,12 +2363,18 @@
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(rate))
if (floGlobals.countDownIntervals.hasOwnProperty(asset)) { if (floGlobals.countDowns.intervals.hasOwnProperty(asset)) {
clearInterval(floGlobals.countDownIntervals[asset]); clearInterval(floGlobals.countDowns.intervals[asset]);
} }
floGlobals.countDownIntervals[asset] = setInterval(() => { if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
clearTimeout(floGlobals.countDowns.timeouts[asset]);
}
floGlobals.countDowns.intervals[asset] = setInterval(() => {
listedAsset.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown[asset])}` listedAsset.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown[asset])}`
}, 1000) }, 1000)
floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
updateRate()
}, countDown[asset] - Date.now());
} }
} }
} }