UI and feature update

-- implemented client side QR code generation
-- separated wallet and payments history

css/main.css

@@ -798,6 +798,10 @@ ul {
   grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
 }
 
+.wallet-action,
+.integrated-action-button {
+  color: inherit;
+}
 .wallet-action .icon:first-of-type,
 .integrated-action-button .icon:first-of-type {
   height: 2.5rem;
@@ -843,7 +847,6 @@ ul {
 }
 
 #topup_wallet__qr_code {
-  padding: 2vw;
   background-color: rgba(var(--text-color), 0.03);
   border-radius: 0.5rem;
   height: 12rem;
@@ -1006,7 +1009,6 @@ ul {
 }
 
 #history .page__header {
-  min-height: 4rem;
   margin-bottom: 0;
 }
 
@@ -1360,6 +1362,11 @@ ul {
   margin-left: 0.3rem;
 }
 
+#transaction__amount {
+  font-size: 2.5rem;
+  font-weight: 700;
+}
+
 #transaction__remark,
 #transaction__note {
   line-height: 1.6;

css/main.scss

@@ -747,6 +747,7 @@ ul {
 }
 .wallet-action,
 .integrated-action-button {
+  color: inherit;
   .icon:first-of-type {
     height: 2.5rem;
     width: 2.5rem;
@@ -788,7 +789,6 @@ ul {
   }
 }
 #topup_wallet__qr_code {
-  padding: 2vw;
   background-color: rgba(var(--text-color), 0.03);
   border-radius: 0.5rem;
   height: 12rem;
@@ -944,7 +944,6 @@ ul {
 
 #history {
   .page__header {
-    min-height: 4rem;
     margin-bottom: 0;
   }
 }
@@ -1274,6 +1273,10 @@ ul {
     }
   }
 }
+#transaction__amount {
+  font-size: 2.5rem;
+  font-weight: 700;
+}
 #transaction__remark,
 #transaction__note {
   line-height: 1.6;

index.html

@@ -216,6 +216,20 @@
                         <h1 class="h1" id="flo_balance"></h1>
                     </div>
                 </div>
+                <a class="integrated-action-button flex align-center user-element" href="#/wallet">
+                    <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="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
+                    </svg>
+                    See wallet top-up and withdraw history
+                    <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                    </svg>
+                </a>
             </div>
             <div id="user" class="hide grid gap-2 user-element">
                 <div class="grid gap-0-5">
@@ -295,15 +309,9 @@
             </section>
         </section>
         <section id="history" class="inner-page hide grid gap-1-5">
-            <strip-select id="history_type_selector" class="justify-self-center">
-                <strip-option value="payment" selected>Payments</strip-option>
-                <strip-option value="wallet">Wallet</strip-option>
-            </strip-select>
             <div class="page__header">
                 <div class="grid">
-                    <h4>
+                    <h4>Payments</h4>
-                        <r-s sid="history_type">Payments</r-s>
-                    </h4>
                     <h1>history</h1>
                 </div>
                 <button class="button button--small align-self-end" onclick="showPopup('payments_filters_popup')">
@@ -319,25 +327,38 @@
                 <h5>Applied filters</h5>
                 <div id="history_applied_filters" class="flex gap-0-5"></div>
             </div>
-            <div id="history_wrapper">
+            <ul id="payments_history" class="observe-empty-state"></ul>
-                <div>
+            <div class=" empty-state gap-1 justify-center text-center">
-                    <ul id="payments_history" class="observe-empty-state"></ul>
+                <h4>No transactions</h4>
+            </div>
+        </section>
+        <section id="wallet" class="inner-page hide">
+            <div class="flex sticky top-0" style="background-color: rgba(var(--foreground-color),1);">
+                <a href="#/home" class="button icon-only margin-right-0-5">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </a>
+            </div>
+            <div class="page__header">
+                <div class="grid">
+                    <h4>Wallet</h4>
+                    <h1>transactions</h1>
+                </div>
+            </div>
+            <div id="wallet_history_wrapper" class="grid gap-1-5">
+                <div class="hide grid gap-1">
+                    <h4>Pending transactions</h4>
+                    <ul id="pending_wallet_transactions" class="grid gap-0-5"></ul>
+                </div>
+                <div class="grid gap-1">
+                    <ul id="wallet_history" class="observe-empty-state grid gap-0-5"></ul>
                     <div class=" empty-state gap-1 justify-center text-center">
                         <h4>No transactions</h4>
                     </div>
                 </div>
-                <div id="wallet_history_wrapper" class="grid gap-1-5 hide">
-                    <div class="hide grid gap-1">
-                        <h4>Pending transactions</h4>
-                        <ul id="pending_wallet_transactions" class="grid gap-0-5"></ul>
-                    </div>
-                    <div class="grid gap-1">
-                        <ul id="wallet_history" class="observe-empty-state grid gap-0-5"></ul>
-                        <div class=" empty-state gap-1 justify-center text-center">
-                            <h4>No transactions</h4>
-                        </div>
-                    </div>
-                </div>
             </div>
         </section>
         <section id="contacts" class="inner-page hide flex flex-direction-column">
@@ -463,7 +484,7 @@
                 <h4 id="transaction__type"></h4>
             </div>
             <div class="grid gap-1">
-                <h1 id="transaction__amount"></h1>
+                <div id="transaction__amount"></div>
                 <div id="transaction__remark" class="hide"></div>
                 <div class="flex align-center" style="font-size: 0.8rem;">
                     <time id="transaction__time"></time>
@@ -1138,6 +1159,7 @@
     <script src="scripts/fn_ui.js"></script>
     <script src="scripts/floTokenAPI.js"></script>
     <script src="scripts/floExchangeAPI.js"></script>
+    <script src="scripts/qrcode.min.js"></script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
             showPage('loading')

scripts/fn_ui.js

@@ -44,10 +44,8 @@ function continueWalletTopup() {
     let amount = parseFloat(getRef('request_cashier_amount').value.trim());
     getRef('topup_wallet__details').innerHTML = `Send <b>${formatAmount(amount)}</b> to UPI ID below`;
     getRef('topup_wallet__upi_id').value = cashierUPI[cashier];
-    fetch(`https://upiqr.in/api/qr?name=cashier&vpa=${cashierUPI[cashier]}`).then(res => {
+    getRef('topup_wallet__qr_code').innerHTML = ''
-        res.text().then(data => getRef('topup_wallet__qr_code').innerHTML = data)
+    getRef('topup_wallet__qr_code').append(new QRCode(`upi://pay?am=${amount}&pa=${cashierUPI[cashier]}`))
-            .catch(err => console.error(err));
-    }).catch(err => console.error(err));
     showChildElement('topup_wallet_process', 1)
     getRef('topup_wallet__txid').focusIn();
 }
@@ -184,7 +182,7 @@ userUI.renderCashierRequests = function (requests, error = null) {
         return console.error(error);
     else if (typeof requests !== "object" || requests === null)
         return;
-    if (pagesData.lastPage === 'history') {
+    if (pagesData.lastPage === 'wallet') {
         for (let transactionID in requests) {
             const { note, tag } = requests[transactionID];
             let status = tag ? 'done' : (note ? 'failed' : "pending");
@@ -831,12 +829,6 @@ function executeUserAction() {
         userUI.requestMoneyFromUser(floID, amount, remark);
     }
 }
-const [historyType, setHistoryType] = createState('Payments', 'history_type', (v) => {
-    showChildElement('history_wrapper', v === 'Payments' ? 0 : 1)
-});
-getRef('history_type_selector').addEventListener('change', e => {
-    setHistoryType(e.target.value === 'payment' ? 'Payments' : 'Wallet')
-})
 
 function toggleFilters() {
     const animOptions = {

scripts/std_ui.js

@@ -372,6 +372,8 @@ async function showPage(targetPage, options = {}) {
             break;
         case 'history':
             render.paymentsHistory()
+            break;
+        case 'wallet':
             const walletTransactions = []
             if (walletHistoryLoader)
                 walletHistoryLoader.clear()
@@ -483,8 +485,11 @@ async function showPage(targetPage, options = {}) {
     if (pageId !== 'history') {
         if (paymentsHistoryLoader)
             paymentsHistoryLoader.clear()
+    }
+    if (pageId !== 'wallet') {
         if (walletHistoryLoader)
             walletHistoryLoader.clear()
+
     }
     if (pageId !== 'contact') {
         if (contactHistoryLoader)