Feature and UI/UX update

-- added lazy loading to market trades
-- trading view is default view when opening asset page
-- removed popup trading panel UX

docs/css/main.css

@@ -496,6 +496,10 @@ strip-select {
 strip-option {
   font-weight: 500;
   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);
   --active-option-background-color: var(--accent-color);
@@ -793,6 +797,14 @@ sm-checkbox {
   display: flex;
   flex-direction: column;
   height: 100%;
+  align-items: flex-start;
+}
+
+#asset_page_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 
 #trade_form {
@@ -1404,52 +1416,34 @@ sm-checkbox {
     padding: 0 1.5rem;
   }
 
+  #asset_page__header {
+    display: flex;
+    padding: 1rem 1.5rem 0.5rem 0.8rem;
+  }
+
   #chart_header {
-    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    padding: 0 1.5rem 0.5rem 1.5rem;
-    margin-left: -0.7rem;
-  }
-
-  #trade_panel_backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    -webkit-backdrop-filter: blur(0.5rem);
-            backdrop-filter: blur(0.5rem);
-    z-index: 3;
-  }
-
-  #show_trade_panel {
-    position: absolute;
-    border-radius: 2rem;
-    bottom: 0;
-    align-self: center;
-    margin-bottom: 1rem;
-    z-index: 5;
-    font-size: 1rem;
   }
 
   #trade_form {
-    position: fixed;
+    padding: 0 1.5rem;
-    height: auto;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin-top: auto;
-    width: auto;
-    z-index: 10;
-    padding: 1.5rem 1.5rem 0 1.5rem;
-    border-radius: 1rem 1rem 0 0;
-    background-color: rgba(var(--foreground-color), 1);
-    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
   }
 
   #price_chart_container {
     flex: 1;
   }
 
+  #asset_page__footer button .icon {
+    margin-right: 0.3rem;
+  }
+  #asset_page__footer button.active {
+    color: var(--accent-color);
+    background-color: rgba(var(--text-color), 0.03);
+  }
+  #asset_page__footer button.active .icon {
+    fill: var(--accent-color);
+  }
+
   .hide-on-mobile {
     display: none !important;
   }
@@ -1613,7 +1607,7 @@ sm-checkbox {
     grid-template-columns: auto 1fr;
   }
 
-  #asset_page {
+  #asset_page_wrapper {
     display: grid;
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;

docs/css/main.scss

@@ -468,6 +468,7 @@ strip-select {
 strip-option {
   font-weight: 500;
   font-size: 0.9rem;
+  user-select: none;
   --border-radius: 0;
   --active-option-color: rgba(var(--background-color), 1);
   --active-option-background-color: var(--accent-color);
@@ -747,6 +748,13 @@ sm-checkbox {
   display: flex;
   flex-direction: column;
   height: 100%;
+  align-items: flex-start;
+}
+#asset_page_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 #trade_form {
   height: 100%;
@@ -1256,46 +1264,33 @@ sm-checkbox {
   #login_form {
     padding: 0 1.5rem;
   }
+  #asset_page__header {
+    display: flex;
+    padding: 1rem 1.5rem 0.5rem 0.8rem;
+  }
   #chart_header {
-    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    padding: 0 1.5rem 0.5rem 1.5rem;
-    margin-left: -0.7rem;
-  }
-  #trade_panel_backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    background-color: rgba(0 0 0/ 0.3);
-    backdrop-filter: blur(0.5rem);
-    z-index: 3;
-  }
-  #show_trade_panel {
-    position: absolute;
-    border-radius: 2rem;
-    bottom: 0;
-    align-self: center;
-    margin-bottom: 1rem;
-    z-index: 5;
-    font-size: 1rem;
   }
   #trade_form {
-    position: fixed;
+    padding: 0 1.5rem;
-    height: auto;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin-top: auto;
-    width: auto;
-    z-index: 10;
-    padding: 1.5rem 1.5rem 0 1.5rem;
-    border-radius: 1rem 1rem 0 0;
-    background-color: rgba(var(--foreground-color), 1);
-    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
   }
   #price_chart_container {
     flex: 1;
   }
+  #asset_page__footer {
+    button {
+      .icon {
+        margin-right: 0.3rem;
+      }
+      &.active {
+        color: var(--accent-color);
+        background-color: rgba(var(--text-color), 0.03);
+        .icon {
+          fill: var(--accent-color);
+        }
+      }
+    }
+  }
   .hide-on-mobile {
     display: none !important;
   }
@@ -1445,7 +1440,7 @@ sm-checkbox {
   #home {
     grid-template-columns: auto 1fr;
   }
-  #asset_page {
+  #asset_page_wrapper {
     display: grid;
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;

docs/index.html

@@ -120,18 +120,19 @@
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
                     <div id="asset_page" class="hide-on-mobile">
-                        <div id="price_chart_container" class="flex direction-column gap-0-5">
+                        <nav id="asset_page__header" class="hide-on-desktop">
-                            <div id="chart_header" class="flex align-center space-between">
+                            <a href="#/exchange" class="button icon-only">
-                                <div class="flex align-center">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                    <a href="#/exchange" class="button icon-only hide-on-desktop flex align-center">
+                                    width="24px" fill="#000000">
-                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
-                                            viewBox="0 0 24 24" width="24px" fill="#000000">
                                     <path d="M0 0h24v24H0V0z" fill="none" />
                                     <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                                 </svg>
                             </a>
+                        </nav>
+                        <div id="asset_page_wrapper">
+                            <div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile">
+                                <div id="chart_header" class="flex align-center space-between">
                                     <H4 id="chart_asset"></H4>
-                                </div>
                                     <strip-select id="price_duration_selector">
                                         <strip-option value="hour" title="1 Hour price interval" selected>Hour
                                         </strip-option>
@@ -142,16 +143,7 @@
                                     <div id="price_history_chart"></div>
                                 </div>
                             </div>
-                        <sm-form id="trade_form" class="hide-on-mobile">
+                            <sm-form id="trade_form">
-                            <button class="popup__header__close hide-on-desktop" style="margin-right: auto;"
-                                onclick="hideTradePanel()">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
-                                    height="24">
-                                    <path fill="none" d="M0 0h24v24H0z" />
-                                    <path
-                                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
-                                </svg>
-                            </button>
                                 <div class="flex space-between align-center">
                                     <h4 id="traded_asset">Trade FLO</h4>
                                     <strip-select id="trade_type_selector" class="tab">
@@ -160,8 +152,8 @@
                                     </strip-select>
                                 </div>
                                 <div id="get_price" class="flex align-center space-between"></div>
-                            <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001" required
+                                <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001"
-                                animate>
+                                    required animate>
                                 </sm-input>
                                 </sm-input>
                                 <sm-input id="get_total" placeholder="Locked amount (₹)" type="number" min="0.00000001"
@@ -199,9 +191,40 @@
                                     </sm-button>
                                 </div>
                             </sm-form>
-                        <div id="trade_panel_backdrop" onclick="hideTradePanel()" class="hide-on-mobile"></div>
+                        </div>
-                        <button id="show_trade_panel" class="button button--primary hide-on-desktop cta"
+                        <nav id="asset_page__footer" class="flex w-100 hide-on-desktop">
-                            onclick="showTradePanel()">Buy / Sell</button>
+                            <button class="flex-1 active" value="trade">
+                                <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" />
+                                    </g>
+                                    <g>
+                                        <path
+                                            d="M12.22,19.85c-0.18,0.18-0.5,0.21-0.71,0c-0.18-0.18-0.21-0.5,0-0.71l3.39-3.39l-1.41-1.41l-3.39,3.39 c-0.19,0.2-0.51,0.19-0.71,0c-0.21-0.21-0.18-0.53,0-0.71l3.39-3.39l-1.41-1.41l-3.39,3.39c-0.18,0.18-0.5,0.21-0.71,0 c-0.19-0.19-0.19-0.51,0-0.71l3.39-3.39L9.24,10.1l-3.39,3.39c-0.18,0.18-0.5,0.21-0.71,0c-0.19-0.2-0.19-0.51,0-0.71L9.52,8.4 l1.87,1.86c0.95,0.95,2.59,0.94,3.54,0c0.98-0.98,0.98-2.56,0-3.54l-1.86-1.86l0.28-0.28c0.78-0.78,2.05-0.78,2.83,0l4.24,4.24 c0.78,0.78,0.78,2.05,0,2.83L12.22,19.85z M21.83,13.07c1.56-1.56,1.56-4.09,0-5.66l-4.24-4.24c-1.56-1.56-4.09-1.56-5.66,0 l-0.28,0.28l-0.28-0.28c-1.56-1.56-4.09-1.56-5.66,0L2.17,6.71c-1.42,1.42-1.55,3.63-0.4,5.19l1.45-1.45 C2.83,9.7,2.96,8.75,3.59,8.12l3.54-3.54c0.78-0.78,2.05-0.78,2.83,0l3.56,3.56c0.18,0.18,0.21,0.5,0,0.71 c-0.21,0.21-0.53,0.18-0.71,0L9.52,5.57l-5.8,5.79c-0.98,0.97-0.98,2.56,0,3.54c0.39,0.39,0.89,0.63,1.42,0.7 c0.07,0.52,0.3,1.02,0.7,1.42c0.4,0.4,0.9,0.63,1.42,0.7c0.07,0.52,0.3,1.02,0.7,1.42c0.4,0.4,0.9,0.63,1.42,0.7 c0.07,0.54,0.31,1.03,0.7,1.42c0.47,0.47,1.1,0.73,1.77,0.73c0.67,0,1.3-0.26,1.77-0.73L21.83,13.07z" />
+                                    </g>
+                                </svg>
+                                Trade
+                            </button>
+                            <button class="flex-1" value="'chart">
+                                <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" />
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path
+                                                d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" />
+                                            <polygon
+                                                points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" />
+                                            <polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" />
+                                        </g>
+                                    </g>
+                                </svg>
+                                Chart
+                            </button>
+                        </nav>
                     </div>
                 </section>
             </div>
@@ -305,10 +328,6 @@
                 </div>
             </div>
             <div id="portfolio" class="grid mobile-page hide">
-                <div id="portfolio__header" class="grid gap-1">
-                    <h4>
-                        My portfolio
-                    </h4>
                 <div class="flex align-center space-between">
                     <strip-select id="portfolio_pages_selector">
                         <strip-option value="exchange" selected>Exchange</strip-option>
@@ -321,9 +340,11 @@
                         </button>
                     </div>
                 </div>
-                </div>
                 <div id="portfolio_pages_wrapper">
                     <div class="grid gap-1-5">
+                        <h4>
+                            My portfolio
+                        </h4>
                         <div class="grid">
                             <span class="label">Portfolio valuation</span>
                             <h1 id="portfolio_value" style="font-size: 2.5rem;"></h1>
@@ -1487,14 +1508,6 @@
 
         handleMobileChange(mobileQuery)
         document.addEventListener("visibilitychange", handleVisibilityChange, false);
-        function showChildElement(id, index) {
-            [...getRef(id).children].forEach((child, i) => {
-                if (i === index)
-                    child.classList.remove('hide')
-                else
-                    child.classList.add('hide')
-            })
-        }
         function handleVisibilityChange() {
             if (document.visibilityState === "hidden") {
                 // code if page is hidden 
@@ -1502,6 +1515,42 @@
                 updateRate();
             }
         }
+
+        // animations
+        const fadeIn = [
+            { opacity: 0 },
+            { opacity: 1 }
+        ]
+        const fadeOut = [
+            { opacity: 1 },
+            { opacity: 0 }
+        ]
+
+        function showChildElement(id, index, { mobileView = false, entry, exit }) {
+            const animOptions = {
+                duration: 150,
+                easing: 'ease',
+                fill: 'forwards'
+            }
+            const visibleElement = [...getRef(id).children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hide'));
+            if (visibleElement === getRef(id).children[index]) return;
+            if (visibleElement) {
+                if (exit) {
+                    visibleElement.animate(exit, animOptions).onfinish = () => {
+                        visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hide')
+                        getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
+                        if (entry)
+                            getRef(id).children[index].animate(entry, animOptions)
+                    }
+                } else {
+                    visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hide')
+                    getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
+                }
+            } else {
+                getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
+                getRef(id).children[index].animate(entry, animOptions)
+            }
+        }
     </script>
     <script>
         function buttonLoader(id, show = false) {
@@ -1629,6 +1678,7 @@
             const d = new Date(originalTime);
             return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;
         }
+        let marketTradesLazyLoader
         const render = {
             listedAsset(asset, rate, countDown) {
                 const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild
@@ -1793,10 +1843,9 @@
             marketOrders() {
                 const frag = document.createDocumentFragment()
                 const ordersType = getRef('market_orders_category_selector').value
-                getRef('market_trades').innerHTML = '';
                 if (ordersType === 'open') {
                     getRef('market_orders__title').textContent = 'Market-wide orders';
-                    showChildElement('market_orders_wrapper', 0)
+                    showChildElement('market_orders_wrapper', 0, { entry: slideInRight, exit: slideOutRight })
                     getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>';
                     floExchangeAPI.getBuyList().then(buyOrders => {
                         getRef('market_buy_orders').innerHTML = '';
@@ -1825,12 +1874,12 @@
                     })
                 } else {
                     getRef('market_orders__title').textContent = 'Market-wide trades';
-                    showChildElement('market_orders_wrapper', 1)
+                    showChildElement('market_orders_wrapper', 1, { entry: slideInLeft, exit: slideOutLeft })
                     getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>';
                     floExchangeAPI.getTradeList().then(trades => {
-                        trades.forEach(transaction => {
+                        const allTrades = trades.map(transaction => {
                             const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction
-                            const transactionDetails = {
+                            return {
                                 buyer,
                                 seller,
                                 asset,
@@ -1838,10 +1887,13 @@
                                 unitValue,
                                 time: tx_time
                             }
-                            frag.append(render.marketTransactionCard(transactionDetails))
                         })
-                        getRef('market_trades').innerHTML = '';
+                        if (marketTradesLazyLoader) {
-                        getRef('market_trades').append(frag)
+                            marketTradesLazyLoader.update(allTrades)
+                        } else {
+                            marketTradesLazyLoader = new LazyLoader('#market_trades', allTrades, render.marketTransactionCard)
+                        }
+                        marketTradesLazyLoader.init()
                     }).catch(err => {
                         console.log(err)
                     })
@@ -1911,44 +1963,6 @@
         }
 
         document.addEventListener('themechange', setChartTheme)
-        function showTradePanel() {
-            getRef('trade_form').classList.remove('hide-on-mobile')
-            getRef('trade_form').animate([
-                { transform: 'translateY(100%)' },
-                { transform: 'translateY(0)' },
-            ], {
-                duration: 150,
-                easing: 'ease'
-            })
-            getRef('trade_panel_backdrop').classList.remove('hide-on-mobile')
-            getRef('trade_panel_backdrop').animate([
-                { opacity: 0 },
-                { opacity: 1 },
-            ], {
-                duration: 150,
-                easing: 'ease'
-            })
-        }
-        function hideTradePanel() {
-            getRef('trade_form').animate([
-                { transform: 'translateY(0)' },
-                { transform: 'translateY(100%)' },
-            ], {
-                duration: 150,
-                easing: 'ease'
-            }).onfinish = () => {
-                getRef('trade_form').classList.add('hide-on-mobile')
-            }
-            getRef('trade_panel_backdrop').animate([
-                { opacity: 1 },
-                { opacity: 0 },
-            ], {
-                duration: 150,
-                easing: 'ease'
-            }).onfinish = () => {
-                getRef('trade_panel_backdrop').classList.add('hide-on-mobile')
-            }
-        }
 
         function updateTooltip(asset, tradeType) {
             getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
@@ -1961,6 +1975,17 @@
             getRef('quantity_selector_tip').textContent = `${tradeType} ${asset} worth of the above percentage`
         }
 
+        getRef('asset_page__footer').addEventListener('click', e => {
+            if (e.target.closest('button')) {
+                const button = e.target.closest('button');
+                [...getRef('asset_page__footer').children].forEach(child => {
+                    child.classList.remove('active')
+                });
+                button.classList.add('active')
+                showChildElement('asset_page_wrapper', button.value === 'trade' ? 1 : 0, { mobileView: true })
+            }
+        })
+
         let tradeType = 'buy'
         getRef('trade_type_selector').addEventListener('change', e => {
             tradeType = e.detail.value
@@ -2058,7 +2083,11 @@
         })
 
         getRef('portfolio_pages_selector').addEventListener('change', e => {
-            showChildElement('portfolio_pages_wrapper', e.target.value === 'exchange' ? 0 : 1)
+            if (e.target.value === 'exchange') {
+                showChildElement('portfolio_pages_wrapper', 0, { entry: slideInRight, exit: slideOutRight })
+            } else {
+                showChildElement('portfolio_pages_wrapper', 1, { entry: slideInLeft, exit: slideOutLeft })
+            }
         })
 
         getRef('my_assets').addEventListener('change', e => {
@@ -2069,35 +2098,20 @@
             }
             const previousActionButton = getRef('my_assets').querySelector('.portfolio_actions__wrapper')
             if (previousActionButton) {
-                previousActionButton.animate([
-                    {
-                        paddingTop: '1rem',
-                        height: `${previousActionButton.offsetHeight}px`,
-                        opacity: 1
-                    },
-                    {
-                        paddingTop: 0,
-                        height: 0,
-                        opacity: 0
-                    }
-                ], animOptions).onfinish = () => {
                 previousActionButton.remove()
             }
-            }
             const actionButtons = getRef('asset_balance_actions').content.cloneNode(true)
             e.target.closest('.balance-card').append(actionButtons)
             const height = e.target.closest('.balance-card').lastElementChild.offsetHeight
             e.target.closest('.balance-card').lastElementChild.animate([
                 {
-                    paddingTop: 0,
+                    transform: 'translateY(-0.5rem)',
-                    height: 0,
+                    opacity: 0.5
-                    opacity: 0
                 },
                 {
-                    paddingTop: '1rem',
+                    transform: 'translateY(0)',
-                    height: `${height}px`,
                     opacity: 1
-                }
+                },
             ], animOptions)
         })
 

docs/scripts/floExchangeAPI.js

@@ -468,7 +468,7 @@
         return new Promise((resolve, reject) => {
             let curPos = fetch_api.curPos || 0;
             if (curPos >= nodeList.length)
-                return reject(ExchangeError(ExchangeError.NODES_OFFLINE_CODE, 'No Node online! Try again later', errorCode.NODES_OFFLINE));
+                return reject(ExchangeError(ExchangeError.NODES_OFFLINE_CODE, 'No Node online! Refresh the page or try again later', errorCode.NODES_OFFLINE));
             let url = "https://" + nodeURL[nodeList[curPos]];
             (options ? fetch(url + api, options) : fetch(url + api))
                 .then(result => resolve(result)).catch(error => {