RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source
This commit is contained in:
sairaj mote 2022-04-13 20:28:23 +05:30
parent 62ec6de8ba
commit 9dd23f6151
6 changed files with 278 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
css/main.css
View File

@ -21,6 +21,7 @@ body {
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--yellow: rgb(220, 165, 0);
scrollbar-width: thin;
scrollbar-gutter: stable;
color: rgba(var(--text-color), 1);
@ -48,6 +49,7 @@ body[data-theme=dark] {
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
--yellow: rgb(255, 213, 5);
}
body[data-theme=dark] sm-popup::part(popup) {
background-color: rgba(var(--foreground-color), 1);
@ -625,11 +627,12 @@ h3 {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 1rem;
padding: 0.8rem;
gap: 0.5rem;
white-space: normal;
font-size: 0.8rem;
border-radius: 0.5rem;
font-weight: 400;
background-color: transparent;
text-align: center;
}
@ -646,22 +649,21 @@ h3 {
.wallet-action {
display: flex;
flex-direction: column;
white-space: normal;
font-size: 0.85rem;
padding: 0.8rem 0.5rem;
padding: 0.8rem 0.6rem !important;
color: rgba(var(--text-color), 1);
text-align: center;
align-items: center;
justify-content: center;
justify-content: flex-start;
background-color: rgba(var(--text-color), 0.03);
flex: 1;
}
.wallet-action:nth-of-type(2) {
margin: 0 0.5rem;
margin-left: 0.5rem;
}
.wallet-action .icon {
margin-bottom: 0.8rem;
margin-right: 0.5rem;
fill: var(--accent-color);
}
@ -700,14 +702,14 @@ h3 {
.card {
background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
padding: 1.5rem;
padding: 1rem;
}
#history {
height: 100%;
align-content: flex-start;
background-color: rgba(var(--foreground-color), 1);
width: min(60ch, 100%);
width: min(42rem, 100%);
justify-self: center;
margin: 0 auto;
padding: 1.5rem;
@ -721,16 +723,34 @@ h3 {
padding-bottom: 4rem;
}
#payments_history {
display: grid;
gap: 2rem;
}
.transaction {
grid-template-columns: auto 1fr auto;
gap: 0.5rem 1rem;
padding: 0.8rem;
align-items: center;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
}
.transaction:not(:last-of-type) {
margin-bottom: 0.5rem;
.transaction.sent .icon {
fill: rgba(var(--text-color), 0.8);
}
.transaction.sent .transaction__amount {
color: rgba(var(--text-color), 0.8);
}
.transaction.sent .transaction__amount::before {
content: "-";
}
.transaction.received .icon {
fill: var(--green);
}
.transaction.received .transaction__amount {
color: var(--green);
}
.transaction.received .transaction__amount::before {
content: "-";
}
.transaction__icon {
display: flex;
@ -740,10 +760,7 @@ h3 {
width: 2.5rem;
height: 2.5rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
}
.transaction__icon .icon {
fill: var(--accent-color);
border-radius: 2rem;
}
.transaction__receiver {
font-size: 0.9rem;
@ -759,15 +776,6 @@ h3 {
font-weight: 700;
grid-area: 1/3/3/4;
}
.transaction__amount.sent::before {
content: "-";
}
.transaction__amount.received {
color: var(--green);
}
.transaction__amount.received::before {
content: "+";
}
.fab {
position: absolute;
@ -893,6 +901,35 @@ h3 {
text-align: right;
}
.wallet-request {
align-items: initial;
flex-direction: column;
}
.wallet-request__details {
font-weight: 700;
}
.wallet-request__status {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 500;
}
.wallet-request__status .icon {
margin-right: 0.3rem;
}
.wallet-request__status.pending .icon {
fill: var(--yellow);
}
.wallet-request__status.completed .icon {
fill: var(--green);
}
.wallet-request__status.rejected .icon {
fill: var(--danger-color);
}
.wallet-request__note {
font-size: 0.8rem;
}
@media screen and (min-width: 40rem) {
sm-popup {
--width: 24rem;
@ -907,10 +944,14 @@ h3 {
padding: 1rem 1.5rem 0 1.5rem;
}
.card {
padding: 1.5rem;
}
#user {
gap: 1rem;
padding: 1.5rem 8vmax;
grid-template-columns: 1fr 20rem;
grid-template-columns: 1fr 22rem;
align-content: flex-start;
align-items: flex-start;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

105
css/main.scss
View File

@ -21,6 +21,7 @@ body {
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--yellow: rgb(220, 165, 0);
scrollbar-width: thin;
scrollbar-gutter: stable;
color: rgba(var(--text-color), 1);
@ -48,6 +49,7 @@ body[data-theme="dark"] {
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
--yellow: rgb(255, 213, 5);
sm-popup::part(popup) {
background-color: rgba(var(--foreground-color), 1);
}
@ -579,11 +581,12 @@ h3 {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 1rem;
padding: 0.8rem;
gap: 0.5rem;
white-space: normal;
font-size: 0.8rem;
border-radius: 0.5rem;
font-weight: 400;
// background-color: rgba(var(--text-color), 0.06);
background-color: transparent;
text-align: center;
@ -601,21 +604,20 @@ h3 {
}
.wallet-action {
display: flex;
flex-direction: column;
white-space: normal;
font-size: 0.85rem;
padding: 0.8rem 0.5rem;
padding: 0.8rem 0.6rem !important;
color: rgba(var(--text-color), 1);
text-align: center;
align-items: center;
justify-content: center;
justify-content: flex-start;
background-color: rgba(var(--text-color), 0.03);
flex: 1;
&:nth-of-type(2) {
margin: 0 0.5rem;
margin-left: 0.5rem;
}
.icon {
margin-bottom: 0.8rem;
margin-right: 0.5rem;
fill: var(--accent-color);
}
}
@ -654,13 +656,13 @@ h3 {
.card {
background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
padding: 1.5rem;
padding: 1rem;
}
#history {
height: 100%;
align-content: flex-start;
background-color: rgba(var(--foreground-color), 1);
width: min(60ch, 100%);
width: min(42rem, 100%);
justify-self: center;
margin: 0 auto;
padding: 1.5rem;
@ -672,15 +674,36 @@ h3 {
#wallet_history_wrapper {
padding-bottom: 4rem;
}
#payments_history {
display: grid;
gap: 2rem;
}
.transaction {
grid-template-columns: auto 1fr auto;
gap: 0.5rem 1rem;
padding: 0.8rem;
align-items: center;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
&:not(:last-of-type) {
margin-bottom: 0.5rem;
&.sent {
.icon {
fill: rgba(var(--text-color), 0.8);
}
.transaction__amount {
color: rgba(var(--text-color), 0.8);
&::before {
content: "-";
}
}
}
&.received {
.icon {
fill: var(--green);
}
.transaction__amount {
color: var(--green);
&::before {
content: "-";
}
}
}
&__icon {
display: flex;
@ -690,10 +713,7 @@ h3 {
width: 2.5rem;
height: 2.5rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
.icon {
fill: var(--accent-color);
}
border-radius: 2rem;
}
&__receiver {
font-size: 0.9rem;
@ -708,17 +728,6 @@ h3 {
font-size: 1rem;
font-weight: 700;
grid-area: 1/3/3/4;
&.sent {
&::before {
content: "-";
}
}
&.received {
color: var(--green);
&::before {
content: "+";
}
}
}
}
.fab {
@ -797,9 +806,6 @@ h3 {
}
}
#settings {
}
.cashier-request,
.wallet-request,
.payment-request {
@ -824,6 +830,40 @@ h3 {
text-align: right;
}
}
.wallet-request {
align-items: initial;
flex-direction: column;
&__details {
font-weight: 700;
}
&__status {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 500;
.icon {
margin-right: 0.3rem;
}
&.pending {
.icon {
fill: var(--yellow);
}
}
&.completed {
.icon {
fill: var(--green);
}
}
&.rejected {
.icon {
fill: var(--danger-color);
}
}
}
&__note {
font-size: 0.8rem;
}
}
@media screen and (min-width: 40rem) {
sm-popup {
--width: 24rem;
@ -835,10 +875,13 @@ h3 {
grid-column: 1/-1;
padding: 1rem 1.5rem 0 1.5rem;
}
.card {
padding: 1.5rem;
}
#user {
gap: 1rem;
padding: 1.5rem 8vmax;
grid-template-columns: 1fr 20rem;
grid-template-columns: 1fr 22rem;
align-content: flex-start;
align-items: flex-start;
}

111
index.html
View File

@ -158,7 +158,7 @@
<path d="M0 0h24v24H0z" fill="none" />
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
</svg>
Send
Send rupee
</button>
<button class="primary-action" onclick="showTokenTransfer('request')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
@ -171,7 +171,31 @@
d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
</g>
</svg>
Request
Request rupee
</button>
<button class="primary-action" onclick="">
<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="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
<path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
<path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
<rect height="2" width="2" x="19" y="19" />
<rect height="2" width="2" x="13" y="13" />
<rect height="2" width="2" x="15" y="15" />
<rect height="2" width="2" x="13" y="17" />
<rect height="2" width="2" x="15" y="19" />
<rect height="2" width="2" x="17" y="17" />
<rect height="2" width="2" x="17" y="13" />
<rect height="2" width="2" x="19" y="15" />
</g>
</g>
</svg>
Scan FLO QR
</button>
</div>
</div>
@ -196,42 +220,44 @@
<h5>Balance</h5>
<h1 class="h1" id="rupee_balance"></h1>
</div>
<!-- <div class="grid gap-1">
<sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
animate>
</sm-input>
</div> -->
<div class="flex">
<button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
<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="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
</svg>
Top-up wallet
</button>
<button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
<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>
<div class="grid gap-1">
<sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
</sm-input>
</div>
<div class="grid gap-0-5">
<div class="flex">
<button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
<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="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
</svg>
Top-up wallet
</button>
<button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
<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 height="7" width="3" x="4" y="10" />
<rect height="7" width="3" x="10.5" y="10" />
<rect height="3" width="20" x="2" y="19" />
<rect height="7" width="3" x="17" y="10" />
<polygon points="12,1 2,6 2,8 22,8 22,6" />
<rect fill="none" height="24" width="24" />
</g>
</g>
</svg>
Transfer to bank
</button>
<a href="#/history" class="wallet-action interact button">
<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>
<g>
<rect height="7" width="3" x="4" y="10" />
<rect height="7" width="3" x="10.5" y="10" />
<rect height="3" width="20" x="2" y="19" />
<rect height="7" width="3" x="17" y="10" />
<polygon points="12,1 2,6 2,8 22,8 22,6" />
</g>
</g>
</svg>
Transfer to bank
</button>
</div>
<a href="#/history" class="button interact wallet-action">
<svg class="icon margin-right-0-5" 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">
<path d="M0,0h24v24H0V0z" fill="none" />
<g>
<path
@ -242,7 +268,7 @@
<rect height="2" width="2" x="16" y="10" />
</g>
</svg>
See History
See transactions history
</a>
</div>
</section>
@ -411,12 +437,13 @@
</template>
<template id="wallet_request_template">
<li class="wallet-request flex-wrap">
<div class="grid gap-0-5 flex-1">
<div class="wallet-request__requestor breakable"></div>
<div class="flex align-center space-between">
<time class="wallet-request__time"></time>
<div class="wallet-request__status flex align-center"></div>
</div>
<div class="grid gap-0-5 flex-1">
<div class="wallet-request__details"></div>
</div>
<div class="wallet-request__mode"></div>
<div class="wallet-request__status"></div>
</li>
</template>
<template id="payment_request_template">
@ -447,7 +474,7 @@
getRef('logged_in_user_id').value = myFloID;
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
tokenAPI.getBalance(myFloID).then(balance => {
const formattedBalance = balance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
const formattedBalance = formatAmount(balance)
const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
getRef('rupee_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
})

15
scripts/components.js
View File

@ -1930,7 +1930,6 @@ smCopy.innerHTML = `
}
.copy{
display: grid;
width: 100%;
gap: 0.5rem;
padding: var(--padding);
align-items: center;
@ -1951,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);
@ -1966,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);
}
@ -1978,7 +1981,7 @@ smCopy.innerHTML = `
<p class="copy-content"></p>
<button part="button" class="copy-button" title="copy">
<slot name="copy-icon">
<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="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>
COPY
</slot>
</button>
</section>

68
scripts/fn_ui.js
View File

@ -235,6 +235,23 @@ function getFloIdName(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 '<i class="fas fa-clock"></i>';
case 'COMPLETED':
return '<i class="fas fa-check"></i>';
case 'REJECTED':
return '<i class="fas fa-times"></i>';
default:
break;
}
}
const render = {
savedId(floID, details) {
const { title } = details.hasOwnProperty('title') ? details : { title: details };
@ -250,15 +267,15 @@ const render = {
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.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount);
if (sender === myFloID) {
clone.querySelector('.transaction__amount').classList.add('sent');
clone.classList.add('sent');
clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdName(receiver) || 'Myself'}`;
clone.querySelector('.transaction__icon').innerHTML = `<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="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>`;
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon sent" 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="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
} else if (receiver === myFloID) {
clone.querySelector('.transaction__amount').classList.add('received');
clone.classList.add('received');
clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdName(sender)}`;
clone.querySelector('.transaction__icon').innerHTML = `<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 5.41L18.59 4 7 15.59V9H5v10h10v-2H8.41z"/></svg>`;
clone.querySelector('.transaction__icon').innerHTML = `<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 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
} else { //This should not happen unless API returns transaction that does not involve myFloID
row.insertCell().textContent = tx.sender;
row.insertCell().textContent = tx.receiver;
@ -280,14 +297,45 @@ const render = {
return clone;
},
walletRequestCard(details) {
const { time, receiverID, message: { mode }, note, tag, vectorClock } = details;
const { time, receiverID, message: { mode, amount }, note, tag, vectorClock } = details;
console.log(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__details').textContent = `${mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'} ${formatAmount(amount)}`;
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;
let status = tag ? tag : (note ? 'REJECTED' : "PENDING");
let icon = '';
switch (status) {
case 'COMPLETED':
clone.children[1].append(
createElement('div', {
className: 'grid',
innerHTML: `
<h5 style="margin-bottom: 0.3rem;">Transaction ID</h5>
<sm-copy class="wallet-request__note" value="${note}"></sm-copy>
`
})
);
icon = `<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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`
break;
case 'REJECTED':
clone.children[1].append(
createElement('div', {
className: 'wallet-request__note',
innerHTML: note.split(':')[1]
})
);
icon = `<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="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>`
break;
case 'PENDING':
icon = `<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><g><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M16.2,16.2L11,13V7h1.5v5.2l4.5,2.7L16.2,16.2z"/></g></g></g></svg>`
break;
default:
break;
}
clone.querySelector('.wallet-request__status').innerHTML = `${icon}${status}`;
clone.querySelector('.wallet-request__status').classList.add(status.toLowerCase());
return clone;
},
paymentRequestCard(details) {