Added confirmation popup for trading

docs/css/main.css

@@ -403,7 +403,7 @@ ul {
   display: grid;
   gap: 0.5rem;
   width: 100%;
-  padding: 0 1.5rem 0 0.5rem;
+  padding: 0 1.5rem 0 0.8rem;
   align-items: center;
   grid-template-columns: auto 1fr auto;
 }
@@ -496,13 +496,14 @@ sm-checkbox {
 }
 
 .tip {
-  border-radius: 2rem;
+  border-radius: 1.5rem;
   background-color: rgba(var(--text-color), 0.06);
   padding: 0.3rem 0.8rem;
   font-size: 0.85rem;
 }
 .tip .icon {
   fill: var(--accent-color);
+  flex-shrink: 0;
 }
 
 .page-layout {
@@ -689,16 +690,13 @@ sm-checkbox {
 
 #asset_page__nav {
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  align-items: flex-start;
+  justify-content: space-between;
   padding: 1rem 0;
 }
 #asset_page__nav .icon-only {
   margin-left: -0.7rem;
 }
-#asset_page__nav strip-select {
-  align-self: center;
-}
 
 #trade_form {
   height: 100%;
@@ -1084,7 +1082,7 @@ sm-checkbox {
   }
 
   .popup__header {
-    padding: 1rem 1.5rem 0 0.5rem;
+    padding: 1rem 1.5rem 0 0.8rem;
   }
 
   #confirmation_popup {
@@ -1154,8 +1152,6 @@ sm-checkbox {
   }
 
   #price_history_chart {
-    overflow: hidden;
-    border-radius: 0.5rem;
     height: 20rem;
   }
 

docs/css/main.scss

@@ -385,7 +385,7 @@ ul {
   display: grid;
   gap: 0.5rem;
   width: 100%;
-  padding: 0 1.5rem 0 0.5rem;
+  padding: 0 1.5rem 0 0.8rem;
   align-items: center;
   grid-template-columns: auto 1fr auto;
 }
@@ -473,12 +473,13 @@ sm-checkbox {
   line-height: 1.5;
 }
 .tip {
-  border-radius: 2rem;
+  border-radius: 1.5rem;
   background-color: rgba(var(--text-color), 0.06);
   padding: 0.3rem 0.8rem;
   font-size: 0.85rem;
   .icon {
     fill: var(--accent-color);
+    flex-shrink: 0;
   }
 }
 .page-layout {
@@ -655,15 +656,12 @@ sm-checkbox {
 }
 #asset_page__nav {
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  align-items: flex-start;
+  justify-content: space-between;
   padding: 1rem 0;
   .icon-only {
     margin-left: -0.7rem;
   }
-  strip-select {
-    align-self: center;
-  }
 }
 #trade_form {
   height: 100%;
@@ -1005,7 +1003,7 @@ sm-checkbox {
     font-size: 1rem;
   }
   .popup__header {
-    padding: 1rem 1.5rem 0 0.5rem;
+    padding: 1rem 1.5rem 0 0.8rem;
   }
   #confirmation_popup {
     --width: 24rem;
@@ -1067,10 +1065,7 @@ sm-checkbox {
     }
   }
   #price_history_chart {
-    overflow: hidden;
-    border-radius: 0.5rem;
     height: 20rem;
-    // grid-column: 1/-1;
   }
   #asset_list_wrapper {
     grid-row: 1/3;

docs/index.html

@@ -171,9 +171,7 @@
                             <div id="trade_button_wrapper"
                                 class="stateful-button-wrapper flex align-center justify-center">
                                 <sm-button id="trade_button" class="uppercase w-100" variant="primary"
-                                    onclick="tradeFlo()">
+                                    onclick="showPopup('confirm_trade_popup')">BUY FLO
-                                    BUY
-                                    FLO
                                 </sm-button>
                             </div>
                         </sm-form>
@@ -203,7 +201,7 @@
                         </button>
                         <div class="options">
                             <button class="button" title="Cancel selected orders" onclick="cancelAll()">
-                                Cancel orders
+                                Cancel all
                             </button>
                         </div>
                     </div>
@@ -327,6 +325,45 @@
             </a>
         </nav>
     </article>
+
+    <sm-popup id="confirm_trade_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="hidePopup()">
+                <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>
+            <h3 id="confirm_trade__title" class="uppercase">BUY</h3>
+        </header>
+        <section class="grid gap-1-5">
+            <div class="grid gap-0-5">
+                <h5 id="confirm_trade__price_type"></h5>
+                <h4 id="confirm_trade__price"></h4>
+            </div>
+            <div class="grid gap-0-5">
+                <h5>Quantity</h5>
+                <h4 id="confirm_trade__quantity"></h4>
+            </div>
+            <div class="grid gap-0-5">
+                <h5>Total</h5>
+                <h4 id="confirm_trade__total"></h4>
+            </div>
+            <div class="flex align-center tip">
+                <svg class="icon margin-right-0-5" style="height: 1em; width: 1em;" 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">
+                    <rect fill="none" height="24" width="24" y="0" />
+                    <path
+                        d="M7,20h4c0,1.1-0.9,2-2,2S7,21.1,7,20z M5,19h8v-2H5V19z M16.5,9.5c0,3.82-2.66,5.86-3.77,6.5H5.27 C4.16,15.36,1.5,13.32,1.5,9.5C1.5,5.36,4.86,2,9,2S16.5,5.36,16.5,9.5z M14.5,9.5C14.5,6.47,12.03,4,9,4S3.5,6.47,3.5,9.5 c0,2.47,1.49,3.89,2.35,4.5h6.3C13.01,13.39,14.5,11.97,14.5,9.5z M21.37,7.37L20,8l1.37,0.63L22,10l0.63-1.37L24,8l-1.37-0.63L22,6 L21.37,7.37z M19,6l0.94-2.06L22,3l-2.06-0.94L19,0l-0.94,2.06L16,3l2.06,0.94L19,6z" />
+                </svg>
+                <p id="confirm_trade__tip" style="font-size: inherit;">
+                    Buy FLO worth of above percentage rupee
+                </p>
+            </div>
+            <sm-button variant="primary" onclick="tradeAsset()" autofocus>Confirm</sm-button>
+        </section>
+    </sm-popup>
     <sm-popup id="user_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close" onclick="hidePopup()">
@@ -1457,7 +1494,8 @@
         getRef('price_duration_selector').addEventListener('change', e => {
             render.chart(pagesData.params.asset, e.detail.value === 'hour' ? '48 weeks' : 'all-time')
         })
-        async function tradeFlo() {
+        async function tradeAsset() {
+            hidePopup()
             const asset = pagesData.params.asset;
             const quantity = parseFloat(getRef('get_quantity').value)
             const price = parseFloat(getRef('get_price').value)
@@ -1848,6 +1886,24 @@
                     getRef('generated_flo_id').value = floID
                     getRef('generated_private_key').value = privKey
                     break;
+                case 'confirm_trade_popup':
+                    const asset = pagesData.params.asset;
+                    const tradeType = getRef('trade_type_selector').value
+                    const quantity = parseFloat(getRef('get_quantity').value)
+                    const price = parseFloat(getRef('get_price').value)
+                    const total = parseFloat(getRef('get_total').value)
+                    getRef('confirm_trade__title').textContent = `${tradeType} ${asset}`
+                    getRef('confirm_trade__price_type').textContent = tradeType === 'buy' ? 'Max price' : 'Min price'
+                    getRef('confirm_trade__price').textContent = formatAmount(price)
+                    getRef('confirm_trade__quantity').textContent = quantity
+                    getRef('confirm_trade__total').textContent = formatAmount(total)
+                    if (price !== floGlobals.exchangeRates[asset]) {
+                        getRef('confirm_trade__tip').textContent = `Trade will only happen at current price of ${asset}. So ${tradeType}ing at ${price > floGlobals.exchangeRates[asset] ? 'higher' : 'lower'} price won't execute until price matches that.`
+                        getRef('confirm_trade__tip').parentNode.classList.remove('hide')
+                    } else {
+                        getRef('confirm_trade__tip').parentNode.classList.add('hide')
+                    }
+                    break;
             }
         })
         document.addEventListener('popupclosed', e => {