Bug fix and UI improvements

-- fixed bug related to login issue due to invalid/expired signature, session invalid/expired

docs/css/main.css

@@ -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: var(--accent-color);
-  color: rgba(0, 0, 0, 0.9);
+}
+.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 {

docs/css/main.scss

@@ -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: var(--accent-color);
-    color: rgba(0, 0, 0, 0.9);
+    .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 {

docs/index.html

@@ -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()
                 }