Added loading when refreshing wallet balance

docs/css/main.css

@@ -569,6 +569,18 @@ sm-checkbox {
   margin-top: 2rem;
 }
 
+.multi-state-button {
+  display: grid;
+  text-align: center;
+  align-items: center;
+}
+.multi-state-button > * {
+  grid-area: 1/1/2/2;
+}
+.multi-state-button button {
+  z-index: 1;
+}
+
 #home {
   height: 100%;
   display: flex;
@@ -1149,11 +1161,11 @@ sm-checkbox {
     grid-area: nav;
     flex-direction: column;
     height: 100%;
-    padding: 0 0.5rem;
+    padding-left: 0.5rem;
   }
 
   .main_navbar__item {
-    padding: 1.5rem 1rem;
+    padding: 1.5rem 2rem 1.5rem 1rem;
     width: 100%;
     flex: 0;
     flex-direction: row;
@@ -1212,7 +1224,10 @@ sm-checkbox {
     background-color: var(--accent-color);
   }
 }
-@media screen and (max-width: 64rem) and (min-width: 40rem) {
+@media screen and (max-width: 80rem) {
+  .main_navbar__item {
+    padding: 1.5rem 1rem;
+  }
   .main_navbar__item .icon {
     margin-right: 0;
   }
@@ -1222,7 +1237,7 @@ sm-checkbox {
 }
 @media screen and (min-width: 64rem) {
   #home {
-    grid-template-columns: 10rem 1fr;
+    grid-template-columns: auto 1fr;
   }
 
   #asset_page {

docs/css/main.scss

@@ -541,6 +541,17 @@ sm-checkbox {
     margin-top: 2rem;
   }
 }
+.multi-state-button {
+  display: grid;
+  text-align: center;
+  align-items: center;
+  & > * {
+    grid-area: 1/1/2/2;
+  }
+  button {
+    z-index: 1;
+  }
+}
 #home {
   height: 100%;
   display: flex;
@@ -1059,10 +1070,10 @@ sm-checkbox {
     grid-area: nav;
     flex-direction: column;
     height: 100%;
-    padding: 0 0.5rem;
+    padding-left: 0.5rem;
   }
   .main_navbar__item {
-    padding: 1.5rem 1rem;
+    padding: 1.5rem 2rem 1.5rem 1rem;
     width: 100%;
     flex: 0;
     flex-direction: row;
@@ -1118,8 +1129,9 @@ sm-checkbox {
     }
   }
 }
-@media screen and (max-width: 64rem) and (min-width: 40rem) {
+@media screen and (max-width: 80rem) {
   .main_navbar__item {
+    padding: 1.5rem 1rem;
     .icon {
       margin-right: 0;
     }
@@ -1130,7 +1142,7 @@ sm-checkbox {
 }
 @media screen and (min-width: 64rem) {
   #home {
-    grid-template-columns: 10rem 1fr;
+    grid-template-columns: auto 1fr;
   }
   #asset_page {
     display: grid;

docs/index.html

@@ -8,7 +8,7 @@
     <title>RanchiMall exchange</title>
     <meta name="description" content="Trade FLO and FLO based RanchiMall tokens.">
 
-    <script src="css/components.js" defer></script>
+    <script src="scripts/components.js" defer></script>
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -282,9 +282,12 @@
                 <div class="grid gap-0-5">
                     <div class="flex align-center space-between">
                         <h4>Balance</h4>
-                        <button class="button" onclick="refresh();" title="Refresh">
+                        <div class="multi-state-button">
-                            Refresh
+                            <button id="wallet_balance_refresh_button" class="button" onclick="updateRate(false,this);"
-                        </button>
+                                title="Refresh">
+                                Refresh
+                            </button>
+                        </div>
                     </div>
                     <ul id="my_assets" class="grid"></ul>
                 </div>
@@ -1156,6 +1159,36 @@
         handleMobileChange(mobileQuery)
     </script>
     <script>
+        function buttonLoader(id, show) {
+            getRef(id).disabled = show;
+            const animOptions = {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+            if (show) {
+                try {
+                    getRef(id).animate([
+                        {
+                            clipPath: 'circle(100%)',
+                        },
+                        {
+                            clipPath: 'circle(0)',
+                        },
+                    ], animOptions).onfinish = e => {
+                        e.target.commitStyles()
+                        e.target.cancel()
+                    }
+                    getRef(id).parentNode.append(createElement('sm-spinner'))
+                } catch (e) {
+                    console.log(e)
+                }
+            } else {
+                getRef(id).style = ''
+                const potentialTarget = getRef(id).parentNode.querySelector('sm-spinner')
+                if (potentialTarget) potentialTarget.remove();
+            }
+        }
         const listedAssets = {
             rupee: {
                 icon: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -2043,7 +2076,9 @@
             }
         }
 
-        function updateRate(init = false) {
+        function updateRate(init = false, refreshButton) {
+            if (refreshButton)
+                buttonLoader('wallet_balance_refresh_button', true);
             floExchangeAPI.getRates().then(rates => {
                 console.debug(rates);
                 if (init) {
@@ -2081,7 +2116,8 @@
                 }
                 if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== ''))
                     getRef('get_price').value = parseFloat(parseFloat(rates[pagesData.params.asset]).toFixed(4))
-
+                if (refreshButton)
+                    buttonLoader('wallet_balance_refresh_button', false);
             }).catch(error => console.error(error.message))
         }
 
@@ -2117,6 +2153,8 @@
         async function account() {
             floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(async acc => {
                 document.body.classList.add('is-signed-in');
+                // save login time
+                localStorage.setItem(`${acc.floID}_last_login`, Date.now());
                 getRef("login_form").classList.add('hide')
                 getRef('user_popup_button').classList.remove('hide')
                 accountDetails = acc

docs/scripts/components.js

@@ -1519,8 +1519,8 @@ spinner.innerHTML = `
             box-sizing: border-box;
 }
 .loader {
-    height: var(--size, 1.5rem);
+    height: var(--size, 1.2rem);
-    width: var(--size, 1.5rem);
+    width: var(--size, 1.2rem);
     stroke-width: 8;
     overflow: visible;
     stroke: var(--accent-color, teal);