Bug fix and UI improvements

-- fixed bug related to login issue due to invalid/expired signature, session invalid/expired
This commit is contained in:
sairaj mote 2022-05-14 16:12:09 +05:30
parent 042d8a53ca
commit a91b70451b
4 changed files with 63 additions and 18 deletions

View File

@ -692,7 +692,6 @@ sm-checkbox {
gap: 0.5rem;
padding: 1rem 0;
border-radius: 0.5rem;
opacity: 0.8;
font-weight: 400;
transition: background-color 0.3s;
-webkit-user-select: none;
@ -723,16 +722,33 @@ sm-checkbox {
grid-area: rate;
}
.listed-asset__countdown {
display: flex;
align-items: center;
grid-area: countdown;
justify-self: flex-end;
border-radius: 0.3rem;
padding: 0.2rem 0.4rem;
font-size: 0.8rem;
background-color: #f0e68cc0;
color: rgba(0, 0, 0, 0.9);
color: var(--accent-color);
}
.listed-asset__countdown .icon {
margin-left: 0.3rem;
overflow: visible;
stroke-width: 4;
fill: none;
}
.listed-asset__countdown .icon .path-a {
stroke: var(--accent-color);
stroke-dashoffset: var(--path-length, 0);
stroke-dasharray: 65;
}
.listed-asset__countdown .icon .path-b {
stroke: rgba(var(--text-color), 0.2);
}
.listed-asset__right-arrow {
grid-area: right-arrow;
background-color: rgba(var(--text-color), 0.1);
border-radius: 1rem;
padding: 0.1rem;
margin-left: 0.3rem;
}
.quantity-selector .button {

File diff suppressed because one or more lines are too long

View File

@ -657,7 +657,6 @@ sm-checkbox {
gap: 0.5rem;
padding: 1rem 0;
border-radius: 0.5rem;
opacity: 0.8;
font-weight: 400;
transition: background-color 0.3s;
user-select: none;
@ -684,16 +683,33 @@ sm-checkbox {
grid-area: rate;
}
&__countdown {
display: flex;
align-items: center;
grid-area: countdown;
justify-self: flex-end;
border-radius: 0.3rem;
padding: 0.2rem 0.4rem;
font-size: 0.8rem;
background-color: #f0e68cc0;
color: rgba(0, 0, 0, 0.9);
color: var(--accent-color);
.icon {
margin-left: 0.3rem;
overflow: visible;
stroke-width: 4;
fill: none;
.path-a {
stroke: var(--accent-color);
stroke-dashoffset: var(--path-length, 0);
stroke-dasharray: 65;
}
.path-b {
stroke: rgba(var(--text-color), 0.2);
}
}
}
&__right-arrow {
grid-area: right-arrow;
background-color: rgba(var(--text-color), 0.1);
border-radius: 1rem;
padding: 0.1rem;
margin-left: 0.3rem;
}
}
.quantity-selector {

View File

@ -696,7 +696,13 @@
<div class="listed-asset__icon"></div>
<h4 class="listed-asset__name"></h4>
<b class="listed-asset__rate"></b>
<div class="listed-asset__countdown"></div>
<div class="listed-asset__countdown">
timer
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 24">
<path class="path-a" d="M11.5,2a10,10,0,1,1-10,10,10,10,0,0,1,10-10" />
<path class="path-b" d="M11.5,2a10,10,0,1,1-10,10,10,10,0,0,1,10-10" />
</svg>
</div>
<svg class="icon listed-asset__right-arrow hide-on-desktop" 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>
@ -1434,10 +1440,10 @@
// Convert milliseconds to time left in HH:MM:SS format
function getTimeLeft(milliseconds) {
const diff = milliseconds - Date.now()
const hours = Math.floor(diff / 3600000)
// const hours = Math.floor(diff / 3600000)
const minutes = Math.floor((diff % 3600000) / 60000)
const seconds = Math.floor(((diff % 3600000) % 60000) / 1000)
return `${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
return [`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`, ((diff % 3600000) / 60000).toFixed(2)]
}
function getSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
@ -1488,7 +1494,10 @@
clone.querySelector('.listed-asset__rate').textContent = formatAmount(rate)
clone.querySelector('.listed-asset__name').textContent = asset
floGlobals.countDowns.intervals[asset] = setInterval(() => {
clone.querySelector('.listed-asset__countdown').textContent = getTimeLeft(countDown);
const [timeLeft, minutes] = getTimeLeft(countDown)
clone.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
const pathLength = 65 - Math.ceil((minutes / 60) * 65)
clone.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
}, 1000);
floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
updateRate()
@ -1577,7 +1586,8 @@
new ResizeObserver(entries => {
chartDimensions.height = entries[0].contentRect.height - 10;
chartDimensions.width = entries[0].contentRect.width;
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
if (chart)
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
}).observe(getRef('price_chart_wrapper'));
})
},
@ -2408,7 +2418,10 @@
clearInterval(floGlobals.countDowns.intervals[asset]);
}
floGlobals.countDowns.intervals[asset] = setInterval(() => {
listedAsset.querySelector('.listed-asset__countdown').textContent = getTimeLeft(countDown[asset])
const [timeLeft, minutes] = getTimeLeft(countDown[asset])
listedAsset.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
const pathLength = 65 - Math.ceil((minutes / 60) * 65)
listedAsset.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
}, 1000)
if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
clearTimeout(floGlobals.countDowns.timeouts[asset]);
@ -2516,7 +2529,7 @@
showPage(window.location.hash);
}).catch(error => {
console.debug(error)
if (error.message === 'Invalid request signature! Re-login if this error occurs frequently') {
if (['015', '016', '018', '019'].includes(error.code)) {
proxy.clear()
location.reload()
}