code refactoring and UI changes

-- removed mapping tx time from transaction history

docs/css/main.css

@@ -88,7 +88,6 @@ fieldset {
 button {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   position: relative;
   display: inline-flex;
@@ -207,7 +206,6 @@ ul {
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-word;
-  -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
 }
@@ -484,7 +482,6 @@ details summary {
   justify-content: space-between;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   cursor: pointer;
   padding: 1rem 0;
@@ -510,7 +507,6 @@ strip-option {
   font-size: 0.9rem;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   --border-radius: 0;
   --active-option-color: rgba(var(--background-color), 1);
@@ -724,7 +720,6 @@ sm-checkbox {
   transition: background-color 0.3s;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   color: inherit;
   grid-template-columns: auto 1fr auto auto;
@@ -869,7 +864,6 @@ sm-checkbox {
   outline: none;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   align-items: center;
   gap: 0.5rem;
@@ -1058,10 +1052,10 @@ sm-checkbox {
   margin-bottom: 0.5rem;
 }
 .live-order[data-type=buy] {
-  background-color: #00fa9a10;
+  background-color: rgba(0, 250, 154, 0.062745098);
 }
 .live-order[data-type=sell] {
-  background-color: #e2135110;
+  background-color: rgba(226, 19, 81, 0.062745098);
 }
 
 #portfolio {
@@ -1238,21 +1232,21 @@ sm-checkbox {
   margin-right: 0.5rem;
 }
 .personal-asset-balance:nth-of-type(1) {
-  background: url("bg-art2.svg") no-repeat bottom right, #c2ffd7;
+  background: url("bg-art2.svg") no-repeat bottom right, hsl(141deg, 100%, 88%);
   background-size: contain;
 }
 .personal-asset-balance:nth-of-type(1) .icon {
-  background-color: rgba(102, 255, 156, 0.5);
+  background-color: hsla(141deg, 100%, 70%, 0.5);
 }
 .personal-asset-balance:nth-of-type(1) .button {
-  border: solid thin rgba(102, 255, 156, 0.5);
+  border: solid thin hsla(141deg, 100%, 70%, 0.5);
 }
 .personal-asset-balance:nth-of-type(2) {
-  background: url("back.svg") no-repeat top right, #fcffa8;
+  background: url("back.svg") no-repeat top right, hsl(62deg, 100%, 83%);
   background-size: contain;
 }
 .personal-asset-balance:nth-of-type(2) .icon {
-  background-color: rgba(255, 234, 0, 0.5);
+  background-color: hsla(55deg, 100%, 50%, 0.5);
 }
 .personal-asset-balance > .flex {
   margin-bottom: 0.3rem;
@@ -1477,15 +1471,12 @@ sm-checkbox {
   sm-button {
     --padding: 0.9rem 1.6rem;
   }
-
   .empty-state {
     align-self: center;
   }
-
   #user_popup_button {
     width: 100%;
   }
-
   .main_navbar__item--active .item__title {
     transform: translateY(100%);
     opacity: 0;
@@ -1493,42 +1484,33 @@ sm-checkbox {
   .main_navbar__item--active .icon {
     transform: translateY(50%) scale(1.2);
   }
-
   #asset_list_wrapper {
     padding: 0 1.5rem;
   }
-
   .listed-asset {
     border-radius: 0;
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
-
   #exchange {
     margin: 0;
     padding: 0;
   }
-
   #login_form {
     padding: 0 1.5rem;
   }
-
   #asset_page__header {
     display: flex;
     padding: 1rem 1.5rem 0.5rem 0.8rem;
   }
-
   #chart_header {
     padding: 0 1.5rem 0.5rem 1.5rem;
   }
-
   #trade_form {
     padding: 0 1.5rem;
   }
-
   #price_chart_container {
     flex: 1;
   }
-
   #asset_page__footer button {
     display: flex;
     flex-direction: column;
@@ -1550,7 +1532,6 @@ sm-checkbox {
   #asset_page__footer button.active .icon {
     fill: var(--accent-color);
   }
-
   .hide-on-mobile {
     display: none !important;
   }
@@ -1559,53 +1540,43 @@ sm-checkbox {
   sm-popup {
     --width: 24rem;
   }
-
   .popup__header {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
-
   #confirmation_popup {
     --width: 24rem;
   }
-
   .page-layout {
     grid-template-columns: 1fr 90vw 1fr;
   }
-
   .mobile-page {
     align-self: flex-start;
     padding: 2rem;
     border-radius: 0.5rem;
     background-color: rgba(var(--foreground-color), 1);
   }
-
   .hide-on-desktop {
     display: none !important;
   }
-
   #home {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
     grid-template-areas: "header header" "nav pages";
   }
-
   #main_header {
     grid-area: header;
   }
-
   #user_popup_button {
     justify-self: flex-end;
   }
-
   #main_navbar {
     grid-area: nav;
     flex-direction: column;
     height: 100%;
     padding-left: 0.5rem;
   }
-
   .main_navbar__item {
     padding: 1.5rem 2rem 1.5rem 1rem;
     width: 100%;
@@ -1624,7 +1595,6 @@ sm-checkbox {
   .main_navbar__item--active {
     background-color: rgba(var(--text-color), 0.06);
   }
-
   #pages_container {
     grid-area: pages;
   }
@@ -1632,7 +1602,6 @@ sm-checkbox {
     margin: 0 1.5rem;
     padding: 2rem;
   }
-
   .is-signed-in #exchange {
     display: flex;
     width: 100%;
@@ -1645,15 +1614,12 @@ sm-checkbox {
     grid-template-columns: 17rem minmax(0, 1fr);
     align-items: flex-start;
   }
-
   #price_history_chart {
     height: 20rem;
   }
-
   #asset_list_wrapper {
     grid-row: 1/3;
   }
-
   .listed-asset {
     padding: 1rem;
   }
@@ -1669,16 +1635,13 @@ sm-checkbox {
     height: 2rem;
     background-color: var(--accent-color);
   }
-
   .order-card {
     grid-template-columns: auto 1fr 1fr 1fr auto;
     grid-template-areas: "checkbox quantity price amount time cancel";
   }
-
   .orders_section__header {
     background-color: rgba(var(--foreground-color), 1);
   }
-
   #history .sticky,
 #portfolio_asset_page .sticky {
     background-color: rgba(var(--foreground-color), 1);
@@ -1701,7 +1664,6 @@ sm-checkbox {
     width: 100%;
     grid-template-columns: 18rem 1fr;
   }
-
   .completed-trade {
     grid-template-columns: 1fr 1fr 1fr 8rem;
     grid-template-areas: "quantity price amount info";
@@ -1723,7 +1685,6 @@ sm-checkbox {
   #home {
     grid-template-columns: auto 1fr;
   }
-
   #asset_page_wrapper {
     display: grid;
     gap: 1.5rem;
@@ -1745,7 +1706,6 @@ sm-checkbox {
     width: 0.5rem;
     height: 0.5rem;
   }
-
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
@@ -1753,7 +1713,6 @@ sm-checkbox {
   ::-webkit-scrollbar-thumb:hover {
     background: rgba(var(--text-color), 0.5);
   }
-
   .order-card .cancel-order {
     justify-self: flex-end;
     overflow: hidden;

docs/css/main.scss

@@ -1346,9 +1346,6 @@ sm-checkbox {
   .empty-state {
     align-self: center;
   }
-  #main_header {
-    // padding: 1.5rem;
-  }
   #user_popup_button {
     width: 100%;
   }

docs/index.html

@@ -1272,8 +1272,7 @@
             try {
                 let [day, month, date, year] = new Date(time).toString().split(' '),
                     minutes = new Date(time).getMinutes(),
-                    hours = new Date(time).getHours(),
+                    hours = new Date(time).getHours();
-                    currentTime = new Date().toString().split(' ')
 
                 minutes = minutes < 10 ? `0${minutes}` : minutes
                 let finalHours = ``;
@@ -1490,12 +1489,8 @@
                                 <div class="flex" style="padding: 1.5rem; justify-content: center;">
                                     <sm-spinner></sm-spinner>
                                 </div>`
-                            // load asset specific blockchain txs
-                            floBlockchainAPI.readAllTxs(accountDetails.floID).then(async transactions => {
-                                floGlobals.allTxs = {}
-                                transactions.forEach(({ txid, time }) => { floGlobals.allTxs[txid] = { time } })
                             floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(exchangeTxs => {
-                                    exchangeTxs = exchangeTxs.filter(tx => tx.token === params.asset).sort((a, b) => floGlobals.allTxs[b.txid].time - floGlobals.allTxs[a.txid].time)
+                                exchangeTxs = exchangeTxs.filter(tx => tx.asset === params.asset).sort((a, b) => new Date(b.locktime).getTime() - new Date(a.locktime).getTime())
                                 if (portfolioAssetHistoryLazyLoader) {
                                     portfolioAssetHistoryLazyLoader.update(exchangeTxs)
                                 } else {
@@ -1505,9 +1500,6 @@
                             }).catch(err => {
                                 console.error(err)
                             })
-                            }).catch(err => {
-                                console.error(err)
-                            })
                         } else {
                             showChildElement('portfolio', 0, {
                                 entry: slideInRight,
@@ -1523,12 +1515,9 @@
                             <sm-spinner></sm-spinner>
                         </div>
                         `
-                        // load all blockchain txs
-                        floBlockchainAPI.readAllTxs(accountDetails.floID).then(async transactions => {
-                            floGlobals.allTxs = {}
-                            transactions.forEach(({ txid, time }) => { floGlobals.allTxs[txid] = { time } })
                         floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(exchangeTxs => {
-                                exchangeTxs = exchangeTxs.sort((a, b) => floGlobals.allTxs[b.txid].time - floGlobals.allTxs[a.txid].time)
+                            console.log(exchangeTxs)
+                            exchangeTxs = exchangeTxs.sort((a, b) => new Date(b.locktime).getTime() - new Date(a.locktime).getTime())
                             if (historyLazyLoader) {
                                 historyLazyLoader.update(exchangeTxs)
                             } else {
@@ -1538,9 +1527,6 @@
                         }).catch(err => {
                             console.error(err)
                         })
-                        }).catch(err => {
-                            console.error(err)
-                        })
                         break;
                 }
             }
@@ -2077,8 +2063,17 @@
                 }
             },
             historyEntry(details) {
-                const { amount, status, token, txid, type } = details
+                const { amount, r_status, asset, txid, mode, locktime } = details
+                const type = mode === 1 ? 'Deposit' : 'Withdraw'
                 const entry = getRef('history_entry').content.cloneNode(true).firstElementChild
+                let status
+                if (r_status === 0) {
+                    status = 'PENDING'
+                } else if (r_status === 100) {
+                    status = 'SUCCESS'
+                } else if (r_status === -1) {
+                    status = 'FAILED'
+                }
                 entry.dataset.status = status
                 entry.dataset.type = type
                 if (status === 'SUCCESS') {
@@ -2086,9 +2081,9 @@
                 } else {
                     entry.querySelector('.history-entry__status').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24" x="0"/></g><g><g><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z"/></g></g></svg>`
                 }
-                entry.querySelector('.history-entry__token-action').textContent = `${type} ${token}`
+                entry.querySelector('.history-entry__token-action').textContent = `${type} ${asset}`
                 entry.querySelector('.history-entry__amount').textContent = amount
-                entry.querySelector('.history-entry__time').textContent = floGlobals.allTxs.hasOwnProperty(txid) ? getFormattedTime(floGlobals.allTxs[txid].time * 1000) : ''
+                entry.querySelector('.history-entry__time').textContent = getFormattedTime(locktime)
                 entry.querySelector('.history-entry__txid').href = `https://flosight.duckdns.org/tx/${txid}`
                 return entry;
             }
@@ -2790,6 +2785,7 @@
         }
 
         function updateRate(init = false) {
+            return new Promise((resolve, reject) => {
                 floExchangeAPI.getRates().then(({ rates, countDown }) => {
                     console.debug(rates);
                     floGlobals.exchangeRates = rates
@@ -2813,7 +2809,7 @@
                                 `
                             }))
                         })
-
+                        resolve();
                     } else {
                         // update rates in UI
                         for (const asset in rates) {
@@ -2838,10 +2834,12 @@
                                 }, countDown[asset] - Date.now());
                             }
                         }
+                        resolve();
                     }
                     render.chart(pagesData.params.asset)
                     showSuggestedPrice()
                 }).catch(error => console.error(error.message))
+            }).catch(error => console.error(error))
         }
 
         async function refresh(init = false, refreshButton) {
@@ -2867,12 +2865,13 @@
             } else
                 console.info("refresh");
             render.marketOrders();
-            updateRate(init)
+            updateRate(init).then(async () => {
                 if (proxy.userID) {
                     await account();
                     if (refreshButton)
                         buttonLoader('portfolio_balance_refresh_button', false);
                 }
+            })
         }
 
         let accountDetails = {}