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

0.0.41

Browse Source
This commit is contained in:
sairaj mote 2020-09-26 18:41:39 +05:30
parent ed5dcf9623
commit 5e2cea29c9
6 changed files with 217 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components.js
View File

@ -47,8 +47,6 @@ smButton.innerHTML = `
text-transform: capitalize; text-transform: capitalize;
font-size: 0.9em; font-size: 0.9em;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.9);
font-family: var(--font-family);
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
outline: none; outline: none;
@ -722,7 +720,6 @@ word-spacing: 0.1em;
text-align: center; text-align: center;
transition: color 0.3s; transition: color 0.3s;
text-transform: capitalize; text-transform: capitalize;
font-family: var(--font-family);
height: 100%; height: 100%;
} }
@media (hover: hover){ @media (hover: hover){
@ -1728,7 +1725,7 @@ smPopup.innerHTML = `
transition: transform 0.3s; transition: transform 0.3s;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020;
max-height: 100vh; max-height: 90vh;
} }
.container-header{ .container-header{
display: flex; display: flex;
@ -2872,6 +2869,9 @@ pointer-events: none;
height: 100%; height: 100%;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
:host(.round) .indicator{
border-radius: 3rem;
}
:host([variant="tab"]) .tab-header{ :host([variant="tab"]) .tab-header{
border-bottom: none; border-bottom: none;
} }
@ -2879,11 +2879,10 @@ border-bottom: none;
display: none; display: none;
} }
:host([variant="tab"]) .tab-header{ :host([variant="tab"]) .tab-header{
gap: 0; gap: 0.2rem;
display: inline-grid; display: inline-grid;
justify-self: flex-start; justify-self: flex-start;
background: rgba(var(--text-color), 0.1); border-radius: 0.3rem;
border-radius: 0.3rem;
} }
:host([variant="tab"]) slot::slotted(.active){ :host([variant="tab"]) slot::slotted(.active){
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);

1
css/card-art1.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><style>.a,.b{fill:none;stroke-miterlimit:10;}.a{stroke:#fff;stroke-width:2px;opacity:0.8;}.b{stroke:#c1272d;opacity:0.6;}</style></defs><title>card-art1</title><circle class="a" cx="64" cy="64" r="19"/><path class="b" d="M9.32,53.55c1,.55,2.43,1.2,3.16.63,1.18-.9-.57-4,.64-5.07s5,1.52,5.7.64c.47-.62-1.18-2.18-.64-3.17.4-.73,1.79-.78,3.17-.63"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

105
css/main.css
View File

@ -418,11 +418,18 @@ details, summary {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
details p { summary {
border-radius: 0.2rem; cursor: pointer;
padding: 0.5rem 1rem; }
background: rgba(var(--text-color), 0.06);
details h5 {
line-height: 0.6;
margin-bottom: 0; margin-bottom: 0;
margin-top: 1.2rem !important;
}
details p {
font-size: 0.9rem;
line-height: 1.4;
} }
#sign_in_popup h3 { #sign_in_popup h3 {
@ -536,7 +543,7 @@ details p {
.display-balance { .display-balance {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-areas: ". ." "flo flo"; grid-template-areas: ". ." "flo flo";
gap: 1rem; gap: 0.8rem;
margin-top: 1rem; margin-top: 1rem;
} }
.display-balance .balance { .display-balance .balance {
@ -544,29 +551,43 @@ details p {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 1rem; border-radius: 1rem;
padding: 1.5rem; padding: 1rem;
justify-content: flex-end; justify-content: flex-end;
} }
.display-balance .balance h4 { .display-balance .balance h4 {
margin-top: 2.5rem; margin-bottom: 3rem;
font-size: 1.8rem; font-size: 2.5rem;
font-family: "Roboto", sans-serif;
font-weight: 500;
} }
.display-balance .balance h5 { .display-balance .balance h5 {
opacity: 0.8; opacity: 0.8;
margin-bottom: 0.2rem;
}
.display-balance .balance .tooltip {
border-radius: 1rem;
color: rgba(var(--text-color), 1);
} }
.display-balance .balance:nth-of-type(1) { .display-balance .balance:nth-of-type(1) {
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.1);
}
.display-balance .balance:nth-of-type(1) .tooltip {
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
} }
.display-balance .balance:nth-of-type(2) { .display-balance .balance:nth-of-type(2) {
background: linear-gradient(#ff4857, #fd946a); background: linear-gradient(135deg, #fd946a, #ff4857);
background-size: cover;
}
.display-balance .balance:nth-of-type(2) .tooltip {
box-shadow: 0 0 0 0.4rem #ff4857 inset;
} }
.display-balance .balance:nth-of-type(3) { .display-balance .balance:nth-of-type(3) {
grid-area: flo; grid-area: flo;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
background: linear-gradient(#051575, #0d014e); background: linear-gradient(135deg, #2f69e6, #1b0980);
} }
.display-balance .balance:nth-of-type(3) .tooltip { .display-balance .balance:nth-of-type(3) .tooltip {
color: rgba(var(--text-color), 1); box-shadow: 0 0 0 0.4rem #1b0980 inset;
} }
.display-balance .balance .tooltip { .display-balance .balance .tooltip {
margin-left: auto; margin-left: auto;
@ -590,23 +611,28 @@ details p {
flex-direction: column; flex-direction: column;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
z-index: 1; z-index: 1;
transition: clip-path 0.3s; transition: clip-path 0.4s ease-out;
clip-path: circle(0.8rem at calc(100% - 1.25rem) 1.15rem); clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem);
scrollbar-width: thin;
} }
.tooltip .tt-icon { .tooltip .tt-icon {
display: inline-flex; display: inline-flex;
width: 2.5rem; width: 3rem;
height: 2.5rem; height: 3rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
font-weight: 600; font-weight: 600;
} }
.tooltip .tooltip-text { .tooltip .tooltip-text {
padding: 1.5rem; padding: 1rem;
padding-top: 0;
line-height: 1.4; line-height: 1.4;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: normal; font-weight: normal;
overflow-y: auto;
max-height: calc(100% - 3rem);
max-width: 30ch;
} }
.tooltip:hover { .tooltip:hover {
clip-path: circle(100%); clip-path: circle(100%);
@ -638,11 +664,14 @@ details p {
.options-tab .option .icon { .options-tab .option .icon {
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
background: rgba(var(--text-color), 0.06);
border-radius: 2rem;
padding: 0.8rem; padding: 0.8rem;
stroke: var(--accent-color); margin-bottom: 0.6rem;
} }
.options-tab .option h4 { .options-tab .option h4 {
font-size: 0.9rem; font-size: 0.85rem;
opacity: 0.8;
font-weight: 500; font-weight: 500;
} }
.options-tab .option:active { .options-tab .option:active {
@ -680,14 +709,16 @@ sm-tab-header {
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
z-index: 2; z-index: 2;
padding: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
} }
sm-tab::part(tab) { sm-tab {
padding: 0.8rem 0.4rem;
text-transform: capitalize; text-transform: capitalize;
} }
sm-tab::part(tab) {
padding: 0.4rem 1.2rem;
}
sm-panel { sm-panel {
width: 100%; width: 100%;
@ -1051,6 +1082,7 @@ sm-panel {
.activity .activity-amount { .activity .activity-amount {
text-align: right; text-align: right;
grid-area: amount; grid-area: amount;
font-family: "Roboto", sans-serif;
} }
.activity .activity-time { .activity .activity-time {
text-align: right; text-align: right;
@ -1066,7 +1098,7 @@ sm-panel {
width: 100%; width: 100%;
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
border-radius: 0.3rem; border-radius: 0.3rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.06);
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
@ -1127,6 +1159,14 @@ sm-panel {
width: max-content; width: max-content;
} }
#settings_page > h4 {
margin-top: 2rem;
margin-bottom: 0.5rem;
}
#settings_page p {
color: rgba(var(--text-color), 0.7);
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit { #home_page, #deposit {
display: grid; display: grid;
@ -1153,7 +1193,7 @@ sm-panel {
body { body {
padding: 0 2rem; padding: 0 2rem;
margin-left: 10rem; margin-left: 11rem;
} }
sm-popup { sm-popup {
@ -1178,13 +1218,13 @@ sm-panel {
right: auto; right: auto;
border-top: none; border-top: none;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
box-shadow: -0.5rem 0 0.5rem #00000008 inset;
} }
#navbar .navbar-item { #navbar .navbar-item {
display: flex; display: flex;
border-radius: 0.5rem; border-radius: 0.5rem;
width: auto; width: auto;
padding: 0.8rem 1.6rem; padding: 0.8rem 1.6rem;
margin-bottom: 0.3rem;
} }
#navbar .navbar-item .icon { #navbar .navbar-item .icon {
height: 1.2rem; height: 1.2rem;
@ -1208,6 +1248,9 @@ sm-panel {
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
} }
#navbar .active {
background: rgba(var(--text-color), 0.06);
}
.page { .page {
padding-bottom: 2rem; padding-bottom: 2rem;
@ -1224,18 +1267,14 @@ sm-panel {
margin-top: 1rem; margin-top: 1rem;
} }
#home_page .balance h4 { #home_page .balance h4 {
margin-top: 1rem; margin-bottom: 2.5rem;
} }
.options-tab { .options-tab {
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
gap: 1rem; gap: 2rem 0.8rem;
} }
#settings_page > h4 {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
#settings_page .copy-row { #settings_page .copy-row {
display: inline-grid; display: inline-grid;
} }
@ -1313,7 +1352,7 @@ sm-panel {
} }
} }
@media (any-hover: hover) { @media (any-hover: hover) {
.option:hover { .navbar-item:hover {
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.06);
} }
} }

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

@ -436,12 +436,18 @@ sm-popup{
details, summary{ details, summary{
margin-bottom: 1rem; margin-bottom: 1rem;
} }
summary{
cursor: pointer;
}
details{ details{
p{ h5{
border-radius: 0.2rem; line-height: 0.6;
padding: 0.5rem 1rem;
background: rgba(var(--text-color), 0.06);
margin-bottom: 0; margin-bottom: 0;
margin-top: 1.2rem !important;
}
p{
font-size: 0.9rem;
line-height: 1.4;
} }
} }
@ -563,34 +569,48 @@ details{
.display-balance { .display-balance {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-areas: '. .' 'flo flo'; grid-template-areas: '. .' 'flo flo';
gap: 1rem; gap: 0.8rem;
margin-top: 1rem; margin-top: 1rem;
.balance{ .balance{
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 1rem; border-radius: 1rem;
padding: 1.5rem; padding: 1rem;
justify-content: flex-end; justify-content: flex-end;
h4{ h4{
margin-top: 2.5rem; margin-bottom: 3rem;
font-size: 1.8rem; font-size: 2.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
} }
h5{ h5{
opacity: 0.8; opacity: 0.8;
margin-bottom: 0.2rem;
}
.tooltip{
border-radius: 1rem;
color: rgba(var(--text-color), 1);
} }
&:nth-of-type(1){ &:nth-of-type(1){
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.1);
.tooltip{
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
}
} }
&:nth-of-type(2){ &:nth-of-type(2){
background: linear-gradient(#ff4857, #fd946a); background: linear-gradient(135deg, #fd946a, #ff4857);
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem #ff4857 inset;
}
} }
&:nth-of-type(3){ &:nth-of-type(3){
grid-area: flo; grid-area: flo;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
background: linear-gradient(#051575, #0d014e); background: linear-gradient(135deg, #2f69e6, #1b0980);
.tooltip{ .tooltip{
color: rgba(var(--text-color), 1); box-shadow: 0 0 0 0.4rem#1b0980 inset;
} }
} }
.tooltip{ .tooltip{
@ -617,22 +637,27 @@ details{
flex-direction: column; flex-direction: column;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
z-index: 1; z-index: 1;
transition: clip-path 0.3s; transition: clip-path 0.4s ease-out;
clip-path: circle(0.8rem at calc(100% - 1.25rem) 1.15rem); clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem);
scrollbar-width: thin;
.tt-icon{ .tt-icon{
display: inline-flex; display: inline-flex;
width: 2.5rem; width: 3rem;
height: 2.5rem; height: 3rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
font-weight: 600; font-weight: 600;
} }
.tooltip-text{ .tooltip-text{
padding: 1.5rem; padding: 1rem;
padding-top: 0;
line-height: 1.4; line-height: 1.4;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: normal; font-weight: normal;
overflow-y: auto;
max-height: calc(100% - 3rem);
max-width: 30ch;
} }
&:hover{ &:hover{
clip-path: circle(100%); clip-path: circle(100%);
@ -663,12 +688,15 @@ details{
.icon { .icon {
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
background: rgba(var(--text-color), 0.06);
border-radius: 2rem;
padding: 0.8rem; padding: 0.8rem;
stroke: var(--accent-color); margin-bottom: 0.6rem;
} }
h4 { h4 {
font-size: 0.9rem; font-size: 0.85rem;
opacity: 0.8;
font-weight: 500; font-weight: 500;
} }
@ -711,12 +739,14 @@ sm-tab-header {
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
z-index: 2; z-index: 2;
padding: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
} }
sm-tab::part(tab){ sm-tab{
padding: 0.8rem 0.4rem;
text-transform: capitalize; text-transform: capitalize;
&::part(tab){
padding: 0.4rem 1.2rem;
}
} }
sm-panel{ sm-panel{
width: 100%; width: 100%;
@ -1117,6 +1147,7 @@ sm-panel{
.activity-amount{ .activity-amount{
text-align: right; text-align: right;
grid-area: amount; grid-area: amount;
font-family: 'Roboto', sans-serif;
} }
.activity-time{ .activity-time{
text-align: right; text-align: right;
@ -1132,7 +1163,7 @@ sm-panel{
width: 100%; width: 100%;
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
border-radius: 0.3rem; border-radius: 0.3rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.06);
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:first-of-type:not(:last-of-type){ &:first-of-type:not(:last-of-type){
@ -1191,6 +1222,15 @@ sm-panel{
justify-self: flex-start; justify-self: flex-start;
width: max-content; width: max-content;
} }
#settings_page{
& > h4{
margin-top: 2rem;
margin-bottom: 0.5rem;
}
p{
color: rgba(var(--text-color), 0.7);
}
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit{ #home_page, #deposit{
display: grid; display: grid;
@ -1215,7 +1255,7 @@ sm-panel{
} }
body { body {
padding: 0 2rem; padding: 0 2rem;
margin-left: 10rem; margin-left: 11rem;
} }
sm-popup{ sm-popup{
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
@ -1238,12 +1278,12 @@ sm-panel{
right: auto; right: auto;
border-top: none; border-top: none;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
box-shadow: -0.5rem 0 0.5rem #00000008 inset;
.navbar-item { .navbar-item {
display: flex; display: flex;
border-radius: 0.5rem; border-radius: 0.5rem;
width: auto; width: auto;
padding: 0.8rem 1.6rem; padding: 0.8rem 1.6rem;
margin-bottom: 0.3rem;
.icon { .icon {
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
@ -1267,6 +1307,9 @@ sm-panel{
width: 1.2rem; width: 1.2rem;
} }
} }
.active{
background: rgba(var(--text-color), 0.06);
}
} }
.page { .page {
@ -1283,19 +1326,15 @@ sm-panel{
} }
.balance{ .balance{
h4{ h4{
margin-top: 1rem; margin-bottom: 2.5rem;
} }
} }
} }
.options-tab{ .options-tab{
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
gap: 1rem; gap: 2rem 0.8rem;
} }
#settings_page{ #settings_page{
& > h4{
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.copy-row{ .copy-row{
display: inline-grid; display: inline-grid;
} }
@ -1383,7 +1422,7 @@ sm-panel{
} }
@media (any-hover: hover) { @media (any-hover: hover) {
.option:hover{ .navbar-item:hover{
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.06);
} }
} }

113
index.html
View File

@ -70,14 +70,20 @@
</svg> </svg>
</button> </button>
</header> </header>
<svg class="icon illustration" viewBox="0 0 64 64">
<path
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
</svg>
<p> <p>
Send rupee to any FLO address.<br> Send rupee to any FLO address.
<strong>Make sure you have enough balance.</strong>
</p> </p>
<details>
<summary>
How to send rupee?
</summary>
<h5>Step 1</h5>
<p>Enter receiver's FLO address.</p>
<h5>Step 2</h5>
<p>Enter the amount you want to send.</p>
<h5>Step 3</h5>
<p>Press <strong>Send</strong> button.</p>
</details>
<sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input> <sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input>
<sm-input id="token_amount" placeholder="Amount" type="number" min="1" max="100000" required> <sm-input id="token_amount" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
@ -103,19 +109,26 @@
</svg> </svg>
</button> </button>
</header> </header>
<svg class="icon illustration" viewBox="0 0 64 64">
<title>deposit</title>
<path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
<path
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
<path
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
<polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
</svg>
<p> <p>
Add money through UPI. Deposit money through UPI.
</p> </p>
<details>
<summary>
How to deposit money?
</summary>
<h5>Step 1</h5>
<p>Copy UPI address shown below.</p>
<h5>Step 2</h5>
<p>Open any UPI app of your preference and send money to copied UPI address. <strong>(Do not close this browser)</strong></p>
<h5>Step 3</h5>
<p>Copy the UPI transaction ID shown after transaction was successful.</p>
<h5>Step 4</h5>
<p>Enter the amount you sent to copied address</p>
<h5>Step 5</h5>
<p>Then enter the UPI transaction ID you copied when was transaction completed.</p>
<h5>Step 6</h5>
<p>Press <strong>Deposit</strong> button</p>
</details>
<p id="send_amount_to_deposit">Pay <b>₹0</b> to UPI Id below.</p> <p id="send_amount_to_deposit">Pay <b>₹0</b> to UPI Id below.</p>
<div class="copy-row"> <div class="copy-row">
<h4 id="send_cash_to_deposit" class="copy"></h4> <h4 id="send_cash_to_deposit" class="copy"></h4>
@ -151,20 +164,20 @@
</svg> </svg>
</button> </button>
</header> </header>
<svg class="icon illustration" viewBox="0 0 64 64">
<title>withdraw</title>
<path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
<line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
<path
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
<path
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
<polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
</svg>
<p> <p>
Withdraw or redeem your Rupee back to your specified UPI address. Withdraw or redeem your rupee to your specified UPI address.
</p> </p>
<details>
<summary>
How to withdraw rupee?
</summary>
<h5>Step 1</h5>
<p>Enter amount you want to withdraw</p>
<h5>Step 2</h5>
<p>Select UPI address you want to withdraw rupee to. <strong>If you haven't added UPI address, add one using 'Add UPI address' button.</strong></p>
<h5>Step 3</h5>
<p>Press <strong>Withdraw</strong> button</p>
</details>
<sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" max="100000" required> <sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
@ -194,10 +207,6 @@
</svg> </svg>
</button> </button>
</header> </header>
<svg class="icon request-icon illustration" viewBox="0 0 64 64">
<path
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
</svg>
<p> <p>
Request Rupee from other's using FLO address. Request Rupee from other's using FLO address.
</p> </p>
@ -226,10 +235,6 @@
</svg> </svg>
</button> </button>
</header> </header>
<svg class="icon illustration" viewBox="0 0 64 64">
<path d="M32,37.75A10.19,10.19,0,1,0,21.81,27.44V46.62" />
<rect height="64" width="64" rx="8"></rect>
</svg>
<details> <details>
<summary> <summary>
What is this? What is this?
@ -463,24 +468,24 @@
<div class="tt-icon">?</div> <div class="tt-icon">?</div>
<p class="tooltip-text">Your wallet balance</p> <p class="tooltip-text">Your wallet balance</p>
</div> </div>
<h4 class="token-balance">0</h4>
<h5>Rupee</h5> <h5>Rupee</h5>
<h4 class="token-balance">0</h4>
</div> </div>
<div class="balance"> <div class="balance">
<div class="tooltip help"> <div class="tooltip help">
<div class="tt-icon">?</div> <div class="tt-icon">?</div>
<p class="tooltip-text">Money that is pending after deposit.</p> <p class="tooltip-text">Money that is in-process after deposit.</p>
</div> </div>
<h4 class="uncnf-token-balance">0</h4>
<h5>In-process</h5> <h5>In-process</h5>
<h4 class="uncnf-token-balance">0</h4>
</div> </div>
<div class="balance"> <div class="balance">
<div class="tooltip help"> <div class="tooltip help">
<div class="tt-icon">?</div> <div class="tt-icon">?</div>
<p class="tooltip-text">FLO balance required for each transaction.</p> <p class="tooltip-text">FLO balance required for each transaction.</p>
</div> </div>
<h4 class="flo-balance">0</h4>
<h5>FLO</h5> <h5>FLO</h5>
<h4 class="flo-balance">0</h4>
</div> </div>
</div> </div>
</div> </div>
@ -488,7 +493,7 @@
<section id="deposit" class="page hide-completely"> <section id="deposit" class="page hide-completely">
<div class="left"> <div class="left">
<h3>Transaction Requests</h3> <h3>Transaction Requests</h3>
<sm-tab-header target="requests_to_cashier"> <sm-tab-header variant="tab" class="round" target="requests_to_cashier">
<sm-tab>Deposits</sm-tab> <sm-tab>Deposits</sm-tab>
<sm-tab>Withdrawals</sm-tab> <sm-tab>Withdrawals</sm-tab>
<sm-tab>Pay Through Cashier</sm-tab> <sm-tab>Pay Through Cashier</sm-tab>
@ -696,7 +701,7 @@
</section> </section>
<section id="request_page" class="page hide-completely"> <section id="request_page" class="page hide-completely">
<h3>Payment Requests</h3> <h3>Payment Requests</h3>
<sm-tab-header target="payment_request_tab"> <sm-tab-header variant="tab" class="round" target="payment_request_tab">
<sm-tab>Pending</sm-tab> <sm-tab>Pending</sm-tab>
<sm-tab>Approved</sm-tab> <sm-tab>Approved</sm-tab>
<sm-tab>Declined</sm-tab> <sm-tab>Declined</sm-tab>
@ -720,7 +725,7 @@
<h3>Activity</h3> <h3>Activity</h3>
<p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get <p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get
assistance from our helpline.</p> assistance from our helpline.</p>
<sm-tab-header target="user_activities"> <sm-tab-header variant="tab" class="round" target="user_activities">
<sm-tab>Sent</sm-tab> <sm-tab>Sent</sm-tab>
<sm-tab>Deposits</sm-tab> <sm-tab>Deposits</sm-tab>
<sm-tab>Withdrawals</sm-tab> <sm-tab>Withdrawals</sm-tab>
@ -756,7 +761,7 @@
</div> </div>
<h5 class="label">Select Cashier</h5> <h5 class="label">Select Cashier</h5>
<sm-strip-select name="cashier" id="select_cashier"></sm-strip-select> <sm-strip-select name="cashier" id="select_cashier"></sm-strip-select>
<sm-tab-header target="all_complaints"> <sm-tab-header variant="tab" class="round" target="all_complaints">
<sm-tab>Deposit</sm-tab> <sm-tab>Deposit</sm-tab>
<sm-tab>Withdraw</sm-tab> <sm-tab>Withdraw</sm-tab>
<sm-tab>Pay through cashier</sm-tab> <sm-tab>Pay through cashier</sm-tab>
@ -789,11 +794,13 @@
</svg> </svg>
</div> </div>
</section> </section>
<button class="primary-btn top-margin" onclick="signOut()">Sign out</button>
<h4>My UPIs</h4> <h4>My UPIs</h4>
<div class="upi-container"></div> <div class="upi-container"></div>
<div class="empty-state">Add UPI address for easier access during various transactions.</div> <div class="empty-state">Add UPI address for easier access during various transactions.</div>
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button> <sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
<h4>Sign Out</h4>
<p>Signing out will erase all the data stored in local storage and Indexed DB. This will remove saved private key, UPI addresses.</p>
<button class="primary-btn top-margin" onclick="signOut()">Sign out</button>
</section> </section>
<section id="transaction_page" class="page"> <section id="transaction_page" class="page">
@ -1501,7 +1508,7 @@
if(relative){ if(relative){
if(year == currentYear){ if(year == currentYear){
if(currentTime[1] === month && date === currentTime[2]) if(currentTime[1] === month && date === currentTime[2])
return `${finalHours} ${month} ${date}`; return `${finalHours}`;
else else
return ` ${date} ${month}`; return ` ${date} ${month}`;
@ -1692,6 +1699,10 @@
} }
}) })
document.getElementById('settings_page').addEventListener('change', e => {
setPrimaryUPI(e.target.value)
})
}) })
const transactionSuccessSection = document.getElementById('success_section'), const transactionSuccessSection = document.getElementById('success_section'),
@ -1742,7 +1753,7 @@
compactIDB.addData('userUPIs', userUPI, userUPI) compactIDB.addData('userUPIs', userUPI, userUPI)
.then( success => { .then( success => {
if(!defaultUPI) if(!defaultUPI)
setDefaultUPI(userUPI) setPrimaryUPI(userUPI)
notify('UPI address added', 'success') notify('UPI address added', 'success')
hidePopup() hidePopup()
renderUserUPI() renderUserUPI()
@ -1753,8 +1764,9 @@
}) })
} }
function setDefaultUPI(upiAddress){ function setPrimaryUPI(upiAddress){
localStorage.setItem(`defaultUPI${myFloID}`, upiAddress) localStorage.setItem(`defaultUPI${myFloID}`, upiAddress)
renderUserUPI()
defaultUPI = upiAddress defaultUPI = upiAddress
} }
const UPIContainers = document.querySelectorAll('.upi-container') const UPIContainers = document.querySelectorAll('.upi-container')
@ -1777,7 +1789,7 @@
` `
if(upi === defaultUPI) if(upi === defaultUPI)
radios += ` radios += `
<h5 class="tag">Default</h5>` <h5 class="tag">Primary</h5>`
radios += '</label>' radios += '</label>'
} }
container.innerHTML = radios container.innerHTML = radios
@ -1802,6 +1814,7 @@
document.querySelector('main').classList.add('hide-completely') document.querySelector('main').classList.add('hide-completely')
document.getElementById('navbar').classList.add('hide-completely') document.getElementById('navbar').classList.add('hide-completely')
document.getElementById('main_header').classList.add('hide-completely') document.getElementById('main_header').classList.add('hide-completely')
localStorage.removeItem(`defaultUPI${myFloID}`)
floDapps.clearCredentials() floDapps.clearCredentials()
compactIDB.deleteDB().then((message) => { compactIDB.deleteDB().then((message) => {
delete token_app.master_configurations; delete token_app.master_configurations;