+
+
+
-
-
-
RanchiMall Pay
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -341,12 +633,13 @@
-
+
+
+
+
+
+
@@ -369,13 +668,18 @@
diff --git a/scripts/components.js b/scripts/components.js
index 85d5d80..122b6f3 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -689,148 +689,150 @@ customElements.define('sm-input',
})
const smNotifications = document.createElement('template')
smNotifications.innerHTML = `
-
-
-`;
-
-
+ .hide{
+ opacity: 0 !important;
+ pointer-events: none !important;
+ }
+ .notification-panel{
+ display: grid;
+ width: 100%;
+ gap: 0.5rem;
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: 100;
+ max-height: 100%;
+ padding: 1rem;
+ overflow: hidden auto;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: contain;
+ touch-action: none;
+ }
+ .notification-panel:empty{
+ display:none;
+ }
+ .notification{
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ position: relative;
+ border-radius: 0.3rem;
+ background: rgba(var(--foreground-color, (255,255,255)), 1);
+ overflow: hidden;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
+ -ms-hyphens: auto;
+ -webkit-hyphens: auto;
+ hyphens: auto;
+ max-width: 100%;
+ padding: 1rem;
+ align-items: center;
+ touch-action: none;
+ }
+ .icon-container:not(:empty){
+ margin-right: 0.5rem;
+ height: var(--icon-height);
+ width: var(--icon-width);
+ }
+ h4:first-letter,
+ p:first-letter{
+ text-transform: uppercase;
+ }
+ h4{
+ font-weight: 400;
+ }
+ p{
+ line-height: 1.6;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ color: rgba(var(--text-color, (17,17,17)), 0.9);
+ overflow-wrap: break-word;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
+ -ms-hyphens: auto;
+ -webkit-hyphens: auto;
+ hyphens: auto;
+ max-width: 100%;
+ }
+ .notification:last-of-type{
+ margin-bottom: 0;
+ }
+ .icon {
+ height: 100%;
+ width: 100%;
+ fill: rgba(var(--text-color, (17,17,17)), 0.7);
+ }
+ .icon--success {
+ fill: var(--green);
+ }
+ .icon--failure,
+ .icon--error {
+ fill: var(--danger-color);
+ }
+ .close{
+ height: 2rem;
+ width: 2rem;
+ border: none;
+ cursor: pointer;
+ margin-left: 1rem;
+ border-radius: 50%;
+ padding: 0.3rem;
+ transition: background-color 0.3s, transform 0.3s;
+ background-color: transparent;
+ }
+ .close:active{
+ transform: scale(0.9);
+ }
+ @media screen and (min-width: 640px){
+ .notification-panel{
+ max-width: 28rem;
+ width: max-content;
+ top: auto;
+ bottom: 0;
+ }
+ .notification{
+ width: auto;
+ border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
+ }
+ }
+ @media (any-hover: hover){
+ ::-webkit-scrollbar{
+ width: 0.5rem;
+ }
+
+ ::-webkit-scrollbar-thumb{
+ background: rgba(var(--text-color, (17,17,17)), 0.3);
+ border-radius: 1rem;
+ &:hover{
+ background: rgba(var(--text-color, (17,17,17)), 0.5);
+ }
+ }
+ .close:hover{
+ background-color: rgba(var(--text-color, (17,17,17)), 0.1);
+ }
+ }
+
+
+ `;
customElements.define('sm-notifications', class extends HTMLElement {
constructor() {
super();
@@ -849,7 +851,23 @@ customElements.define('sm-notifications', class extends HTMLElement {
this.createNotification = this.createNotification.bind(this)
this.removeNotification = this.removeNotification.bind(this)
this.clearAll = this.clearAll.bind(this)
+ this.handlePointerMove = this.handlePointerMove.bind(this)
+
+ this.startX = 0;
+ this.currentX = 0;
+ this.endX = 0;
+ this.swipeDistance = 0;
+ this.swipeDirection = '';
+ this.swipeThreshold = 0;
+ this.startTime = 0;
+ this.swipeTime = 0;
+ this.swipeTimeThreshold = 200;
+ this.currentTarget = null;
+
+ this.mediaQuery = window.matchMedia('(min-width: 640px)')
+ this.handleOrientationChange = this.handleOrientationChange.bind(this)
+ this.isLandscape = false
}
randString(length) {
@@ -867,16 +885,16 @@ customElements.define('sm-notifications', class extends HTMLElement {
notification.classList.add('notification');
let composition = ``;
composition += `
-
+
+
+ RanchiMall Pay
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+ Sign out
-
-
- Wallet transactions
- Payment requests
-
-
-
-
-
-
-
-
-
-
- Sign out
-
-
-
-
-
+
+
+
+
+
-
-
+
+
+
+
-
- -
-
-
- Balance
- -
-
-
-
+
-
-
-
+ Scan FLO QR
+
+
+
+
+
+
+
+ Saved FLO IDs
+ + Click 'Add FLO ID' to add a new FLO ID. +
+
+
+
No Saved FLO ID
Requests
-
-
- No requests to process
-Requests
+
+
No requests to process
+Transactions history
--
-
Payments history
+
+
+ No transactions
+
+
+
+
+
+
+
+
+
+
+ Payment requests
+
+
+ No requests
+
+
+ + + Wallet +
+
+
+ Balance
+ +
+
+
+
+
+
+
+ Wallet history
+No transactions
Settings
+
+
+ My FLO ID
+Activity
-
-
- No transactions
-
-
- No requests
-Settings
-
-
- My FLO ID
-Change UPI ID
-Change UPI ID
+Save FLO ID
+
+
+
+ Edit
+
+
+ FLO ID
+
+
+
+
+
-
+
+
+
+
+
-
-
@@ -362,6 +655,12 @@
${icon}
- ${message}
- `; +${icon}
+ ${message}
+ `; if (pinned) { notification.classList.add('pinned'); composition += ` - - `; + + `; } notification.innerHTML = composition; return notification; @@ -884,28 +902,45 @@ customElements.define('sm-notifications', class extends HTMLElement { push(message, options = {}) { const notification = this.createNotification(message, options); - this.notificationPanel.append(notification); + if (this.isLandscape) + this.notificationPanel.append(notification); + else + this.notificationPanel.prepend(notification); + this.notificationPanel.animate( + [ + { + transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`, + }, + { + transform: `none`, + }, + ], this.animationOptions + ) notification.animate([ { - transform: `translateY(1rem)`, + transform: `translateY(-1rem)`, opacity: '0' }, { transform: `none`, opacity: '1' }, - ], this.animationOptions); + ], this.animationOptions).onfinish = (e) => { + e.target.commitStyles() + e.target.cancel() + } return notification.id; } - removeNotification(notification) { + removeNotification(notification, direction = 'left') { + const sign = direction === 'left' ? '-' : '+'; notification.animate([ { - transform: `none`, + transform: this.currentX ? `translateX(${this.currentX}px)` : `none`, opacity: '1' }, { - transform: `translateY(0.5rem)`, + transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`, opacity: '0' } ], this.animationOptions).onfinish = () => { @@ -919,7 +954,70 @@ customElements.define('sm-notifications', class extends HTMLElement { }); } + handlePointerMove(e) { + this.currentX = e.clientX - this.startX; + this.currentTarget.style.transform = `translateX(${this.currentX}px)`; + } + + handleOrientationChange(e) { + this.isLandscape = e.matches + if (e.matches) { + // landscape + + } else { + // portrait + } + } connectedCallback() { + + this.handleOrientationChange(this.mediaQuery); + + this.mediaQuery.addEventListener('change', this.handleOrientationChange); + this.notificationPanel.addEventListener('pointerdown', e => { + if (e.target.closest('.notification')) { + this.swipeThreshold = this.clientWidth / 2; + this.currentTarget = e.target.closest('.notification'); + this.currentTarget.setPointerCapture(e.pointerId); + this.startTime = Date.now(); + this.startX = e.clientX; + this.startY = e.clientY; + this.notificationPanel.addEventListener('pointermove', this.handlePointerMove); + } + }); + this.notificationPanel.addEventListener('pointerup', e => { + this.endX = e.clientX; + this.endY = e.clientY; + this.swipeDistance = Math.abs(this.endX - this.startX); + this.swipeTime = Date.now() - this.startTime; + if (this.endX > this.startX) { + this.swipeDirection = 'right'; + } else { + this.swipeDirection = 'left'; + } + if (this.swipeTime < this.swipeTimeThreshold) { + if (this.swipeDistance > 50) + this.removeNotification(this.currentTarget, this.swipeDirection); + } else { + if (this.swipeDistance > this.swipeThreshold) { + this.removeNotification(this.currentTarget, this.swipeDirection); + } else { + this.currentTarget.animate([ + { + transform: `translateX(${this.currentX}px)`, + }, + { + transform: `none`, + }, + ], this.animationOptions).onfinish = (e) => { + e.target.commitStyles() + e.target.cancel() + } + } + } + this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove) + this.notificationPanel.releasePointerCapture(e.pointerId); + this.currentX = 0; + }); this.notificationPanel.addEventListener('click', e => { if (e.target.closest('.close')) { this.removeNotification(e.target.closest('.notification')); @@ -941,8 +1039,10 @@ customElements.define('sm-notifications', class extends HTMLElement { childList: true, }); } + disconnectedCallback() { + mediaQueryList.removeEventListener('change', handleOrientationChange); + } }); - class Stack { constructor() { this.items = []; @@ -1830,7 +1930,6 @@ smCopy.innerHTML = ` } .copy{ display: grid; - width: 100%; gap: 0.5rem; padding: var(--padding); align-items: center; @@ -1851,8 +1950,15 @@ smCopy.innerHTML = ` cursor: pointer; border: none; padding: 0.4rem; - background-color: inherit; + background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); + transition: background-color 0.2s; + font-family: inherit; + color: inherit; + font-size: 0.7rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05rem; } .copy-button:active{ background-color: var(--button-background-color); @@ -1866,9 +1972,6 @@ smCopy.innerHTML = ` .copy:hover .copy-button{ opacity: 1; } - .copy-button{ - opacity: 0.6; - } .copy-button:hover{ background-color: var(--button-background-color); } @@ -1878,7 +1981,7 @@ smCopy.innerHTML = ` @@ -2265,14 +2368,19 @@ customElements.define('strip-select', class extends HTMLElement { this.slottedOptions = undefined; this._value = undefined; this.scrollDistance = 0; + this.assignedElements = []; this.scrollLeft = this.scrollLeft.bind(this); this.scrollRight = this.scrollRight.bind(this); this.fireEvent = this.fireEvent.bind(this); + this.setSelectedOption = this.setSelectedOption.bind(this); } get value() { return this._value; } + set value(val) { + this.setSelectedOption(val); + } scrollLeft() { this.stripSelect.scrollBy({ left: -this.scrollDistance, @@ -2286,6 +2394,19 @@ customElements.define('strip-select', class extends HTMLElement { behavior: 'smooth' }); } + setSelectedOption(value) { + if (this._value === value) return + this._value = value; + this.assignedElements.forEach(elem => { + if (elem.value === value) { + elem.setAttribute('active', ''); + elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); + } + else + elem.removeAttribute('active') + }); + } + fireEvent() { this.dispatchEvent( new CustomEvent("change", { @@ -2306,17 +2427,17 @@ customElements.define('strip-select', class extends HTMLElement { const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left'); const navButtonRight = this.shadowRoot.querySelector('.nav-button--right'); slot.addEventListener('slotchange', e => { - const assignedElements = slot.assignedElements(); - assignedElements.forEach(elem => { + this.assignedElements = slot.assignedElements(); + this.assignedElements.forEach(elem => { if (elem.hasAttribute('selected')) { elem.setAttribute('active', ''); this._value = elem.value; } }); if (!this.hasAttribute('multiline')) { - if (assignedElements.length > 0) { - firstOptionObserver.observe(slot.assignedElements()[0]); - lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]); + if (this.assignedElements.length > 0) { + firstOptionObserver.observe(this.assignedElements[0]); + lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]); } else { navButtonLeft.classList.add('hide'); @@ -2343,10 +2464,7 @@ customElements.define('strip-select', class extends HTMLElement { resObs.observe(this); this.stripSelect.addEventListener('option-clicked', e => { if (this._value !== e.target.value) { - this._value = e.target.value; - slot.assignedElements().forEach(elem => elem.removeAttribute('active')); - e.target.setAttribute('active', ''); - e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); + this.setSelectedOption(e.target.value); this.fireEvent(); } }); diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js index b9e1502..2d503f5 100644 --- a/scripts/fn_ui.js +++ b/scripts/fn_ui.js @@ -1,37 +1,47 @@ -/*jshint esversion: 6 */ +/*jshint esversion: 8 */ +/** + * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time + * + * @version v1.0.0 + * @homepage https://github.com/yairEO/relative-time + */ + +!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 = {}; -userUI.requestTokenFromCashier = function () { +getRef('wallet_popup__cta').addEventListener('click', function () { let cashier = User.findCashier(); - if (!cashier) - return alert("No cashier online"); let amount = parseFloat(getRef('request_cashier_amount').value.trim()); - //get UPI txid from user - let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`); - if (!upiTxID) - return alert("Cancelled"); - User.cashToToken(cashier, amount, upiTxID).then(result => { - console.log(result); - alert("Requested cashier. please wait!"); - }).catch(error => console.error(error)) -} - -userUI.withdrawCashFromCashier = function () { - let cashier = User.findCashier(); - if (!cashier) - return alert("No cashier online"); - let amount = parseFloat(getRef('request_cashier_amount').value.trim()); - //get confirmation from user - let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`); - if (!upiID) - return alert("Cancelled"); - 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 => { + if (walletAction === 'deposit') { + //get UPI txid from user + let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`); + if (!upiTxID) + return alert("Cancelled"); + User.cashToToken(cashier, amount, upiTxID).then(result => { console.log(result); alert("Requested cashier. please wait!"); }).catch(error => console.error(error)) - }).catch(error => console.error(error)) + } else { + //get confirmation from user + let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`); + if (!upiID) + return alert("Cancelled"); + 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); + alert("Requested cashier. please wait!"); + }).catch(error => console.error(error)) + }).catch(error => console.error(error)) + } +}) +function walletAction(type) { + let cashier = User.findCashier(); + if (!cashier) + return notify("No cashier online. Please try again in a while.", 'error'); + showPopup('wallet_popup') } userUI.sendMoneyToUser = function (floID, amount, remark) { @@ -63,13 +73,15 @@ userUI.renderCashierRequests = function (requests, error = null) { return console.error(error); else if (typeof requests !== "object" || requests === null) return; - const frag = document.createDocumentFragment() - for (let r in requests) { - let oldCard = document.getElementById(r); - if (oldCard) oldCard.remove(); - frag.append(render.walletRequestCard(requests[r])) + if (pagesData.lastPage === 'history' && pagesData.params.type === 'wallet') { + const frag = document.createDocumentFragment() + for (let transactionID in requests) { + let oldCard = getRef('wallet_history').querySelector(`#${transactionID}`); + if (oldCard) oldCard.remove(); + frag.append(render.walletRequestCard(transactionID, requests[transactionID])) + } + getRef('wallet_history').prepend(frag) } - getRef('user-cashier-requests').append(frag) } userUI.renderMoneyRequests = function (requests, error = null) { @@ -86,6 +98,32 @@ userUI.renderMoneyRequests = function (requests, error = null) { getRef('user-money-requests').append(frag) } +userUI.renderSavedIds = async function () { + floGlobals.savedIds = {} + const frag = document.createDocumentFragment() + 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]; + } + } + for (const key in floGlobals.savedIds) { + frag.append(render.savedId(key, floGlobals.savedIds[key])); + } + getRef('saved_ids_list').append(frag); +} + userUI.payRequest = function (reqID) { let request = User.moneyRequests[reqID]; getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?` }).then(confirmation => { @@ -183,71 +221,116 @@ function completeTokenToCashRequest(request) { }) } -function renderAllTokenTransactions() { - tokenAPI.getAllTxs(myFloID).then(result => { - getRef('token_transactions').innerHTML = '' - const frag = document.createDocumentFragment(); - for (let txid in result.transactions) { - frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid]))) - } - getRef('token_transactions').append(frag) - }).catch(error => console.error(error)) +function getFloIdTitle(floID) { + return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID; +} + +function formatAmount(amount) { + return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' }) +} + +function getStatusIcon(status) { + switch (status) { + case 'PENDING': + return ''; + case 'COMPLETED': + return ''; + case 'REJECTED': + return ''; + default: + break; + } } const render = { - transactionCard(txid, transactionDetails) { - const { time, sender, receiver, tokenAmount } = transactionDetails + savedId(floID, details) { + const { title } = details.hasOwnProperty('title') ? details : { title: details }; + const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild; + clone.dataset.floId = floID; + clone.querySelector('.saved-id__initials').textContent = title.charAt(0); + clone.querySelector('.saved-id__title').textContent = title; + return clone; + }, + transactionCard(transactionDetails) { + const { txid, time, sender, receiver, tokenAmount } = transactionDetails; const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild; - clone.dataset.txid = txid - clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000) - clone.querySelector('.transaction__amount').textContent = tokenAmount + clone.dataset.txid = txid; + clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000); + clone.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount); if (sender === myFloID) { - clone.querySelector('.transaction__amount').classList.add('sent') - clone.querySelector('.transaction__receiver').textContent = `Sent to ${receiver || 'Myself'}` - clone.querySelector('.transaction__icon').innerHTML = `` + clone.classList.add('sent'); + clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdTitle(receiver) || 'Myself'}`; + clone.querySelector('.transaction__icon').innerHTML = ``; } else if (receiver === myFloID) { - clone.querySelector('.transaction__amount').classList.add('received') - clone.querySelector('.transaction__receiver').textContent = `Received from ${sender}` - clone.querySelector('.transaction__icon').innerHTML = `` + clone.classList.add('received'); + clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdTitle(sender)}`; + clone.querySelector('.transaction__icon').innerHTML = ``; } else { //This should not happen unless API returns transaction that does not involve myFloID row.insertCell().textContent = tx.sender; row.insertCell().textContent = tx.receiver; } - return clone + return clone; }, cashierRequestCard(details) { const { time, senderID, message: { mode }, note, tag, vectorClock } = details; const clone = getRef('cashier_request_template').content.cloneNode(true).firstElementChild; - clone.id = vectorClock + clone.id = vectorClock; const status = tag || note; //status tag for completed, note for rejected - clone.querySelector('.cashier-request__requestor').textContent = senderID - clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time) - clone.querySelector('.cashier-request__mode').textContent = mode + clone.querySelector('.cashier-request__requestor').textContent = senderID; + clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time); + clone.querySelector('.cashier-request__mode').textContent = mode; if (status) - clone.querySelector('.cashier-request__status').textContent = status + clone.querySelector('.cashier-request__status').textContent = status; else - clone.querySelector('.cashier-request__status').innerHTML = `` - return clone + clone.querySelector('.cashier-request__status').innerHTML = ``; + return clone; }, walletRequestCard(details) { - const { time, receiverID, message: { mode }, note, tag, vectorClock } = details; + const { time, message: { mode, amount }, note, tag, vectorClock } = details; const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild; - clone.id = vectorClock - clone.querySelector('.wallet-request__requestor').textContent = receiverID - clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time) - clone.querySelector('.wallet-request__mode').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw' - let status = tag ? (tag + ":" + note) : (note || "PENDING"); - clone.querySelector('.wallet-request__status').textContent = status - return clone + clone.id = vectorClock; + clone.querySelector('.wallet-request__details').textContent = `${mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'} ${formatAmount(amount)}`; + clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time); + let status = tag ? tag : (note ? 'REJECTED' : "PENDING"); + let icon = ''; + switch (status) { + case 'COMPLETED': + clone.children[1].append( + createElement('div', { + className: 'flex flex-wrap align-center wallet-request__note', + innerHTML: `Transaction ID: