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 = ``;
@@ -1487,24 +1486,17 @@
                                     </div>`: ''}
                             `)
                             getRef('portfolio_asset__history').innerHTML = `                        
-                            <div class="flex" style="padding: 1.5rem; justify-content: center;">
+                                <div class="flex" style="padding: 1.5rem; justify-content: center;">
-                                <sm-spinner></sm-spinner>
+                                    <sm-spinner></sm-spinner>
-                            </div>`
+                                </div>`
-                            // load asset specific blockchain txs
+                            floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(exchangeTxs => {
-                            floBlockchainAPI.readAllTxs(accountDetails.floID).then(async transactions => {
+                                exchangeTxs = exchangeTxs.filter(tx => tx.asset === params.asset).sort((a, b) => new Date(b.locktime).getTime() - new Date(a.locktime).getTime())
-                                floGlobals.allTxs = {}
+                                if (portfolioAssetHistoryLazyLoader) {
-                                transactions.forEach(({ txid, time }) => { floGlobals.allTxs[txid] = { time } })
+                                    portfolioAssetHistoryLazyLoader.update(exchangeTxs)
-                                floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(exchangeTxs => {
+                                } else {
-                                    exchangeTxs = exchangeTxs.filter(tx => tx.token === params.asset).sort((a, b) => floGlobals.allTxs[b.txid].time - floGlobals.allTxs[a.txid].time)
+                                    portfolioAssetHistoryLazyLoader = new LazyLoader('#portfolio_asset__history', exchangeTxs, render.historyEntry)
-                                    if (portfolioAssetHistoryLazyLoader) {
+                                }
-                                        portfolioAssetHistoryLazyLoader.update(exchangeTxs)
+                                portfolioAssetHistoryLazyLoader.init()
-                                    } else {
-                                        portfolioAssetHistoryLazyLoader = new LazyLoader('#portfolio_asset__history', exchangeTxs, render.historyEntry)
-                                    }
-                                    portfolioAssetHistoryLazyLoader.init()
-                                }).catch(err => {
-                                    console.error(err)
-                                })
                             }).catch(err => {
                                 console.error(err)
                             })
@@ -1523,21 +1515,15 @@
                             <sm-spinner></sm-spinner>
                         </div>
                         `
-                        // load all blockchain txs
+                        floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(exchangeTxs => {
-                        floBlockchainAPI.readAllTxs(accountDetails.floID).then(async transactions => {
+                            console.log(exchangeTxs)
-                            floGlobals.allTxs = {}
+                            exchangeTxs = exchangeTxs.sort((a, b) => new Date(b.locktime).getTime() - new Date(a.locktime).getTime())
-                            transactions.forEach(({ txid, time }) => { floGlobals.allTxs[txid] = { time } })
+                            if (historyLazyLoader) {
-                            floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(exchangeTxs => {
+                                historyLazyLoader.update(exchangeTxs)
-                                exchangeTxs = exchangeTxs.sort((a, b) => floGlobals.allTxs[b.txid].time - floGlobals.allTxs[a.txid].time)
+                            } else {
-                                if (historyLazyLoader) {
+                                historyLazyLoader = new LazyLoader('#exchange_history', exchangeTxs, render.historyEntry)
-                                    historyLazyLoader.update(exchangeTxs)
+                            }
-                                } else {
+                            historyLazyLoader.init()
-                                    historyLazyLoader = new LazyLoader('#exchange_history', exchangeTxs, render.historyEntry)
-                                }
-                                historyLazyLoader.init()
-                            }).catch(err => {
-                                console.error(err)
-                            })
                         }).catch(err => {
                             console.error(err)
                         })
@@ -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,58 +2785,61 @@
         }
 
         function updateRate(init = false) {
-            floExchangeAPI.getRates().then(({ rates, countDown }) => {
+            return new Promise((resolve, reject) => {
-                console.debug(rates);
+                floExchangeAPI.getRates().then(({ rates, countDown }) => {
-                floGlobals.exchangeRates = rates
+                    console.debug(rates);
-                if (init) {
+                    floGlobals.exchangeRates = rates
-                    Object.entries(rates).sort((a, b) => a[1] < b[1] ? 1 : -1).forEach(([asset, rate]) => {
+                    if (init) {
-                        if (!allTokens.hasOwnProperty(asset)) {
+                        Object.entries(rates).sort((a, b) => a[1] < b[1] ? 1 : -1).forEach(([asset, rate]) => {
-                            allTokens[asset] = {
+                            if (!allTokens.hasOwnProperty(asset)) {
-                                total: 0,
+                                allTokens[asset] = {
-                                locked: 0,
+                                    total: 0,
-                                net: 0
+                                    locked: 0,
+                                    net: 0
+                                }
+                            }
+                            // dynamically render listed assets if not already rendered
+                            getRef('listed_assets').append(render.listedAsset(asset, formatAmount(parseFloat(rate)), countDown[asset]));
+                            getRef('market_asset_rates').append(createElement('li', {
+                                className: 'listed-asset grid align-center',
+                                innerHTML: `
+                                    <div class="listed-asset__icon">${getIcon(asset)}</div>
+                                    <h4 class="listed-asset__name">${asset}</h4>
+                                    <b class="listed-asset__rate">${formatAmount(rate)}</b>
+                                `
+                            }))
+                        })
+                        resolve();
+                    } else {
+                        // update rates in UI
+                        for (const asset in rates) {
+                            const listedAsset = getRef(`listed_assets`).querySelector(`[data-listed-asset="${asset}"]`)
+                            if (listedAsset) {
+                                listedAsset.querySelector('.listed-asset__rate').textContent = formatAmount(parseFloat(rates[asset]))
+                                if (floGlobals.countDowns.intervals.hasOwnProperty(asset)) {
+                                    clearInterval(floGlobals.countDowns.intervals[asset]);
+                                }
+                                floGlobals.countDowns.intervals[asset] = setInterval(() => {
+                                    const [timeLeft, minutes] = getTimeLeft(countDown[asset])
+                                    listedAsset.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
+                                    const pathLength = 63 - Math.ceil((minutes / 60) * 63)
+                                    listedAsset.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
+                                }, 1000)
+                                if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
+                                    clearTimeout(floGlobals.countDowns.timeouts[asset]);
+                                    delete floGlobals.countDowns.timeouts[asset]
+                                }
+                                floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
+                                    updateRate()
+                                }, countDown[asset] - Date.now());
                             }
                         }
-                        // dynamically render listed assets if not already rendered
+                        resolve();
-                        getRef('listed_assets').append(render.listedAsset(asset, formatAmount(parseFloat(rate)), countDown[asset]));
-                        getRef('market_asset_rates').append(createElement('li', {
-                            className: 'listed-asset grid align-center',
-                            innerHTML: `
-                                <div class="listed-asset__icon">${getIcon(asset)}</div>
-                                <h4 class="listed-asset__name">${asset}</h4>
-                                <b class="listed-asset__rate">${formatAmount(rate)}</b>
-                            `
-                        }))
-                    })
-
-                } else {
-                    // update rates in UI
-                    for (const asset in rates) {
-                        const listedAsset = getRef(`listed_assets`).querySelector(`[data-listed-asset="${asset}"]`)
-                        if (listedAsset) {
-                            listedAsset.querySelector('.listed-asset__rate').textContent = formatAmount(parseFloat(rates[asset]))
-                            if (floGlobals.countDowns.intervals.hasOwnProperty(asset)) {
-                                clearInterval(floGlobals.countDowns.intervals[asset]);
-                            }
-                            floGlobals.countDowns.intervals[asset] = setInterval(() => {
-                                const [timeLeft, minutes] = getTimeLeft(countDown[asset])
-                                listedAsset.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
-                                const pathLength = 63 - Math.ceil((minutes / 60) * 63)
-                                listedAsset.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
-                            }, 1000)
-                            if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
-                                clearTimeout(floGlobals.countDowns.timeouts[asset]);
-                                delete floGlobals.countDowns.timeouts[asset]
-                            }
-                            floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
-                                updateRate()
-                            }, countDown[asset] - Date.now());
-                        }
                     }
-                }
+                    render.chart(pagesData.params.asset)
-                render.chart(pagesData.params.asset)
+                    showSuggestedPrice()
-                showSuggestedPrice()
+                }).catch(error => console.error(error.message))
-            }).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) {
+                if (proxy.userID) {
-                await account();
+                    await account();
-                if (refreshButton)
+                    if (refreshButton)
-                    buttonLoader('portfolio_balance_refresh_button', false);
+                        buttonLoader('portfolio_balance_refresh_button', false);
-            }
+                }
+            })
         }
 
         let accountDetails = {}