adding option to save UPI IDs

css/main.css

@@ -207,6 +207,10 @@ sm-form {
   --gap: 1rem;
 }
 
+sm-select {
+  --padding: 0.8rem;
+}
+
 strip-select {
   --gap: 0;
   background-color: rgba(var(--text-color), 0.06);
@@ -1220,7 +1224,7 @@ ul {
 @media screen and (min-width: 56rem) {
   #main_card {
     width: 56rem;
-    height: min(80vh, 48rem);
+    height: min(90vh, 48rem);
   }
 }
 @media (any-hover: hover) {
@@ -1244,11 +1248,11 @@ ul {
     background-color: rgba(var(--text-color), 0.06);
   }
 
-  button,
+  button:not([disabled]),
 .button:not([disabled]) {
     transition: background-color 0.3s, filter 0.3s;
   }
-  button:hover,
+  button:not([disabled]):hover,
 .button:not([disabled]):hover {
     filter: contrast(2);
   }

css/main.scss

@@ -187,6 +187,9 @@ sm-spinner {
 sm-form {
   --gap: 1rem;
 }
+sm-select {
+  --padding: 0.8rem;
+}
 strip-select {
   --gap: 0;
   background-color: rgba(var(--text-color), 0.06);
@@ -389,6 +392,7 @@ ul {
     background-color: var(--accent-color);
   }
 }
+
 .icon {
   width: 1.2rem;
   height: 1.2rem;
@@ -1155,7 +1159,7 @@ ul {
 @media screen and (min-width: 56rem) {
   #main_card {
     width: 56rem;
-    height: min(80vh, 48rem);
+    height: min(90vh, 48rem);
   }
 }
 @media (any-hover: hover) {
@@ -1178,7 +1182,7 @@ ul {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
-  button,
+  button:not([disabled]),
   .button:not([disabled]) {
     transition: background-color 0.3s, filter 0.3s;
     &:hover {

index.html

@@ -642,7 +642,7 @@
                     <h1 class="h1" id="rupee_balance"></h1>
                 </div>
                 <div class="flex">
-                    <button class="wallet-action" onclick="walletAction('deposit')">
+                    <button class="wallet-action" onclick="showPopup('topup_wallet_popup')">
                         <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" />
@@ -651,7 +651,7 @@
                         </svg>
                         Top-up wallet
                     </button>
-                    <button class="wallet-action" onclick="walletAction('withdraw')">
+                    <button class="wallet-action" onclick="showPopup('withdraw_wallet_popup')">
                         <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>
@@ -921,14 +921,14 @@
             <sm-form>
                 <sm-input id="get_new_title" placeholder="Name" autofocus animate required></sm-input>
                 <div class="flex align-center space-between">
-                    <button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSaved()">
+                    <button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSavedId()">
                         <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="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                         </svg>
                     </button>
-                    <button class="button button--primary cta" type="submit" onclick="saveChanges()">Save</button>
+                    <button class="button button--primary cta" type="submit" onclick="saveIdChanges()">Save</button>
                 </div>
             </sm-form>
         </section>
@@ -970,7 +970,57 @@
             </sm-form>
         </section>
     </sm-popup>
-    <sm-popup id="wallet_popup">
+    <sm-popup id="topup_wallet_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="hidePopup()">
+                <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+        </header>
+        <div id="topup_wallet_process">
+            <sm-form id="get_topup_amount_form">
+                <div class="grid gap-0-5">
+                    <h4>Top-up wallet</h4>
+                    <p>Add money to your wallet</p>
+                </div>
+                <sm-input id="request_cashier_amount" type="number" min="1" error-text="Amount should al least be ₹1"
+                    name="amount" placeholder="Amount" autofocus animate required>
+                    <svg class="icon" slot="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="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z" />
+                            </g>
+                        </g>
+                    </svg>
+                </sm-input>
+                <button class="button button--primary cta" onclick="continueWalletTopup()"
+                    type="submit">Continue</button>
+            </sm-form>
+            <sm-form id="confirm_topup_form" class="hide">
+                <div class="grid gap-0-5">
+                    <h4>Confirm</h4>
+                    <p id="topup_wallet__details"></p>
+                </div>
+                <sm-copy id="topup_wallet__upi_id" style="font-weight: 700;"></sm-copy>
+                <p>After sending money, please enter the UPI transaction ID of completed transfer.</p>
+                <sm-input id="topup_wallet__txid" minlength="12" maxlength="12"
+                    error-text="Please enter UPI transaction ID of money you sent to continue."
+                    placeholder="UPI transaction ID" autofocus animate required></sm-input>
+                <button class="button button--primary cta" onclick="depositMoneyToWallet()"
+                    type="submit">Confirm</button>
+            </sm-form>
+        </div>
+    </sm-popup>
+    <sm-popup id="withdraw_wallet_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close justify-self-start" onclick="hidePopup()">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@@ -983,10 +1033,10 @@
         </header>
         <sm-form>
             <div class="grid gap-0-5">
-                <h4 id="wallet_popup__title"></h4>
+                <h4>Transfer to bank</h4>
-                <p id="request_description"></p>
+                <p>Money will be sent to your bank account linked to selected UPI ID</p>
             </div>
-            <sm-input id="request_cashier_amount" type="number" min="1" error-text="Amount should al least be ₹1"
+            <sm-input id="send_cashier_amount" type="number" min="1" error-text="Amount should al least be ₹1"
                 name="amount" placeholder="Amount" autofocus animate required>
                 <svg class="icon" slot="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">
@@ -1001,7 +1051,40 @@
                     </g>
                 </svg>
             </sm-input>
-            <button id="wallet_popup__cta" class="button button--primary cta" type="submit">Continue</button>
+            <div class="grid gap-0-5 hide">
+                <p>
+                    <b>Select UPI ID to receive money</b>
+                </p>
+                <sm-select id="select_upi_id"></sm-select>
+            </div>
+            <button class="button" onclick="showPopup('save_upi_popup')">
+                <svg class="icon margin-right-0-5" 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="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                </svg>
+                Add UPI ID
+            </button>
+            <button class="button button--primary cta" onclick="withdrawMoneyFromWallet()"
+                type="submit">Transfer</button>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="save_upi_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="hidePopup()">
+                <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h4>Save UPI ID</h4>
+        </header>
+        <sm-form>
+            <sm-input id="get_upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z]{3,}"
+                error-text="Invalid UPI ID" autofocus animate required></sm-input>
+            <button class="button button--primary cta" onclick="saveUpiId()" type="submit">Save</button>
         </sm-form>
     </sm-popup>
 
@@ -1101,6 +1184,7 @@
             <time class="transaction-message__time"></time>
         </li>
     </template>
+
     <script src="scripts/components.js"></script>
     <script src="scripts/std_ui.js"></script>
     <script src="scripts/std_op.js"></script>
@@ -1111,8 +1195,12 @@
             showPage('loading')
             console.log("Starting the app! Please Wait!")
             floDapps.setCustomPrivKeyInput(getSignedIn)
-            floDapps.setAppObjectStores({ savedIds: {} })
+            floDapps.setAppObjectStores({ savedIds: {}, savedUserData: {} })
             floDapps.launchStartUp().then(result => {
+                floGlobals.savedIds = {};
+                floGlobals.savedUserData = {
+                    upiIds: {}
+                }
                 console.log(`Welcome ${myFloID}`);
                 getRef('logged_in_user_id').value = myFloID;
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)

scripts/fn_pay.js

@@ -86,7 +86,6 @@ User.findCashier = function () {
     if (!online.length)
         return null;
     else {
-        console.log(online);
         const random = floCrypto.randInt(0, online.length - 1)
         return online[random];
     }

scripts/fn_ui.js

@@ -9,49 +9,161 @@
 !function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
 
 const relativeTime = new RelativeTime({ style: 'narrow' });
-const userUI = {};
 
-let walletActionType = null;
+function syncUserData(obsName, data) {
-getRef('wallet_popup__cta').addEventListener('click', function () {
+    const dataToSend = Crypto.AES.encrypt(JSON.stringify(data), myPrivKey);
-    let cashier = User.findCashier();
+    return floCloudAPI.sendApplicationData(dataToSend, obsName, { receiverID: myFloID });
-    let amount = parseFloat(getRef('request_cashier_amount').value.trim());
+}
-    if (walletActionType === 'deposit') {
+async function organizeSyncedData(obsName) {
-        //get UPI txid from user
+    const fetchedData = await floCloudAPI.requestApplicationData(obsName, { mostRecent: true, senderIDs: [myFloID], receiverID: myFloID });
-        let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
+    if (fetchedData.length && await compactIDB.readData(obsName, 'lastSyncTime') !== fetchedData[0].time) {
-        if (!upiTxID)
+        await compactIDB.clearData(obsName);
-            return;
+        const dataToDecrypt = floCloudAPI.util.decodeMessage(fetchedData[0].message);
-        User.cashToToken(cashier, amount, upiTxID).then(result => {
+        const decryptedData = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
-            console.log(result);
+        for (let key in decryptedData) {
-            notify("Requested cashier. please wait!");
+            floGlobals[fetchedData][key] = decryptedData[key];
-        }).catch(error => console.error(error))
+            compactIDB.addData(obsName, decryptedData[key], key);
+        }
+        compactIDB.addData(obsName, fetchedData[0].time, 'lastSyncTime');
     } else {
-        //get confirmation from user
+        const idbData = await compactIDB.readAllData(obsName);
-        let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
+        for (const key in idbData) {
-        if (!upiID)
+            if (key !== 'lastSyncTime')
-            return;
+                floGlobals[obsName][key] = idbData[key];
-        User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
+        }
-            console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
-            User.tokenToCash(cashier, amount, txid, upiID).then(result => {
-                console.log(result);
-                notify("Requested cashier. please wait!");
-            }).catch(error => console.error(error))
-        }).catch(error => console.error(error))
     }
-})
+}
-function walletAction(type) {
+
-    walletActionType = type;
+const userUI = {};
+function continueWalletTopup() {
     let cashier = User.findCashier();
     if (!cashier)
         return notify("No cashier online. Please try again in a while.", 'error');
-    if (type === 'deposit') {
+    let amount = parseFloat(getRef('request_cashier_amount').value.trim());
-        getRef('wallet_popup__title').textContent = 'Top-up wallet';
+    getRef('topup_wallet__details').innerHTML = `Send <b>${formatAmount(amount)}</b> to UPI ID below`;
-        getRef('request_description').textContent = 'Add money to your wallet';
+    getRef('topup_wallet__upi_id').value = cashierUPI[cashier];
-    } else {
+    showProcessStage('topup_wallet_process', 1)
-        getRef('wallet_popup__title').textContent = 'Transfer to bank';
+    getRef('topup_wallet__txid').focusIn();
-        getRef('request_description').textContent = 'Money will be sent to your bank account linked to given UPI ID';
-    }
-    showPopup('wallet_popup')
 }
+function depositMoneyToWallet() {
+    let cashier = User.findCashier();
+    if (!cashier)
+        return notify("No cashier online. Please try again in a while.", 'error');
+    let amount = parseFloat(getRef('request_cashier_amount').value.trim());
+    let upiTxID = getRef('topup_wallet__txid').value.trim();
+    if (upiTxID === '')
+        return notify("Please enter UPI transaction ID", 'error');
+    User.cashToToken(cashier, amount, upiTxID).then(result => {
+        console.log(result);
+        notify("Requested cashier. please wait!");
+    }).catch(error => console.error(error))
+}
+
+function withdrawMoneyFromWallet() {
+    let cashier = User.findCashier();
+    if (!cashier)
+        return notify("No cashier online. Please try again in a while.", 'error');
+    let amount = parseFloat(getRef('send_cashier_amount').value.trim());
+    // let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
+    const upiID = getRef('select_upi_id').value;
+    if (!upiID)
+        return notify("Please add an UPI ID to continue", 'error');
+    User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
+        console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
+        User.tokenToCash(cashier, amount, txid, upiID).then(result => {
+            console.log(result);
+            notify("Requested cashier. please wait!");
+        }).catch(error => console.error(error))
+    }).catch(error => console.error(error))
+}
+
+async function renderSavedUpiIds() {
+    const frag = document.createDocumentFragment();
+    await organizeSyncedData('savedUserData');
+    console.log(floGlobals.savedUserData)
+}
+function saveUpiId() {
+    const upiID = getRef('get_upi_id').value.trim();
+    if (upiID === '')
+        return notify("Please add an UPI ID to continue", 'error');
+    if (floGlobals.savedUserData.upiIds.hasOwnProperty(upiID))
+        return notify('This UPI ID is already saved', 'error');
+    floGlobals.savedUserData.upiIds[upiID] = {}
+    syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
+        notify(`Saved ${upiID}`, 'success');
+        hidePopup();
+    }).catch(error => {
+        notify(error, 'error');
+    })
+}
+// delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
+//     if (e.target.closest('.edit-saved')) {
+//         const target = e.target.closest('.saved-id');
+//         getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
+//         getRef('get_new_title').value = getFloIdTitle(target.dataset.floId);
+//         showPopup('edit_saved_popup');
+//     } else if (e.target.closest('.copy-saved-id')) {
+//         const target = e.target.closest('.saved-id');
+//         navigator.clipboard.writeText(target.dataset.floId)
+//         target.dispatchEvent(
+//             new CustomEvent('copy', {
+//                 bubbles: true,
+//                 cancelable: true,
+//             })
+//         );
+//     } else {
+//         const target = e.target.closest('.saved-id');
+//         window.location.hash = `#/contact?floId=${target.dataset.floId}`;
+//     }
+// });
+// function saveIdChanges() {
+//     const floID = getRef('edit_saved_id').value;
+//     let title = getRef('get_new_title').value.trim();
+//     if (title == '')
+//         title = 'Unknown';
+//     floGlobals.savedIds[floID] = { title }
+//     syncUserData('savedIds', floGlobals.savedIds).then(() => {
+//         const potentialTarget = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${floID}"]`)
+//         if (potentialTarget) {
+//             potentialTarget.querySelector('.saved-id__title').textContent = title;
+//             potentialTarget.querySelector('.saved-id__initials').textContent = title.charAt(0).toUpperCase();
+//             // place the renamed card in alphabetically correct position
+//             const clone = potentialTarget.cloneNode(true);
+//             potentialTarget.remove();
+//             insertElementAlphabetically(title, clone)
+//         }
+//         hidePopup();
+//     }).catch(error => {
+//         notify(error, 'error');
+//     })
+// }
+// function deleteSavedId() {
+//     getConfirmation('Do you want delete this FLO ID?', {
+//         confirmText: 'Delete',
+//     }).then(res => {
+//         if (res) {
+//             const toDelete = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${getRef('edit_saved_id').value}"]`);
+//             if (toDelete)
+//                 toDelete.remove();
+//             delete floGlobals.savedIds[getRef('edit_saved_id').value];
+//             hidePopup();
+//             syncUserData('savedIds', floGlobals.savedIds).then(() => {
+//                 notify(`Deleted saved ID`, 'success');
+//             }).catch(error => {
+//                 notify(error, 'error');
+//             });
+//         }
+//     });
+// }
+// const savedIdsObserver = new MutationObserver((mutationList) => {
+//     mutationList.forEach(mutation => {
+//         getRef('saved_ids_tip').textContent = mutation.target.children.length === 0 ? `Click 'Add FLO ID' to add a new FLO ID.` : `Tap on saved IDs to see transaction history.`
+//     })
+// })
+
+// savedIdsObserver.observe(getRef('saved_ids_list'), {
+//     childList: true,
+// })
 
 userUI.sendMoneyToUser = function (floID, amount, remark) {
     getConfirmation('Confirm', { message: `Do you want to SEND ${amount} to ${floID}?` }).then(confirmation => {
@@ -351,35 +463,18 @@ function showTokenTransfer(type) {
 }
 
 function getArrayOfSavedIds() {
-    const arr = []
+    const arr = [];
     for (const key in floGlobals.savedIds) {
         arr.push({
             floID: key,
             details: floGlobals.savedIds[key]
-        })
+        });
     }
-    return arr.sort((a, b) => a.details.title.localeCompare(b.details.title))
+    return arr.sort((a, b) => a.details.title.localeCompare(b.details.title));
 }
 userUI.renderSavedIds = async function () {
-    floGlobals.savedIds = {}
+    const frag = document.createDocumentFragment();
-    const frag = document.createDocumentFragment()
+    await organizeSyncedData('savedIds');
-    const savedIds = await floCloudAPI.requestApplicationData('savedIds', { mostRecent: true, senderIDs: [myFloID], receiverID: myFloID });
-    if (savedIds.length && await compactIDB.readData('savedIds', 'lastSyncTime') !== savedIds[0].time) {
-        await compactIDB.clearData('savedIds');
-        const dataToDecrypt = floCloudAPI.util.decodeMessage(savedIds[0].message)
-        const data = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
-        for (let key in data) {
-            floGlobals.savedIds[key] = data[key];
-            compactIDB.addData('savedIds', data[key], key);
-        }
-        compactIDB.addData('savedIds', savedIds[0].time, 'lastSyncTime');
-    } else {
-        const idsToRender = await compactIDB.readAllData('savedIds');
-        for (const key in idsToRender) {
-            if (key !== 'lastSyncTime')
-                floGlobals.savedIds[key] = idsToRender[key];
-        }
-    }
     getArrayOfSavedIds().forEach(({ floID, details }) => {
         frag.append(render.savedId(floID, details));
     })
@@ -387,9 +482,11 @@ userUI.renderSavedIds = async function () {
 }
 async function saveId() {
     const floID = getRef('flo_id_to_save').value.trim();
+    if (floGlobals.savedIds.hasOwnProperty(floID))
+        return notify('This FLO ID is already saved', 'error');
     const title = getRef('flo_id_title_to_save').value.trim();
     floGlobals.savedIds[floID] = { title }
-    syncSavedIds().then(() => {
+    syncUserData('savedIds', floGlobals.savedIds).then(() => {
         insertElementAlphabetically(title, render.savedId(floID, { title }))
         notify(`Saved ${floID}`, 'success');
         hidePopup();
@@ -397,10 +494,6 @@ async function saveId() {
         notify(error, 'error');
     })
 }
-function syncSavedIds() {
-    const dataToSend = Crypto.AES.encrypt(JSON.stringify(floGlobals.savedIds), myPrivKey);
-    return floCloudAPI.sendApplicationData(dataToSend, 'savedIds', { receiverID: myFloID });
-}
 delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
     if (e.target.closest('.edit-saved')) {
         const target = e.target.closest('.saved-id');
@@ -421,13 +514,13 @@ delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
         window.location.hash = `#/contact?floId=${target.dataset.floId}`;
     }
 });
-function saveChanges() {
+function saveIdChanges() {
     const floID = getRef('edit_saved_id').value;
     let title = getRef('get_new_title').value.trim();
     if (title == '')
         title = 'Unknown';
     floGlobals.savedIds[floID] = { title }
-    syncSavedIds().then(() => {
+    syncUserData('savedIds', floGlobals.savedIds).then(() => {
         const potentialTarget = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${floID}"]`)
         if (potentialTarget) {
             potentialTarget.querySelector('.saved-id__title').textContent = title;
@@ -442,7 +535,7 @@ function saveChanges() {
         notify(error, 'error');
     })
 }
-function deleteSaved() {
+function deleteSavedId() {
     getConfirmation('Do you want delete this FLO ID?', {
         confirmText: 'Delete',
     }).then(res => {
@@ -452,7 +545,7 @@ function deleteSaved() {
                 toDelete.remove();
             delete floGlobals.savedIds[getRef('edit_saved_id').value];
             hidePopup();
-            syncSavedIds().then(() => {
+            syncUserData('savedIds', floGlobals.savedIds).then(() => {
                 notify(`Deleted saved ID`, 'success');
             }).catch(error => {
                 notify(error, 'error');

scripts/std_ui.js

@@ -89,9 +89,9 @@ function hidePopup() {
 }
 
 document.addEventListener('popupopened', async e => {
+    const frag = document.createDocumentFragment()
     switch (e.target.id) {
         case 'saved_ids_popup':
-            const frag = document.createDocumentFragment()
             const allSavedIds = await getArrayOfSavedIds()
             allSavedIds.forEach(({ floID, name }) => {
                 frag.append(render.savedIdPickerCard(floID, name))
@@ -100,7 +100,21 @@ document.addEventListener('popupopened', async e => {
             getRef('saved_ids_picker_list').append(frag)
             getRef('search_saved_ids_picker').focusIn()
             break;
-        case 'get_private_key_popup':
+        case 'withdraw_wallet_popup':
+            // const savedUpiIds = ['7744023898@paytm', '7744023898@ybl'];
+            const savedUpiIds = [];
+            if (savedUpiIds.length > 0) {
+                getRef('select_upi_id').parentNode.classList.remove('hide')
+                savedUpiIds.forEach((id, index) => {
+                    frag.append(createElement('sm-option', {
+                        textContent: id,
+                        attributes: {
+                            value: id,
+                        }
+                    }))
+                })
+                getRef('select_upi_id').append(frag)
+            }
             break;
     }
 })
@@ -111,14 +125,12 @@ document.addEventListener('popupclosed', e => {
             getRef('saved_ids_picker_list').innerHTML = ''
             getRef('search_saved_ids_picker').value = ''
             break;
-        case 'get_private_key_popup':
+        case 'topup_wallet_popup':
-            getRef('get_private_key').classList.remove('hide')
+            showProcessStage('topup_wallet_process', 0)
-            getRef('transaction_result').classList.add('hide')
-            getRef('confirm_transaction_button').classList.remove('hide')
-            getRef('confirm_transaction_button').nextElementSibling.classList.add('hide')
             break;
-        case 'retrieve_flo_id_popup':
+        case 'withdraw_wallet_popup':
-            getRef('recovered_flo_id_wrapper').classList.add('hide')
+            getRef('select_upi_id').parentNode.classList.add('hide')
+            getRef('select_upi_id').innerHTML = ''
             break;
     }
 })
@@ -332,7 +344,7 @@ async function showPage(targetPage, options = {}) {
             const paymentTransactions = []
             if (paymentsHistoryLoader)
                 paymentsHistoryLoader.clear()
-            getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
+            getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>';
             tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
                 for (const transactionId in transactions) {
                     paymentTransactions.push({
@@ -341,21 +353,21 @@ async function showPage(targetPage, options = {}) {
                     })
                 }
                 if (paymentsHistoryLoader) {
-                    paymentsHistoryLoader.update(paymentTransactions)
+                    paymentsHistoryLoader.update(paymentTransactions);
                 } else {
                     paymentsHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.transactionCard);
                 }
-                paymentsHistoryLoader.init()
+                paymentsHistoryLoader.init();
             }).catch(e => {
                 console.error(e)
             })
             break;
         case 'requests':
-            const paymentRequests = []
+            const paymentRequests = [];
             if (paymentRequestsLoader)
-                paymentRequestsLoader.clear()
+                paymentRequestsLoader.clear();
 
-            const pendingPaymentRequests = document.createDocumentFragment()
+            const pendingPaymentRequests = document.createDocumentFragment();
             let arePaymentsPending = false
             for (const transactionId in User.moneyRequests) {
                 if (!User.moneyRequests[transactionId].note) {
@@ -721,4 +733,13 @@ function handleMobileChange(e) {
     isMobileView = e.matches
 }
 mobileQuery.addEventListener('change', handleMobileChange)
-handleMobileChange(mobileQuery)
+handleMobileChange(mobileQuery)
+
+function showProcessStage(id, index) {
+    [...getRef(id).children].forEach((child, i) => {
+        if (i === index)
+            child.classList.remove('hide')
+        else
+            child.classList.add('hide')
+    })
+}