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

0.5.15

Browse Source 
feat (user): add sign in with generated credentials option in sign up process

fix (user): change UX writting in various places for better understanding
This commit is contained in:
sairaj mote 2020-11-27 00:43:00 +05:30
parent 73b99b0882
commit c997335914
4 changed files with 214 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
css/main.css
View File

@ -10,7 +10,7 @@
} }
body { body {
--accent-color: #4527A0; --accent-color: #2752ca;
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 85, 85, 85; --text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
@ -25,7 +25,7 @@ body {
} }
body[data-theme=dark] { body[data-theme=dark] {
--accent-color: #8860ff; --accent-color: #4d74e0;
--text-color: 238, 238, 238; --text-color: 238, 238, 238;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26; --foreground-color: 26, 26, 26;
@ -212,12 +212,20 @@ span.ripple {
pointer-events: none; pointer-events: none;
} }
.highlight {
box-shadow: 0 0 0 0.2rem var(--accent-color);
transition: box-shadow 0.3s;
}
sm-button { sm-button {
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
} }
sm-button[variant=outlined] { sm-button[variant=outlined] {
--accent-color: rgba(var(--text-color), 1); --accent-color: rgba(var(--text-color), 1);
} }
sm-button[variant=primary]::part(button) {
color: white;
}
.loader { .loader {
fill: none; fill: none;
@ -251,24 +259,9 @@ sm-button[variant=outlined] {
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
100% { 100% {
stroke-dashoffset: -220; stroke-dashoffset: -200;
} }
} }
#focus_illu {
pointer-events: none;
height: 3rem;
width: 3rem;
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: transform 0.3s, opacity 0.3s;
fill: var(--accent-color);
}
#focus_illu path {
opacity: 0.3;
}
#on_boarding { #on_boarding {
position: absolute; position: absolute;
left: 0; left: 0;
@ -282,15 +275,6 @@ sm-button[variant=outlined] {
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
width: 100%; width: 100%;
} }
#on_boarding::after {
content: "";
position: absolute;
left: 0;
top: 1rem;
width: 1.5rem;
height: 2rem;
background: inherit;
}
#on_boarding #total_tuts { #on_boarding #total_tuts {
opacity: 0.8; opacity: 0.8;
font-size: 0.85rem; font-size: 0.85rem;
@ -334,13 +318,20 @@ sm-button[variant=outlined] {
outline: none; outline: none;
} }
.action.start-loading { .action.start-loading {
align-items: center;
pointer-events: none; pointer-events: none;
} }
.action.start-loading h4 { .action.start-loading h4 {
transform: translateX(0.6rem); transform: translateX(1ch);
background: inherit !important; background: inherit !important;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.action.start-loading .loader-container {
transform: none;
}
.action.start-loading .loader {
animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
}
.action h4 { .action h4 {
padding: 0.5rem 1.2rem; padding: 0.5rem 1.2rem;
font-size: 0.9rem; font-size: 0.9rem;
@ -353,21 +344,22 @@ sm-button[variant=outlined] {
z-index: 2; z-index: 2;
} }
.action .loader { .action .loader {
position: absolute;
z-index: 1;
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
stroke-dashoffset: 220; stroke-dashoffset: 200;
stroke-dasharray: 220; stroke-dasharray: 200;
margin: 0 !important; margin: 0 !important;
left: 0;
transition: opacity 0.3s;
} }
.action .loader:not(.animate-loader) { .action:not(.start-loading) .loader-container {
opacity: 0; opacity: 0;
transform: translateX(1rem);
} }
.action .animate-loader {
animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; .loader-container {
position: absolute;
z-index: 1;
left: 0;
transition: transform 0.3s, opacity 0.3s;
} }
.animate-loader { .animate-loader {
@ -409,6 +401,7 @@ sm-button[variant=outlined] {
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
} }
.logo h4 { .logo h4 {
font-weight: 500; font-weight: 500;
@ -719,6 +712,9 @@ details p {
padding-top: 1.5rem; padding-top: 1.5rem;
animation: slide-down 0.3s forwards; animation: slide-down 0.3s forwards;
} }
#sign_in_page .sign-in-box #sign_in_with {
margin-top: 1.5rem;
}
@keyframes slide-down { @keyframes slide-down {
from { from {
@ -732,7 +728,7 @@ details p {
padding: 0.6rem 1.2rem !important; padding: 0.6rem 1.2rem !important;
background: var(--accent-color); background: var(--accent-color);
justify-content: center; justify-content: center;
color: rgba(var(--foreground-color), 1); color: white;
} }
#main_header { #main_header {
@ -774,7 +770,7 @@ details p {
cursor: pointer; cursor: pointer;
padding: 0.3rem; padding: 0.3rem;
padding-top: 0.85rem; padding-top: 0.85rem;
border-radius: 0.4rem; border-radius: 0.5rem;
opacity: 0.6; opacity: 0.6;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
font-size: 0.85rem; font-size: 0.85rem;
@ -978,18 +974,19 @@ details p {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
border-radius: 0.4rem; border-radius: 0.5rem;
width: 5rem; width: 5rem;
text-transform: capitalize; text-transform: capitalize;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
user-select: none;
} }
.option .icon { .option .icon {
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
border-radius: 2rem; border-radius: 1rem;
padding: 0.85rem; padding: 0.85rem;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
@ -1012,7 +1009,7 @@ details p {
height: 0.6rem; height: 0.6rem;
width: 0.6rem; width: 0.6rem;
background-color: #E53935; background-color: #E53935;
border-radius: 0.4rem; border-radius: 0.5rem;
transition: transform 0.3s; transition: transform 0.3s;
} }
@ -1718,19 +1715,24 @@ sm-panel {
gap: 2rem 0.2rem; gap: 2rem 0.2rem;
} }
#add_person_btn { #add_person_btn,
.person {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 5rem; width: 5rem;
-webkit-tap-highlight-color: transparent;
border-radius: 0.5rem;
user-select: none;
}
#add_person_btn {
text-align: center; text-align: center;
transition: transform 0.3s;
font-size: 0.85rem; font-size: 0.85rem;
opacity: 0.8; opacity: 0.8;
font-weight: 500; font-weight: 500;
-webkit-tap-highlight-color: transparent;
} }
#add_person_btn .icon { #add_person_btn .icon {
height: 3rem; height: 3rem;
@ -1744,15 +1746,7 @@ sm-panel {
} }
.person { .person {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center; align-items: center;
cursor: pointer;
transition: transform 0.3s;
width: 5rem;
-webkit-tap-highlight-color: transparent;
} }
.person-initials, #person_initials { .person-initials, #person_initials {
@ -1804,7 +1798,7 @@ sm-panel {
} }
#person_popup #show_person_name { #person_popup #show_person_name {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.4rem; border-radius: 0.5rem;
max-width: 30ch; max-width: 30ch;
} }
#person_popup #show_person_name:focus { #person_popup #show_person_name:focus {
@ -1913,17 +1907,6 @@ sm-panel {
#on_boarding { #on_boarding {
width: 26rem; width: 26rem;
} }
#on_boarding.indicating::before {
content: "";
position: absolute;
transform: rotate(45deg);
top: 1rem;
left: -0.5rem;
width: 1rem;
height: 1rem;
background: inherit;
box-shadow: -0.1rem 0 1rem rgba(var(--text-color), 0.16);
}
#navbar { #navbar {
justify-content: flex-start; justify-content: flex-start;
@ -1942,6 +1925,7 @@ sm-panel {
display: flex; display: flex;
width: auto; width: auto;
padding: 0.85rem 1.2rem; padding: 0.85rem 1.2rem;
user-select: none;
} }
#navbar .navbar-item .icon { #navbar .navbar-item .icon {
height: 1.2rem; height: 1.2rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

115
css/main.scss
View File

@ -8,7 +8,7 @@
font-size: 16px; font-size: 16px;
} }
body { body {
--accent-color: #4527A0; --accent-color: #2752ca;
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 85, 85, 85; --text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
@ -22,7 +22,7 @@ body {
background-size: cover; background-size: cover;
} }
body[data-theme="dark"]{ body[data-theme="dark"]{
--accent-color: #8860ff; --accent-color: #4d74e0;
--text-color: 238, 238, 238; --text-color: 238, 238, 238;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26; --foreground-color: 26, 26, 26;
@ -207,11 +207,19 @@ span.ripple{
pointer-events: none; pointer-events: none;
} }
.highlight{
box-shadow: 0 0 0 0.2rem var(--accent-color);
transition: box-shadow 0.3s;
}
sm-button{ sm-button{
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
&[variant="outlined"]{ &[variant="outlined"]{
--accent-color: rgba(var(--text-color), 1); --accent-color: rgba(var(--text-color), 1);
} }
&[variant="primary"]::part(button){
color: white;
}
} }
.loader { .loader {
@ -249,21 +257,7 @@ sm-button{
} }
100% { 100% {
stroke-dashoffset: -220; stroke-dashoffset: -200;
}
}
#focus_illu{
pointer-events: none;
height: 3rem;
width: 3rem;
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: transform 0.3s, opacity 0.3s;
fill: var(--accent-color);
path{
opacity: 0.3;
} }
} }
#on_boarding{ #on_boarding{
@ -278,15 +272,6 @@ sm-button{
z-index: 10; z-index: 10;
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
width: 100%; width: 100%;
&::after{
content: '';
position: absolute;
left: 0;
top: 1rem;
width: 1.5rem;
height: 2rem;
background: inherit;
}
#total_tuts{ #total_tuts{
opacity: 0.8; opacity: 0.8;
font-size: 0.85rem; font-size: 0.85rem;
@ -334,12 +319,19 @@ sm-button{
outline: none; outline: none;
} }
&.start-loading{ &.start-loading{
align-items: center;
pointer-events: none; pointer-events: none;
h4{ h4{
transform: translateX(0.6rem); transform: translateX(1ch);
background: inherit !important; background: inherit !important;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.loader-container{
transform: none;
}
.loader{
animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
}
} }
h4 { h4 {
padding: 0.5rem 1.2rem; padding: 0.5rem 1.2rem;
@ -355,24 +347,26 @@ sm-button{
} }
.loader { .loader {
position: absolute;
z-index: 1;
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
stroke-dashoffset: 220; stroke-dashoffset: 200;
stroke-dasharray: 220; stroke-dasharray: 200;
margin: 0 !important; margin: 0 !important;
left: 0;
transition: opacity 0.3s;
} }
.loader:not(.animate-loader){ &:not(.start-loading) .loader-container{
opacity: 0; opacity: 0;
} transform: translateX(1rem);
.animate-loader {
animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
} }
} }
.loader-container{
position: absolute;
z-index: 1;
left: 0;
transition: transform 0.3s, opacity 0.3s;
}
.animate-loader { .animate-loader {
animation: load 2.6s infinite, rotate 1s infinite linear; animation: load 2.6s infinite, rotate 1s infinite linear;
} }
@ -416,6 +410,7 @@ sm-button{
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
h4{ h4{
font-weight: 500; font-weight: 500;
font-size: clamp(1.1rem, 2vw, 1.2rem); font-size: clamp(1.1rem, 2vw, 1.2rem);
@ -733,6 +728,9 @@ details{
padding-top: 1.5rem; padding-top: 1.5rem;
animation: slide-down 0.3s forwards; animation: slide-down 0.3s forwards;
} }
#sign_in_with{
margin-top: 1.5rem;
}
} }
} }
@keyframes slide-down{ @keyframes slide-down{
@ -748,7 +746,7 @@ details{
padding: 0.6rem 1.2rem !important; padding: 0.6rem 1.2rem !important;
background: var(--accent-color); background: var(--accent-color);
justify-content: center; justify-content: center;
color: rgba(var(--foreground-color), 1); color: white;
} }
#main_header { #main_header {
@ -789,7 +787,7 @@ details{
cursor: pointer; cursor: pointer;
padding: 0.3rem; padding: 0.3rem;
padding-top: 0.85rem; padding-top: 0.85rem;
border-radius: 0.4rem; border-radius: 0.5rem;
opacity: 0.6; opacity: 0.6;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
font-size: 0.85rem; font-size: 0.85rem;
@ -989,17 +987,18 @@ details{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
border-radius: 0.4rem; border-radius: 0.5rem;
width: 5rem; width: 5rem;
text-transform: capitalize; text-transform: capitalize;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
user-select: none;
.icon { .icon {
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
border-radius: 2rem; border-radius: 1rem;
padding: 0.85rem; padding: 0.85rem;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
@ -1024,7 +1023,7 @@ details{
height: 0.6rem; height: 0.6rem;
width: 0.6rem; width: 0.6rem;
background-color: #E53935; background-color: #E53935;
border-radius: 0.4rem; border-radius: 0.5rem;
transition: transform 0.3s; transition: transform 0.3s;
} }
@ -1754,19 +1753,23 @@ sm-panel{
padding: 1.5rem; padding: 1.5rem;
gap: 2rem 0.2rem; gap: 2rem 0.2rem;
} }
#add_person_btn{ #add_person_btn,
.person{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 5rem; width: 5rem;
-webkit-tap-highlight-color: transparent;
border-radius: 0.5rem;
user-select: none;
}
#add_person_btn{
text-align: center; text-align: center;
transition: transform 0.3s;
font-size: 0.85rem; font-size: 0.85rem;
opacity: 0.8; opacity: 0.8;
font-weight: 500; font-weight: 500;
-webkit-tap-highlight-color: transparent;
.icon{ .icon{
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
@ -1779,15 +1782,7 @@ sm-panel{
} }
} }
.person{ .person{
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center; align-items: center;
cursor: pointer;
transition: transform 0.3s;
width: 5rem;
-webkit-tap-highlight-color: transparent;
} }
.person-initials, #person_initials{ .person-initials, #person_initials{
display: flex; display: flex;
@ -1838,7 +1833,7 @@ sm-panel{
} }
#show_person_name{ #show_person_name{
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.4rem; border-radius: 0.5rem;
max-width: 30ch; max-width: 30ch;
&:focus{ &:focus{
outline: none; outline: none;
@ -1943,17 +1938,6 @@ sm-panel{
#on_boarding{ #on_boarding{
width: 26rem; width: 26rem;
&.indicating::before{
content: '';
position: absolute;
transform: rotate(45deg);
top: 1rem;
left: -0.5rem;
width: 1rem;
height: 1rem;
background: inherit;
box-shadow: -0.1rem 0 1rem rgba(var(--text-color), 0.16);
}
} }
#navbar { #navbar {
@ -1972,6 +1956,7 @@ sm-panel{
display: flex; display: flex;
width: auto; width: auto;
padding: 0.85rem 1.2rem; padding: 0.85rem 1.2rem;
user-select: none;
.icon { .icon {
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;

191
index.html
View File

@ -41,10 +41,6 @@
</div> </div>
</sm-popup> </sm-popup>
<sm-notifications id="show_message"></sm-notifications> <sm-notifications id="show_message"></sm-notifications>
<svg xmlns="http://www.w3.org/2000/svg" class="hide-on-desktop hide" id="focus_illu" viewBox="0 0 128 128">
<path d="M64,0a64,64,0,1,0,64,64A64,64,0,0,0,64,0Zm0,89A25,25,0,1,1,89,64,25,25,0,0,1,64,89Z"/>
<path d="M64,20a44,44,0,1,0,44,44A44,44,0,0,0,64,20Zm0,69A25,25,0,1,1,89,64,25,25,0,0,1,64,89Z"/>
</svg>
<div id="on_boarding" class="flex direction-column hide"> <div id="on_boarding" class="flex direction-column hide">
<svg class="icon justify-right" onclick="finishOnBoarding()" viewBox="0 0 64 64"> <svg class="icon justify-right" onclick="finishOnBoarding()" viewBox="0 0 64 64">
<title>close</title> <title>close</title>
@ -117,6 +113,7 @@
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" /> <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg> </svg>
</div> </div>
<sm-button id="sign_in_with" onclick="signIn()" variant="primary">Sign in with this private key</sm-button>
</section> </section>
</sm-panel> </sm-panel>
</sm-tab-panels> </sm-tab-panels>
@ -162,9 +159,11 @@
<h4 class="expand primary-btn"> <h4 class="expand primary-btn">
Send Send
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <svg viewBox="0 0 73 73" class="loader">
</svg> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<p> <p>
@ -202,9 +201,11 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
Deposit Deposit
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <svg viewBox="0 0 73 73" class="loader">
</svg> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<p> <p>
@ -259,13 +260,15 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
withdraw withdraw
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <svg viewBox="0 0 73 73" class="loader">
</svg> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<p> <p>
Withdraw or redeem money back to your specified UPI address. Transfer wallet balance to your bank account using specified UPI address.
</p> </p>
<details> <details>
<summary> <summary>
@ -304,10 +307,12 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
request request
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path <svg viewBox="0 0 73 73" class="loader">
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <path
</svg> d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<p> <p>
@ -345,9 +350,11 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
pay pay
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <svg viewBox="0 0 73 73" class="loader">
</svg> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<details> <details>
@ -495,9 +502,11 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
Add address Add address
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <svg viewBox="0 0 73 73" class="loader">
</svg> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<sm-input id="add_upi_input" placeholder="UPI address" pattern="^[a-zA-z0-9\-]+@[a-zA-z0-9]+" required animate> <sm-input id="add_upi_input" placeholder="UPI address" pattern="^[a-zA-z0-9\-]+@[a-zA-z0-9]+" required animate>
@ -517,9 +526,11 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
Add contact Add contact
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <svg viewBox="0 0 73 73" class="loader">
</svg> <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</header> </header>
<sm-input id="person_flo_id" placeholder="FLO address" floId animate required></sm-input> <sm-input id="person_flo_id" placeholder="FLO address" floId animate required></sm-input>
@ -594,7 +605,7 @@
</sm-popup> </sm-popup>
<header id="main_header" class="flex hide-on-desktop space-between align-center"> <header id="main_header" class="flex hide-on-desktop space-between align-center">
<div class="logo"> <div class="logo" onclick="showPage('home_page', 'home_page_btn')">
<svg class="main-logo" viewBox="0 0 27.25 32"> <svg class="main-logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title> <title>RanchiMall</title>
<path <path
@ -614,7 +625,7 @@
</div> </div>
</header> </header>
<nav id="navbar" class="hide-completely"> <nav id="navbar" class="hide-completely">
<div class="logo hide-on-mobile"> <div class="logo hide-on-mobile" onclick="showPage('home_page', 'home_page_btn')">
<svg class="main-logo" viewBox="0 0 27.25 32"> <svg class="main-logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title> <title>RanchiMall</title>
<path <path
@ -675,7 +686,7 @@
<path d="M25.4,33.4c-2.5,4.7-10.5,7.1-16.4,9.7c-2.4,1-4.4,14-1.6,14c7.7,4.4,16.4,6.6,25.2,6.4 <path d="M25.4,33.4c-2.5,4.7-10.5,7.1-16.4,9.7c-2.4,1-4.4,14-1.6,14c7.7,4.4,16.4,6.6,25.2,6.4
c8.5,0.3,16.9-2,24.2-6.4c2.8,0,0.8-12.9-1.6-14c-5.9-2.6-13.9-5-16.4-9.7" /> c8.5,0.3,16.9-2,24.2-6.4c2.8,0,0.8-12.9-1.6-14c-5.9-2.6-13.9-5-16.4-9.7" />
</svg> </svg>
<h5 class="user-type">Me</h5> <h5 class="user-type">Profile</h5>
</div> </div>
</nav> </nav>
<main class="hide-completely"> <main class="hide-completely">
@ -750,14 +761,16 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
Refresh Refresh
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path <svg viewBox="0 0 73 73" class="loader">
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <path
</svg> d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</div> </div>
<div class="display-balance grid"> <div class="display-balance grid">
<div class="balance rupee-balance-card"> <div id="wallet_balance" class="balance rupee-balance-card">
<div class="tooltip help"> <div class="tooltip help">
<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>
@ -1009,10 +1022,12 @@
<h4 class="primary-btn expand"> <h4 class="primary-btn expand">
Refresh Refresh
</h4> </h4>
<svg viewBox="0 0 73 73" class="loader"> <div class="loader-container">
<path <svg viewBox="0 0 73 73" class="loader">
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" /> <path
</svg> d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
</svg>
</div>
</button> </button>
</div> </div>
<div class="display-balance grid"> <div class="display-balance grid">
@ -1150,7 +1165,7 @@
<div class="user-option"> <div class="user-option">
<h4 class="top-margin">My UPIs</h4> <h4 class="top-margin">My UPIs</h4>
<div class="upi-container"></div> <div class="upi-container"></div>
<p class="empty-state">Add UPI address for easier access during various transactions.</p> <p class="empty-state">Add your UPI addresses for withdrawing money from wallet back to your bank account.</p>
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address <sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address
</sm-button> </sm-button>
</div> </div>
@ -1207,7 +1222,7 @@
console.log("Starting the app! Please Wait!") console.log("Starting the app! Please Wait!")
floDapps.launchStartUp().then(async result => { floDapps.launchStartUp().then(async result => {
console.log(`Welcome ${myFloID}`) console.log(`Welcome ${myFloID}`)
clearElements(['my_qr_code']) clearElements(['#my_qr_code', '#people_container', '.upi-container'])
userFloIdContainers.forEach(container => container.textContent = myFloID) userFloIdContainers.forEach(container => container.textContent = myFloID)
await token_app.actions.doShreeGanesh(); await token_app.actions.doShreeGanesh();
@ -1874,6 +1889,13 @@
} }
}) })
window.addEventListener('popstate', e => {
if(!e.state) return
if(e.state.type === 'popup'){
hidePopup()
}
})
// function required for popups or modals to appear // function required for popups or modals to appear
class Stack { class Stack {
constructor() { constructor() {
@ -1932,6 +1954,10 @@
document.addEventListener('popupopened', async e => { document.addEventListener('popupopened', async e => {
let thisPopup = e.detail.popup, let thisPopup = e.detail.popup,
firstInput = thisPopup.querySelector('sm-input') firstInput = thisPopup.querySelector('sm-input')
//pushes popup as seprate entry in history
history.pushState({type: 'popup'}, null, null)
if (firstInput) if (firstInput)
firstInput.focusIn() firstInput.focusIn()
switch (e.detail.popup.id) { switch (e.detail.popup.id) {
@ -2012,12 +2038,6 @@
}, 400) }, 400)
zIndex-- zIndex--
switch (e.detail.popup.id) { switch (e.detail.popup.id) {
case 'sign_in_popup':
loader.classList.remove('animate-loader')
document.querySelector('main').classList.remove('hide-completely')
document.querySelector('#navbar').classList.remove('hide-completely')
document.querySelector('#main_header').classList.remove('hide-completely')
break;
case 'send_rupee_popup': case 'send_rupee_popup':
payingRequested = false; payingRequested = false;
tokenReceiver.readOnly = false tokenReceiver.readOnly = false
@ -2063,13 +2083,11 @@
btn = document.getElementById(btn); btn = document.getElementById(btn);
if (option === 'start') { if (option === 'start') {
btn.classList.add('start-loading') btn.classList.add('start-loading')
btn.children[1].classList.add('animate-loader') btn.children[0].textContent = btn.children[0].textContent.trim() + 'ing'
btn.children[0].textContent = btn.children[0].textContent.trim() + 'ing'
} else { } else {
btn.classList.remove('start-loading')
if (btn.children[0].textContent.indexOf('ing')) if (btn.children[0].textContent.indexOf('ing'))
btn.children[0].textContent = btn.children[0].textContent.trim().replace('ing', '') btn.children[0].textContent = btn.children[0].textContent.trim().replace('ing', '')
btn.classList.remove('start-loading')
btn.children[1].classList.remove('animate-loader')
} }
} }
@ -2112,8 +2130,9 @@
} }
function clearElements(array = []) { function clearElements(array = []) {
console.log(array)
array.forEach(item => { array.forEach(item => {
document.getElementById(item).innerHTML = `` document.querySelectorAll(item).forEach(elem => elem.innerHTML = ``)
}) })
} }
@ -2535,26 +2554,31 @@
{ {
id: '', id: '',
title: 'Welcome', title: 'Welcome',
details: 'We are glad that you chose our service.<br>RanchiMall Pay can be used throughout our <strong>ecosystem</strong> to pay/receive money.' details: `We are glad that you chose our service.<br>RanchiMall Pay extends UPI's functionality into the blockchain.`
},
{
id: 'wallet_balance',
title: 'Wallet',
details: 'This is RanchiMall Pay wallet. You need to deposit money through UPI in-order to user app functionalities.'
}, },
{ {
id: 'send_rupee_option', id: 'send_rupee_option',
title: 'Send money', title: 'Send',
details: 'Click to send money to any FLO address. This uses wallet balance to send money.' details: 'Click to send wallet money to any FLO address.'
}, },
{ {
id: 'deposit_rupee_option', id: 'deposit_rupee_option',
title: 'Deposit money', title: 'Deposit',
details: 'Add balance to your RanchiMall pay wallet.' details: 'Add balance to your RanchiMall Pay wallet.'
}, },
{ {
id: 'withdraw_rupee_option', id: 'withdraw_rupee_option',
title: 'Withdraw money', title: 'Withdraw',
details: `Transfer money from wallet, back to your specified UPI address.` details: `Transfer wallet balance to your bank account using specified UPI address.`
}, },
{ {
id: 'request_rupee_option', id: 'request_rupee_option',
title: 'Request money', title: 'Request',
details: `Request money from others using their FLO address. Requested money will be stored in wallet balance.` details: `Request money from others using their FLO address. Requested money will be stored in wallet balance.`
}, },
{ {
@ -2569,18 +2593,18 @@
}, },
{ {
id: 'request_page_btn', id: 'request_page_btn',
title: `Request page`, title: `Requests`,
details: 'This will show all the payment requests you received from other users and shop keepers.' details: 'This will show all the payment requests you received from other users and shop keepers.'
}, },
{ {
id: 'activity_page_btn', id: 'activity_page_btn',
title: 'Activity page', title: 'Activity',
details: 'This page displays all the transactions such as sent, received money etc.' details: 'This page displays all the transactions such as sent, received money etc.'
}, },
{ {
id: 'profile_page_btn', id: 'profile_page_btn',
title: 'Profile page', title: 'Profile',
details: 'This page contains all the personal data as well as app settings.' details: 'This page contains your FLO ID as well as app settings.'
} }
] ]
@ -2589,11 +2613,11 @@
featureDetails = document.getElementById('feature_details'), featureDetails = document.getElementById('feature_details'),
nextTutButton = document.getElementById('next_tut_button'), nextTutButton = document.getElementById('next_tut_button'),
prevTutButton = document.getElementById('prev_tut_button'), prevTutButton = document.getElementById('prev_tut_button'),
totalTuts = document.getElementById('total_tuts'), totalTuts = document.getElementById('total_tuts')
focusIllu = document.getElementById('focus_illu')
let currentFeatureIndex = 0; let currentFeatureIndex = 0,
lastTargetOption;
function startOnBoarding() { function startOnBoarding() {
onBoardingPanel.classList.remove('hide') onBoardingPanel.classList.remove('hide')
@ -2602,8 +2626,7 @@
} }
function finishOnBoarding() { function finishOnBoarding() {
onBoardingPanel.classList.add('hide') onBoardingPanel.classList.add('hide')
focusIllu.classList.add('hide') lastTargetOption.classList.remove('highlight')
currentFeatureIndex = 0 currentFeatureIndex = 0
} }
function nextTutorial() { function nextTutorial() {
@ -2619,14 +2642,12 @@
index = (nextTutButton.textContent === 'Got it' && index > 0) ? 0 : Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1) index = (nextTutButton.textContent === 'Got it' && index > 0) ? 0 : Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1)
if (index === 0){ if (index === 0){
prevTutButton.classList.add('hide') prevTutButton.classList.add('hide')
focusIllu.classList.add('hide')
onBoardingPanel.classList.remove('indicating') onBoardingPanel.classList.remove('indicating')
onBoardingPanel.setAttribute('style', `transform: translate(calc(50vw - ${onBoardingPanel.getBoundingClientRect().width/2}px), calc(50vh - ${onBoardingPanel.getBoundingClientRect().height/2}px))`) onBoardingPanel.setAttribute('style', `transform: translate(calc(50vw - ${onBoardingPanel.getBoundingClientRect().width/2}px), calc(50vh - ${onBoardingPanel.getBoundingClientRect().height/2}px))`)
} }
else{ else{
onBoardingPanel.classList.add('indicating') onBoardingPanel.classList.add('indicating')
prevTutButton.classList.remove('hide') prevTutButton.classList.remove('hide')
focusIllu.classList.remove('hide')
} }
if (index === onBoarding.length - 1) { if (index === onBoarding.length - 1) {
nextTutButton.textContent = `Got it` nextTutButton.textContent = `Got it`
@ -2667,6 +2688,8 @@
featureDetails.animate(flyOut, options) featureDetails.animate(flyOut, options)
} }
titleAnime.onfinish = () => { titleAnime.onfinish = () => {
if(lastTargetOption)
lastTargetOption.classList.remove('highlight')
featureTitle.textContent = onBoarding[index].title featureTitle.textContent = onBoarding[index].title
featureDetails.innerHTML = onBoarding[index].details featureDetails.innerHTML = onBoarding[index].details
totalTuts.textContent = `${index + 1}/${onBoarding.length}` totalTuts.textContent = `${index + 1}/${onBoarding.length}`
@ -2674,7 +2697,10 @@
const targetOption = document.getElementById(onBoarding[index].id) const targetOption = document.getElementById(onBoarding[index].id)
let targetPosition = targetOption.getBoundingClientRect() let targetPosition = targetOption.getBoundingClientRect()
if(window.innerWidth > 640){ if(window.innerWidth > 640){
onBoardingPanel.setAttribute('style', `transform: translate(${targetPosition.left + targetPosition.width}px, ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) if(targetPosition.left + targetPosition.width + onBoardingPanel.getBoundingClientRect().width < window.innerWidth)
onBoardingPanel.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width}px + 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`)
else
onBoardingPanel.setAttribute('style', `transform: translate(calc(${targetPosition.left - onBoardingPanel.getBoundingClientRect().width}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`)
} }
else{ else{
if(targetPosition.bottom + onBoardingPanel.getBoundingClientRect().height < window.innerHeight) if(targetPosition.bottom + onBoardingPanel.getBoundingClientRect().height < window.innerHeight)
@ -2685,8 +2711,10 @@
if(targetPosition.top + targetPosition.height > window.innerHeight){ if(targetPosition.top + targetPosition.height > window.innerHeight){
targetOption.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'start'}) targetOption.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'start'})
} }
focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) //focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`)
} }
targetOption.classList.add('highlight')
lastTargetOption = targetOption
} }
if (currentFeatureIndex > index) { if (currentFeatureIndex > index) {
featureTitle.animate(flyOut, options).reverse() featureTitle.animate(flyOut, options).reverse()
@ -3020,7 +3048,10 @@
const credentialsSection = document.getElementById('credentials_section'), const credentialsSection = document.getElementById('credentials_section'),
generateFloId = document.getElementById('generate_flo_id'), generateFloId = document.getElementById('generate_flo_id'),
generatedId = document.getElementById('generated_id'), generatedId = document.getElementById('generated_id'),
generatedKey = document.getElementById('generated_key') generatedKey = document.getElementById('generated_key'),
signInBtn = document.getElementById('sign_in_btn'),
signInWithBtn = document.getElementById('sign_in_with'),
privateKeyInput = document.getElementById('get_priv_key_field')
function generateId() { function generateId() {
generateFloId.classList.add('hide-completely') generateFloId.classList.add('hide-completely')
@ -3028,19 +3059,23 @@
let { floID, privKey } = floCrypto.generateNewID() let { floID, privKey } = floCrypto.generateNewID()
generatedId.textContent = floID generatedId.textContent = floID
generatedKey.textContent = privKey generatedKey.textContent = privKey
privateKeyInput.value = privKey
} }
const signIn = () => { const signIn = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
hideLoader() hideLoader()
showSignIn() showSignIn()
let signInBtn = document.getElementById('sign_in_btn'),
privateKeyInput = document.getElementById('get_priv_key_field')
signInBtn.onclick = () => { signInBtn.onclick = () => {
resolve(privateKeyInput.value) resolve(privateKeyInput.value)
hideSignIn() hideSignIn()
showLoader() showLoader()
} }
signInWithBtn.onclick = () => {
resolve(privateKeyInput.value)
hideSignIn()
showLoader()
}
}) })
} }
@ -3055,6 +3090,8 @@
} }
async function signOutSequence() { async function signOutSequence() {
generateFloId.classList.remove('hide-completely')
credentialsSection.classList.add('hide-completely')
delete token_app.master_configurations; delete token_app.master_configurations;
await floDapps.clearCredentials() await floDapps.clearCredentials()
document.querySelector('main').classList.add('hide-completely') document.querySelector('main').classList.add('hide-completely')
@ -12773,7 +12810,7 @@
option.classList.remove('hide-completely') option.classList.remove('hide-completely')
}) })
refreshBalance() refreshBalance()
userType.forEach(user => user.textContent = 'Me') userType.forEach(user => user.textContent = 'Profile')
defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`) defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
if (mobileCheck()) if (mobileCheck())
document.getElementById('scanner_icon').classList.remove('hide-completely') document.getElementById('scanner_icon').classList.remove('hide-completely')