Implemented payments page from scratch
This commit is contained in:
sairaj mote
parent
b1e34e8895
commit
29f7decd21
795
css/main.css
795
css/main.css
@ -3,203 +3,203 @@
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: rgba(var(--background-color), 1);
|
||||
}
|
||||
body,
|
||||
body * {
|
||||
--accent-color: #0D7377;
|
||||
--text-color: 17, 17, 17;
|
||||
--background-color: 255, 255, 255;
|
||||
--danger-color: red;
|
||||
}
|
||||
|
||||
body[data-theme=dark],
|
||||
body[data-theme=dark] * {
|
||||
--accent-color: #32E0C4;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--background-color: 10, 10, 10;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 5em;
|
||||
height: 0em;
|
||||
--accent-color: #3d5afe;
|
||||
--secondary-color: #ffac2e;
|
||||
--text-color: 34, 34, 34;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
li > div > div:nth-of-type(1) {
|
||||
text-align: right;
|
||||
font-size: 35px;
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #92a2ff;
|
||||
--secondary-color: #d60739;
|
||||
--text-color: 200, 200, 200;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8;
|
||||
max-width: 65ch;
|
||||
p,
|
||||
strong {
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
p:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
a:where([class]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus-visible {
|
||||
a:where([class]):focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:-webkit-any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:-moz-any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
sm-button {
|
||||
--border-radius: 0.3rem;
|
||||
button,
|
||||
.button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
button:focus-visible,
|
||||
.button:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
button:not(:disabled),
|
||||
.button:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.button--primary {
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.button--primary .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
.button--colored {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.button--colored .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.button--danger {
|
||||
background-color: rgba(255, 115, 115, 0.062745098);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.button--danger .icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
.button--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.button--outlined {
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.button--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
filter: saturate(0);
|
||||
}
|
||||
|
||||
.cta {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-only {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
a:-webkit-any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:-moz-any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
sm-input {
|
||||
--border-radius: 0.5rem;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
sm-input button .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
sm-spinner {
|
||||
--size: 1.5rem;
|
||||
--stroke-width: 0.1rem;
|
||||
}
|
||||
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #64b5f6;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.last-tx {
|
||||
padding: 1em 0em;
|
||||
}
|
||||
|
||||
.last-tx > div:nth-of-type(1) {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.last-tx-content {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
|
||||
.last-tx-content > div:nth-of-type(1) {
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0em;
|
||||
border-radius: 1rem;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.last-tx-content > div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
opacity: 0;
|
||||
transition: visiblity 0s, opacity 0.1s ease-in;
|
||||
}
|
||||
|
||||
.search-wrapper:not(.open) {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.search-wrapper.open {
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0em auto;
|
||||
width: 50%;
|
||||
margin-top: 4rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 7px 3px rgb(0 0 0 / 20%);
|
||||
background: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
transform: none !important;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
@ -209,39 +209,16 @@ ul {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.breakable {
|
||||
.wrap-around {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
@ -252,22 +229,43 @@ ul {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gap-0-3 {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.gap-0-5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@ -292,23 +290,39 @@ ul {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
.text-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.justify-content-start {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -320,6 +334,10 @@ ul {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
@ -332,7 +350,7 @@ ul {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
.flex-direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -340,6 +358,114 @@ ul {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.space-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.padding-block-1 {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-right-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.margin-right-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.margin-top-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-bottom-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.margin-block-0-5 {
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1-5 {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-inline-1 {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
.margin-inline-1-5 {
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
@ -356,11 +482,23 @@ ul {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ws-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 3vw);
|
||||
}
|
||||
|
||||
.ripple {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.16);
|
||||
background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -379,12 +517,6 @@ ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
@ -396,153 +528,154 @@ ul {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#loading {
|
||||
text-align: center;
|
||||
amimation: load 1s infinite;
|
||||
}
|
||||
|
||||
#searchToggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@keyframes load {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
50% {
|
||||
color: white;
|
||||
}
|
||||
100% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
#confirmation_popup,
|
||||
#prompt_popup {
|
||||
#loader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#confirmation_popup h4,
|
||||
#prompt_popup h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#confirmation_popup sm-button,
|
||||
#prompt_popup sm-button {
|
||||
margin: 0;
|
||||
}
|
||||
#confirmation_popup .flex,
|
||||
#prompt_popup .flex {
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#confirmation_popup .flex sm-button:first-of-type,
|
||||
#prompt_popup .flex sm-button:first-of-type {
|
||||
margin-right: 0.6rem;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: rgba(var(--background-color), 1);
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.16);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
#logo h5 {
|
||||
font-size: 0.8rem;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
#logo #main_logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
sm-tab-header {
|
||||
padding: 0 1.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
sm-tab {
|
||||
padding: 0.5rem 0.8rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 3rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section__header {
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
#main_logo {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
#search_payments {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
width: min(24rem, 100% - 2rem);
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
--border-radius: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
--padding: 1rem 1.2rem;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
#intern_payment_list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
|
||||
padding: 1rem;
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.intern-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*width: 100%;*/
|
||||
/*min-width: 20rem;*/
|
||||
gap: 0.8rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: max(1rem, 3vw);
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0.5em;
|
||||
margin-bottom: 0.4em;
|
||||
flex: 1 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.intern-card h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.intern-card .button {
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
.card > a > div:nth-of-type(3) {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(var(--background-color));
|
||||
#intern {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem;
|
||||
width: min(56rem, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card > a > h3 {
|
||||
font-weight: 500;
|
||||
#intern__details {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: max(1rem, 3vw);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
.back-button {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
border-radius: 2rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
.back-button .icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-right: 0.1em;
|
||||
margin-left: -0.2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#payment_history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.payment-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.payment-card time {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.payment-card .amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#intern__details {
|
||||
margin: 0 -1rem;
|
||||
margin-top: -5rem;
|
||||
padding-top: 5rem;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.search {
|
||||
width: 80%;
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
.interact {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.interact:hover {
|
||||
background-color: rgba(var(--text-color), 0.04);
|
||||
}
|
||||
}
|
||||
1
css/main.min.css
vendored
Normal file
1
css/main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
637
css/main.scss
Normal file
637
css/main.scss
Normal file
@ -0,0 +1,637 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #3d5afe;
|
||||
--secondary-color: #ffac2e;
|
||||
--text-color: 34, 34, 34;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #92a2ff;
|
||||
--secondary-color: #d60739;
|
||||
--text-color: 200, 200, 200;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
}
|
||||
p,
|
||||
strong {
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
a:where([class]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
&:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
&--primary {
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
|
||||
.icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
&--colored {
|
||||
color: var(--accent-color);
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
&--danger {
|
||||
background-color: #ff737310;
|
||||
color: var(--danger-color);
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
filter: saturate(0);
|
||||
}
|
||||
|
||||
.cta {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-only {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
sm-input {
|
||||
--border-radius: 0.5rem;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
|
||||
button {
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
sm-spinner {
|
||||
--size: 1.5rem;
|
||||
--stroke-width: 0.1rem;
|
||||
}
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wrap-around {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gap-0-3 {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.gap-0-5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-1-5 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.align-content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-items: start;
|
||||
}
|
||||
.justify-content-start {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.flex-direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.space-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.padding-block-1 {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.margin-right-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.margin-right-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
.margin-top-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.margin-bottom-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.margin-block-0-5 {
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1-5 {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-inline-1 {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
.margin-inline-1-5 {
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-0-8 {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.weight-400 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.weight-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
.ws-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 3vw);
|
||||
}
|
||||
|
||||
.ripple {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(var(--text-color), 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) ~ .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
|
||||
&--left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&--right {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
#loader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
}
|
||||
#main_header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
#main_logo {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
#search_payments {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
width: min(24rem, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
--border-radius: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
--padding: 1rem 1.2rem;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0 0 0 /0.1);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
#intern_payment_list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
|
||||
padding: 1rem;
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.intern-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: max(1rem, 3vw);
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.button {
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
#intern {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem;
|
||||
width: min(56rem, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
#intern__details {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: max(1rem, 3vw);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.back-button {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
border-radius: 2rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
.icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-right: 0.1em;
|
||||
margin-left: -0.2rem;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
#payment_history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.payment-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
time {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#intern__details {
|
||||
margin: 0 -1rem;
|
||||
margin-top: -5rem;
|
||||
padding-top: 5rem;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1rem 1rem rgba(0 0 0 /0.06);
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
.interact {
|
||||
transition: background-color 0.2s;
|
||||
&:hover {
|
||||
background-color: rgba(var(--text-color), 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
12141
index.html
12141
index.html
File diff suppressed because it is too large
Load Diff
259
js/compactIDB.js
Normal file
259
js/compactIDB.js
Normal file
@ -0,0 +1,259 @@
|
||||
(function(EXPORTS) { //compactIDB v2.1.0
|
||||
/* Compact IndexedDB operations */
|
||||
'use strict';
|
||||
const compactIDB = EXPORTS;
|
||||
|
||||
var defaultDB;
|
||||
|
||||
const indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
|
||||
const IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
|
||||
const IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
|
||||
|
||||
if (!indexedDB) {
|
||||
console.error("Your browser doesn't support a stable version of IndexedDB.");
|
||||
return;
|
||||
}
|
||||
|
||||
compactIDB.setDefaultDB = dbName => defaultDB = dbName;
|
||||
|
||||
Object.defineProperty(compactIDB, 'default', {
|
||||
get: () => defaultDB,
|
||||
set: dbName => defaultDB = dbName
|
||||
});
|
||||
|
||||
function getDBversion(dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
resolve(db.version)
|
||||
db.close()
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
function upgradeDB(dbName, createList = null, deleteList = null) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getDBversion(dbName).then(version => {
|
||||
var idb = indexedDB.open(dbName, version + 1);
|
||||
idb.onerror = (event) => reject("Error in opening IndexedDB");
|
||||
idb.onupgradeneeded = (event) => {
|
||||
let db = event.target.result;
|
||||
if (createList instanceof Object) {
|
||||
if (Array.isArray(createList)) {
|
||||
let tmp = {}
|
||||
createList.forEach(o => tmp[o] = {})
|
||||
createList = tmp
|
||||
}
|
||||
for (let o in createList) {
|
||||
let obs = db.createObjectStore(o, createList[o].options || {});
|
||||
if (createList[o].indexes instanceof Object)
|
||||
for (let i in createList[o].indexes)
|
||||
obs.createIndex(i, i, createList[o].indexes || {});
|
||||
}
|
||||
}
|
||||
if (Array.isArray(deleteList))
|
||||
deleteList.forEach(o => db.deleteObjectStore(o));
|
||||
resolve('Database upgraded')
|
||||
}
|
||||
idb.onsuccess = (event) => event.target.result.close();
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
compactIDB.initDB = function(dbName, objectStores = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!(objectStores instanceof Object))
|
||||
return reject('ObjectStores must be an object or array')
|
||||
defaultDB = defaultDB || dbName;
|
||||
var idb = indexedDB.open(dbName);
|
||||
idb.onerror = (event) => reject("Error in opening IndexedDB");
|
||||
idb.onsuccess = (event) => {
|
||||
var db = event.target.result;
|
||||
let cList = Object.values(db.objectStoreNames);
|
||||
var obs = {},
|
||||
a_obs = {},
|
||||
d_obs = [];
|
||||
if (!Array.isArray(objectStores))
|
||||
var obs = objectStores
|
||||
else
|
||||
objectStores.forEach(o => obs[o] = {})
|
||||
let nList = Object.keys(obs)
|
||||
for (let o of nList)
|
||||
if (!cList.includes(o))
|
||||
a_obs[o] = obs[o]
|
||||
for (let o of cList)
|
||||
if (!nList.includes(o))
|
||||
d_obs.push(o)
|
||||
if (!Object.keys(a_obs).length && !d_obs.length)
|
||||
resolve("Initiated IndexedDB");
|
||||
else
|
||||
upgradeDB(dbName, a_obs, d_obs)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error))
|
||||
db.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const openDB = compactIDB.openDB = function(dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var idb = indexedDB.open(dbName);
|
||||
idb.onerror = (event) => reject("Error in opening IndexedDB");
|
||||
idb.onupgradeneeded = (event) => {
|
||||
event.target.result.close();
|
||||
deleteDB(dbName).then(_ => null).catch(_ => null).finally(_ => reject("Datebase not found"))
|
||||
}
|
||||
idb.onsuccess = (event) => resolve(event.target.result);
|
||||
});
|
||||
}
|
||||
|
||||
const deleteDB = compactIDB.deleteDB = function(dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var deleteReq = indexedDB.deleteDatabase(dbName);;
|
||||
deleteReq.onerror = (event) => reject("Error deleting database!");
|
||||
deleteReq.onsuccess = (event) => resolve("Database deleted successfully");
|
||||
});
|
||||
}
|
||||
|
||||
compactIDB.writeData = function(obsName, data, key = false, dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readwrite").objectStore(obsName);
|
||||
let writeReq = (key ? obs.put(data, key) : obs.put(data));
|
||||
writeReq.onsuccess = (evt) => resolve(`Write data Successful`);
|
||||
writeReq.onerror = (evt) => reject(
|
||||
`Write data unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`
|
||||
);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
compactIDB.addData = function(obsName, data, key = false, dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readwrite").objectStore(obsName);
|
||||
let addReq = (key ? obs.add(data, key) : obs.add(data));
|
||||
addReq.onsuccess = (evt) => resolve(`Add data successful`);
|
||||
addReq.onerror = (evt) => reject(
|
||||
`Add data unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`
|
||||
);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
compactIDB.removeData = function(obsName, key, dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readwrite").objectStore(obsName);
|
||||
let delReq = obs.delete(key);
|
||||
delReq.onsuccess = (evt) => resolve(`Removed Data ${key}`);
|
||||
delReq.onerror = (evt) => reject(
|
||||
`Remove data unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`
|
||||
);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
compactIDB.clearData = function(obsName, dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readwrite").objectStore(obsName);
|
||||
let clearReq = obs.clear();
|
||||
clearReq.onsuccess = (evt) => resolve(`Clear data Successful`);
|
||||
clearReq.onerror = (evt) => reject(`Clear data Unsuccessful`);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
compactIDB.readData = function(obsName, key, dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readonly").objectStore(obsName);
|
||||
let getReq = obs.get(key);
|
||||
getReq.onsuccess = (evt) => resolve(evt.target.result);
|
||||
getReq.onerror = (evt) => reject(
|
||||
`Read data unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`
|
||||
);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
compactIDB.readAllData = function(obsName, dbName = defaultDB) {
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readonly").objectStore(obsName);
|
||||
var tmpResult = {}
|
||||
let curReq = obs.openCursor();
|
||||
curReq.onsuccess = (evt) => {
|
||||
var cursor = evt.target.result;
|
||||
if (cursor) {
|
||||
tmpResult[cursor.primaryKey] = cursor.value;
|
||||
cursor.continue();
|
||||
} else
|
||||
resolve(tmpResult);
|
||||
}
|
||||
curReq.onerror = (evt) => reject(
|
||||
`Read-All data unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`
|
||||
);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
/* compactIDB.searchData = function (obsName, options = {}, dbName = defaultDB) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readonly").objectStore(obsName);
|
||||
var filteredResult = {}
|
||||
let keyRange;
|
||||
if(options.lowerKey!==null && options.upperKey!==null)
|
||||
keyRange = IDBKeyRange.bound(options.lowerKey, options.upperKey);
|
||||
else if(options.lowerKey!==null)
|
||||
keyRange = IDBKeyRange.lowerBound(options.lowerKey);
|
||||
else if (options.upperKey!==null)
|
||||
keyRange = IDBKeyRange.upperBound(options.upperBound);
|
||||
else if (options.atKey)
|
||||
let curReq = obs.openCursor(keyRange, )
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}*/
|
||||
|
||||
compactIDB.searchData = function(obsName, options = {}, dbName = defaultDB) {
|
||||
options.lowerKey = options.atKey || options.lowerKey || 0
|
||||
options.upperKey = options.atKey || options.upperKey || false
|
||||
options.patternEval = options.patternEval || ((k, v) => {
|
||||
return true
|
||||
})
|
||||
options.limit = options.limit || false;
|
||||
options.lastOnly = options.lastOnly || false
|
||||
return new Promise((resolve, reject) => {
|
||||
openDB(dbName).then(db => {
|
||||
var obs = db.transaction(obsName, "readonly").objectStore(obsName);
|
||||
var filteredResult = {}
|
||||
let curReq = obs.openCursor(
|
||||
options.upperKey ? IDBKeyRange.bound(options.lowerKey, options.upperKey) : IDBKeyRange.lowerBound(options.lowerKey),
|
||||
options.lastOnly ? "prev" : "next");
|
||||
curReq.onsuccess = (evt) => {
|
||||
var cursor = evt.target.result;
|
||||
if (cursor) {
|
||||
if (options.patternEval(cursor.primaryKey, cursor.value)) {
|
||||
filteredResult[cursor.primaryKey] = cursor.value;
|
||||
options.lastOnly ? resolve(filteredResult) : cursor.continue();
|
||||
} else
|
||||
cursor.continue();
|
||||
} else
|
||||
resolve(filteredResult);
|
||||
}
|
||||
curReq.onerror = (evt) => reject(`Search unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`);
|
||||
db.close();
|
||||
}).catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})(window.compactIDB = {});
|
||||
14
js/components.min.js
vendored
14
js/components.min.js
vendored
File diff suppressed because one or more lines are too long
580
js/floBlockchainAPI.js
Normal file
580
js/floBlockchainAPI.js
Normal file
@ -0,0 +1,580 @@
|
||||
(function (EXPORTS) { //floBlockchainAPI v2.3.3d
|
||||
/* FLO Blockchain Operator to send/receive data from blockchain using API calls*/
|
||||
'use strict';
|
||||
const floBlockchainAPI = EXPORTS;
|
||||
|
||||
const DEFAULT = {
|
||||
blockchain: floGlobals.blockchain,
|
||||
apiURL: {
|
||||
FLO: ['https://flosight.duckdns.org/'],
|
||||
FLO_TEST: ['https://testnet-flosight.duckdns.org', 'https://testnet.flocha.in/']
|
||||
},
|
||||
sendAmt: 0.001,
|
||||
fee: 0.0005,
|
||||
minChangeAmt: 0.0005,
|
||||
receiverID: floGlobals.adminID
|
||||
};
|
||||
|
||||
Object.defineProperties(floBlockchainAPI, {
|
||||
sendAmt: {
|
||||
get: () => DEFAULT.sendAmt,
|
||||
set: amt => !isNaN(amt) ? DEFAULT.sendAmt = amt : null
|
||||
},
|
||||
fee: {
|
||||
get: () => DEFAULT.fee,
|
||||
set: fee => !isNaN(fee) ? DEFAULT.fee = fee : null
|
||||
},
|
||||
defaultReceiver: {
|
||||
get: () => DEFAULT.receiverID,
|
||||
set: floID => DEFAULT.receiverID = floID
|
||||
},
|
||||
blockchain: {
|
||||
get: () => DEFAULT.blockchain
|
||||
}
|
||||
});
|
||||
|
||||
if (floGlobals.sendAmt) floBlockchainAPI.sendAmt = floGlobals.sendAmt;
|
||||
if (floGlobals.fee) floBlockchainAPI.fee = floGlobals.fee;
|
||||
|
||||
Object.defineProperties(floGlobals, {
|
||||
sendAmt: {
|
||||
get: () => DEFAULT.sendAmt,
|
||||
set: amt => !isNaN(amt) ? DEFAULT.sendAmt = amt : null
|
||||
},
|
||||
fee: {
|
||||
get: () => DEFAULT.fee,
|
||||
set: fee => !isNaN(fee) ? DEFAULT.fee = fee : null
|
||||
}
|
||||
});
|
||||
|
||||
const allServerList = new Set(floGlobals.apiURL && floGlobals.apiURL[DEFAULT.blockchain] ? floGlobals.apiURL[DEFAULT.blockchain] : DEFAULT.apiURL[DEFAULT.blockchain]);
|
||||
|
||||
var serverList = Array.from(allServerList);
|
||||
var curPos = floCrypto.randInt(0, serverList.length - 1);
|
||||
|
||||
function fetch_retry(apicall, rm_flosight) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let i = serverList.indexOf(rm_flosight)
|
||||
if (i != -1) serverList.splice(i, 1);
|
||||
curPos = floCrypto.randInt(0, serverList.length - 1);
|
||||
fetch_api(apicall, false)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error));
|
||||
})
|
||||
}
|
||||
|
||||
function fetch_api(apicall, ic = true) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (serverList.length === 0) {
|
||||
if (ic) {
|
||||
serverList = Array.from(allServerList);
|
||||
curPos = floCrypto.randInt(0, serverList.length - 1);
|
||||
fetch_api(apicall, false)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error));
|
||||
} else
|
||||
reject("No floSight server working");
|
||||
} else {
|
||||
let flosight = serverList[curPos];
|
||||
fetch(flosight + apicall).then(response => {
|
||||
if (response.ok)
|
||||
response.json().then(data => resolve(data));
|
||||
else {
|
||||
fetch_retry(apicall, flosight)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error));
|
||||
}
|
||||
}).catch(error => {
|
||||
fetch_retry(apicall, flosight)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error));
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Object.defineProperties(floBlockchainAPI, {
|
||||
serverList: {
|
||||
get: () => Array.from(serverList)
|
||||
},
|
||||
current_server: {
|
||||
get: () => serverList[curPos]
|
||||
}
|
||||
});
|
||||
|
||||
//Promised function to get data from API
|
||||
const promisedAPI = floBlockchainAPI.promisedAPI = floBlockchainAPI.fetch = function (apicall) {
|
||||
return new Promise((resolve, reject) => {
|
||||
//console.log(apicall);
|
||||
fetch_api(apicall)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
//Get balance for the given Address
|
||||
const getBalance = floBlockchainAPI.getBalance = function (addr) {
|
||||
return new Promise((resolve, reject) => {
|
||||
promisedAPI(`api/addr/${addr}/balance`)
|
||||
.then(balance => resolve(parseFloat(balance)))
|
||||
.catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
//Send Tx to blockchain
|
||||
const sendTx = floBlockchainAPI.sendTx = function (senderAddr, receiverAddr, sendAmt, privKey, floData = '', strict_utxo = true) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!floCrypto.validateASCII(floData))
|
||||
return reject("Invalid FLO_Data: only printable ASCII characters are allowed");
|
||||
else if (!floCrypto.validateFloID(senderAddr))
|
||||
return reject(`Invalid address : ${senderAddr}`);
|
||||
else if (!floCrypto.validateFloID(receiverAddr))
|
||||
return reject(`Invalid address : ${receiverAddr}`);
|
||||
else if (privKey.length < 1 || !floCrypto.verifyPrivKey(privKey, senderAddr))
|
||||
return reject("Invalid Private key!");
|
||||
else if (typeof sendAmt !== 'number' || sendAmt <= 0)
|
||||
return reject(`Invalid sendAmt : ${sendAmt}`);
|
||||
|
||||
getBalance(senderAddr).then(balance => {
|
||||
var fee = DEFAULT.fee;
|
||||
if (balance < sendAmt + fee)
|
||||
return reject("Insufficient FLO balance!");
|
||||
//get unconfirmed tx list
|
||||
promisedAPI(`api/addr/${senderAddr}`).then(result => {
|
||||
readTxs(senderAddr, 0, result.unconfirmedTxApperances).then(result => {
|
||||
let unconfirmedSpent = {};
|
||||
for (let tx of result.items)
|
||||
if (tx.confirmations == 0)
|
||||
for (let vin of tx.vin)
|
||||
if (vin.addr === senderAddr) {
|
||||
if (Array.isArray(unconfirmedSpent[vin.txid]))
|
||||
unconfirmedSpent[vin.txid].push(vin.vout);
|
||||
else
|
||||
unconfirmedSpent[vin.txid] = [vin.vout];
|
||||
}
|
||||
//get utxos list
|
||||
promisedAPI(`api/addr/${senderAddr}/utxo`).then(utxos => {
|
||||
//form/construct the transaction data
|
||||
var trx = bitjs.transaction();
|
||||
var utxoAmt = 0.0;
|
||||
for (var i = utxos.length - 1;
|
||||
(i >= 0) && (utxoAmt < sendAmt + fee); i--) {
|
||||
//use only utxos with confirmations (strict_utxo mode)
|
||||
if (utxos[i].confirmations || !strict_utxo) {
|
||||
if (utxos[i].txid in unconfirmedSpent && unconfirmedSpent[utxos[i].txid].includes(utxos[i].vout))
|
||||
continue; //A transaction has already used the utxo, but is unconfirmed.
|
||||
trx.addinput(utxos[i].txid, utxos[i].vout, utxos[i].scriptPubKey);
|
||||
utxoAmt += utxos[i].amount;
|
||||
};
|
||||
}
|
||||
if (utxoAmt < sendAmt + fee)
|
||||
reject("Insufficient FLO: Some UTXOs are unconfirmed");
|
||||
else {
|
||||
trx.addoutput(receiverAddr, sendAmt);
|
||||
var change = utxoAmt - sendAmt - fee;
|
||||
if (change > DEFAULT.minChangeAmt)
|
||||
trx.addoutput(senderAddr, change);
|
||||
trx.addflodata(floData.replace(/\n/g, ' '));
|
||||
var signedTxHash = trx.sign(privKey, 1);
|
||||
broadcastTx(signedTxHash)
|
||||
.then(txid => resolve(txid))
|
||||
.catch(error => reject(error))
|
||||
}
|
||||
}).catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
});
|
||||
}
|
||||
|
||||
//Write Data into blockchain
|
||||
floBlockchainAPI.writeData = function (senderAddr, data, privKey, receiverAddr = DEFAULT.receiverID, options = {}) {
|
||||
let strict_utxo = options.strict_utxo === false ? false : true,
|
||||
sendAmt = isNaN(options.sendAmt) ? DEFAULT.sendAmt : options.sendAmt;
|
||||
return new Promise((resolve, reject) => {
|
||||
if (typeof data != "string")
|
||||
data = JSON.stringify(data);
|
||||
sendTx(senderAddr, receiverAddr, sendAmt, privKey, data, strict_utxo)
|
||||
.then(txid => resolve(txid))
|
||||
.catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
//merge all UTXOs of a given floID into a single UTXO
|
||||
floBlockchainAPI.mergeUTXOs = function (floID, privKey, floData = '') {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!floCrypto.validateFloID(floID))
|
||||
return reject(`Invalid floID`);
|
||||
if (!floCrypto.verifyPrivKey(privKey, floID))
|
||||
return reject("Invalid Private Key");
|
||||
if (!floCrypto.validateASCII(floData))
|
||||
return reject("Invalid FLO_Data: only printable ASCII characters are allowed");
|
||||
var trx = bitjs.transaction();
|
||||
var utxoAmt = 0.0;
|
||||
var fee = DEFAULT.fee;
|
||||
promisedAPI(`api/addr/${floID}/utxo`).then(utxos => {
|
||||
for (var i = utxos.length - 1; i >= 0; i--)
|
||||
if (utxos[i].confirmations) {
|
||||
trx.addinput(utxos[i].txid, utxos[i].vout, utxos[i].scriptPubKey);
|
||||
utxoAmt += utxos[i].amount;
|
||||
}
|
||||
trx.addoutput(floID, utxoAmt - fee);
|
||||
trx.addflodata(floData.replace(/\n/g, ' '));
|
||||
var signedTxHash = trx.sign(privKey, 1);
|
||||
broadcastTx(signedTxHash)
|
||||
.then(txid => resolve(txid))
|
||||
.catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
/**Write data into blockchain from (and/or) to multiple floID
|
||||
* @param {Array} senderPrivKeys List of sender private-keys
|
||||
* @param {string} data FLO data of the txn
|
||||
* @param {Array} receivers List of receivers
|
||||
* @param {boolean} preserveRatio (optional) preserve ratio or equal contribution
|
||||
* @return {Promise}
|
||||
*/
|
||||
floBlockchainAPI.writeDataMultiple = function (senderPrivKeys, data, receivers = [DEFAULT.receiverID], preserveRatio = true) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!Array.isArray(senderPrivKeys))
|
||||
return reject("Invalid senderPrivKeys: SenderPrivKeys must be Array");
|
||||
if (!preserveRatio) {
|
||||
let tmp = {};
|
||||
let amount = (DEFAULT.sendAmt * receivers.length) / senderPrivKeys.length;
|
||||
senderPrivKeys.forEach(key => tmp[key] = amount);
|
||||
senderPrivKeys = tmp;
|
||||
}
|
||||
if (!Array.isArray(receivers))
|
||||
return reject("Invalid receivers: Receivers must be Array");
|
||||
else {
|
||||
let tmp = {};
|
||||
let amount = DEFAULT.sendAmt;
|
||||
receivers.forEach(floID => tmp[floID] = amount);
|
||||
receivers = tmp
|
||||
}
|
||||
if (typeof data != "string")
|
||||
data = JSON.stringify(data);
|
||||
sendTxMultiple(senderPrivKeys, receivers, data)
|
||||
.then(txid => resolve(txid))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
/**Send Tx from (and/or) to multiple floID
|
||||
* @param {Array or Object} senderPrivKeys List of sender private-key (optional: with coins to be sent)
|
||||
* @param {Object} receivers List of receivers with respective amount to be sent
|
||||
* @param {string} floData FLO data of the txn
|
||||
* @return {Promise}
|
||||
*/
|
||||
const sendTxMultiple = floBlockchainAPI.sendTxMultiple = function (senderPrivKeys, receivers, floData = '') {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!floCrypto.validateASCII(floData))
|
||||
return reject("Invalid FLO_Data: only printable ASCII characters are allowed");
|
||||
let senders = {},
|
||||
preserveRatio;
|
||||
//check for argument validations
|
||||
try {
|
||||
let invalids = {
|
||||
InvalidSenderPrivKeys: [],
|
||||
InvalidSenderAmountFor: [],
|
||||
InvalidReceiverIDs: [],
|
||||
InvalidReceiveAmountFor: []
|
||||
}
|
||||
let inputVal = 0,
|
||||
outputVal = 0;
|
||||
//Validate sender privatekeys (and send amount if passed)
|
||||
//conversion when only privateKeys are passed (preserveRatio mode)
|
||||
if (Array.isArray(senderPrivKeys)) {
|
||||
senderPrivKeys.forEach(key => {
|
||||
try {
|
||||
if (!key)
|
||||
invalids.InvalidSenderPrivKeys.push(key);
|
||||
else {
|
||||
let floID = floCrypto.getFloID(key);
|
||||
senders[floID] = {
|
||||
wif: key
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
invalids.InvalidSenderPrivKeys.push(key)
|
||||
}
|
||||
})
|
||||
preserveRatio = true;
|
||||
}
|
||||
//conversion when privatekeys are passed with send amount
|
||||
else {
|
||||
for (let key in senderPrivKeys) {
|
||||
try {
|
||||
if (!key)
|
||||
invalids.InvalidSenderPrivKeys.push(key);
|
||||
else {
|
||||
if (typeof senderPrivKeys[key] !== 'number' || senderPrivKeys[key] <= 0)
|
||||
invalids.InvalidSenderAmountFor.push(key);
|
||||
else
|
||||
inputVal += senderPrivKeys[key];
|
||||
let floID = floCrypto.getFloID(key);
|
||||
senders[floID] = {
|
||||
wif: key,
|
||||
coins: senderPrivKeys[key]
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
invalids.InvalidSenderPrivKeys.push(key)
|
||||
}
|
||||
}
|
||||
preserveRatio = false;
|
||||
}
|
||||
//Validate the receiver IDs and receive amount
|
||||
for (let floID in receivers) {
|
||||
if (!floCrypto.validateFloID(floID))
|
||||
invalids.InvalidReceiverIDs.push(floID);
|
||||
if (typeof receivers[floID] !== 'number' || receivers[floID] <= 0)
|
||||
invalids.InvalidReceiveAmountFor.push(floID);
|
||||
else
|
||||
outputVal += receivers[floID];
|
||||
}
|
||||
//Reject if any invalids are found
|
||||
for (let i in invalids)
|
||||
if (!invalids[i].length)
|
||||
delete invalids[i];
|
||||
if (Object.keys(invalids).length)
|
||||
return reject(invalids);
|
||||
//Reject if given inputVal and outputVal are not equal
|
||||
if (!preserveRatio && inputVal != outputVal)
|
||||
return reject(`Input Amount (${inputVal}) not equal to Output Amount (${outputVal})`);
|
||||
} catch (error) {
|
||||
return reject(error)
|
||||
}
|
||||
//Get balance of senders
|
||||
let promises = [];
|
||||
for (let floID in senders)
|
||||
promises.push(getBalance(floID));
|
||||
Promise.all(promises).then(results => {
|
||||
let totalBalance = 0,
|
||||
totalFee = DEFAULT.fee,
|
||||
balance = {};
|
||||
//Divide fee among sender if not for preserveRatio
|
||||
if (!preserveRatio)
|
||||
var dividedFee = totalFee / Object.keys(senders).length;
|
||||
//Check if balance of each sender is sufficient enough
|
||||
let insufficient = [];
|
||||
for (let floID in senders) {
|
||||
balance[floID] = parseFloat(results.shift());
|
||||
if (isNaN(balance[floID]) || (preserveRatio && balance[floID] <= totalFee) ||
|
||||
(!preserveRatio && balance[floID] < senders[floID].coins + dividedFee))
|
||||
insufficient.push(floID);
|
||||
totalBalance += balance[floID];
|
||||
}
|
||||
if (insufficient.length)
|
||||
return reject({
|
||||
InsufficientBalance: insufficient
|
||||
})
|
||||
//Calculate totalSentAmount and check if totalBalance is sufficient
|
||||
let totalSendAmt = totalFee;
|
||||
for (let floID in receivers)
|
||||
totalSendAmt += receivers[floID];
|
||||
if (totalBalance < totalSendAmt)
|
||||
return reject("Insufficient total Balance");
|
||||
//Get the UTXOs of the senders
|
||||
let promises = [];
|
||||
for (let floID in senders)
|
||||
promises.push(promisedAPI(`api/addr/${floID}/utxo`));
|
||||
Promise.all(promises).then(results => {
|
||||
let wifSeq = [];
|
||||
var trx = bitjs.transaction();
|
||||
for (let floID in senders) {
|
||||
let utxos = results.shift();
|
||||
let sendAmt;
|
||||
if (preserveRatio) {
|
||||
let ratio = (balance[floID] / totalBalance);
|
||||
sendAmt = totalSendAmt * ratio;
|
||||
} else
|
||||
sendAmt = senders[floID].coins + dividedFee;
|
||||
let wif = senders[floID].wif;
|
||||
let utxoAmt = 0.0;
|
||||
for (let i = utxos.length - 1;
|
||||
(i >= 0) && (utxoAmt < sendAmt); i--) {
|
||||
if (utxos[i].confirmations) {
|
||||
trx.addinput(utxos[i].txid, utxos[i].vout, utxos[i].scriptPubKey);
|
||||
wifSeq.push(wif);
|
||||
utxoAmt += utxos[i].amount;
|
||||
}
|
||||
}
|
||||
if (utxoAmt < sendAmt)
|
||||
return reject("Insufficient balance:" + floID);
|
||||
let change = (utxoAmt - sendAmt);
|
||||
if (change > 0)
|
||||
trx.addoutput(floID, change);
|
||||
}
|
||||
for (let floID in receivers)
|
||||
trx.addoutput(floID, receivers[floID]);
|
||||
trx.addflodata(floData.replace(/\n/g, ' '));
|
||||
for (let i = 0; i < wifSeq.length; i++)
|
||||
trx.signinput(i, wifSeq[i], 1);
|
||||
var signedTxHash = trx.serialize();
|
||||
broadcastTx(signedTxHash)
|
||||
.then(txid => resolve(txid))
|
||||
.catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
//Broadcast signed Tx in blockchain using API
|
||||
const broadcastTx = floBlockchainAPI.broadcastTx = function (signedTxHash) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (signedTxHash.length < 1)
|
||||
return reject("Empty Signature");
|
||||
var url = serverList[curPos] + 'api/tx/send';
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: `{"rawtx":"${signedTxHash}"}`
|
||||
}).then(response => {
|
||||
if (response.ok)
|
||||
response.json().then(data => resolve(data.txid.result));
|
||||
else
|
||||
response.text().then(data => resolve(data));
|
||||
}).catch(error => reject(error));
|
||||
})
|
||||
}
|
||||
|
||||
floBlockchainAPI.getTx = function (txid) {
|
||||
return new Promise((resolve, reject) => {
|
||||
promisedAPI(`api/tx/${txid}`)
|
||||
.then(response => resolve(response))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
//Read Txs of Address between from and to
|
||||
const readTxs = floBlockchainAPI.readTxs = function (addr, from, to) {
|
||||
return new Promise((resolve, reject) => {
|
||||
promisedAPI(`api/addrs/${addr}/txs?from=${from}&to=${to}`)
|
||||
.then(response => resolve(response))
|
||||
.catch(error => reject(error))
|
||||
});
|
||||
}
|
||||
|
||||
//Read All Txs of Address (newest first)
|
||||
floBlockchainAPI.readAllTxs = function (addr) {
|
||||
return new Promise((resolve, reject) => {
|
||||
promisedAPI(`api/addrs/${addr}/txs?from=0&to=1`).then(response => {
|
||||
promisedAPI(`api/addrs/${addr}/txs?from=0&to=${response.totalItems}0`)
|
||||
.then(response => resolve(response.items))
|
||||
.catch(error => reject(error));
|
||||
}).catch(error => reject(error))
|
||||
});
|
||||
}
|
||||
|
||||
/*Read flo Data from txs of given Address
|
||||
options can be used to filter data
|
||||
limit : maximum number of filtered data (default = 1000, negative = no limit)
|
||||
ignoreOld : ignore old txs (default = 0)
|
||||
sentOnly : filters only sent data
|
||||
receivedOnly: filters only received data
|
||||
pattern : filters data that with JSON pattern
|
||||
filter : custom filter funtion for floData (eg . filter: d => {return d[0] == '$'})
|
||||
tx : (boolean) resolve tx data or not (resolves an Array of Object with tx details)
|
||||
sender : flo-id(s) of sender
|
||||
receiver : flo-id(s) of receiver
|
||||
*/
|
||||
floBlockchainAPI.readData = function (addr, options = {}) {
|
||||
options.limit = options.limit || 0;
|
||||
options.ignoreOld = options.ignoreOld || 0;
|
||||
if (typeof options.senders === "string") options.senders = [options.senders];
|
||||
if (typeof options.receivers === "string") options.receivers = [options.receivers];
|
||||
return new Promise((resolve, reject) => {
|
||||
promisedAPI(`api/addrs/${addr}/txs?from=0&to=1`).then(response => {
|
||||
var newItems = response.totalItems - options.ignoreOld;
|
||||
promisedAPI(`api/addrs/${addr}/txs?from=0&to=${newItems * 2}`).then(response => {
|
||||
if (options.limit <= 0)
|
||||
options.limit = response.items.length;
|
||||
var filteredData = [];
|
||||
let numToRead = response.totalItems - options.ignoreOld,
|
||||
unconfirmedCount = 0;
|
||||
for (let i = 0; i < numToRead && filteredData.length < options.limit; i++) {
|
||||
if (!response.items[i].confirmations) { //unconfirmed transactions
|
||||
unconfirmedCount++;
|
||||
if (numToRead < response.items[i].length)
|
||||
numToRead++;
|
||||
continue;
|
||||
}
|
||||
if (options.pattern) {
|
||||
try {
|
||||
let jsonContent = JSON.parse(response.items[i].floData);
|
||||
if (!Object.keys(jsonContent).includes(options.pattern))
|
||||
continue;
|
||||
} catch (error) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (options.sentOnly) {
|
||||
let flag = false;
|
||||
for (let vin of response.items[i].vin)
|
||||
if (vin.addr === addr) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
if (!flag) continue;
|
||||
}
|
||||
if (Array.isArray(options.senders)) {
|
||||
let flag = false;
|
||||
for (let vin of response.items[i].vin)
|
||||
if (options.senders.includes(vin.addr)) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
if (!flag) continue;
|
||||
}
|
||||
if (options.receivedOnly) {
|
||||
let flag = false;
|
||||
for (let vout of response.items[i].vout)
|
||||
if (vout.scriptPubKey.addresses[0] === addr) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
if (!flag) continue;
|
||||
}
|
||||
if (Array.isArray(options.receivers)) {
|
||||
let flag = false;
|
||||
for (let vout of response.items[i].vout)
|
||||
if (options.receivers.includes(vout.scriptPubKey.addresses[0])) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
if (!flag) continue;
|
||||
}
|
||||
if (options.filter && !options.filter(response.items[i].floData))
|
||||
continue;
|
||||
|
||||
if (options.tx) {
|
||||
let d = {}
|
||||
d.txid = response.items[i].txid;
|
||||
d.time = response.items[i].time;
|
||||
d.blockheight = response.items[i].blockheight;
|
||||
d.senders = new Set(response.items[i].vin.map(v => v.addr));
|
||||
d.receivers = new Set(response.items[i].vout.map(v => v.scriptPubKey.addresses[0]));
|
||||
d.data = response.items[i].floData;
|
||||
filteredData.push(d);
|
||||
} else
|
||||
filteredData.push(response.items[i].floData);
|
||||
}
|
||||
resolve({
|
||||
totalTxs: response.totalItems - unconfirmedCount,
|
||||
data: filteredData
|
||||
});
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})('object' === typeof module ? module.exports : window.floBlockchainAPI = {});
|
||||
1057
js/floCloudAPI.js
Normal file
1057
js/floCloudAPI.js
Normal file
File diff suppressed because it is too large
Load Diff
442
js/floCrypto.js
Normal file
442
js/floCrypto.js
Normal file
@ -0,0 +1,442 @@
|
||||
(function (EXPORTS) { //floCrypto v2.3.3e
|
||||
/* FLO Crypto Operators */
|
||||
'use strict';
|
||||
const floCrypto = EXPORTS;
|
||||
|
||||
const p = BigInteger("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFC2F", 16);
|
||||
const ecparams = EllipticCurve.getSECCurveByName("secp256k1");
|
||||
const ascii_alternatives = `‘ '\n’ '\n“ "\n” "\n– --\n— ---\n≥ >=\n≤ <=\n≠ !=\n× *\n÷ /\n← <-\n→ ->\n↔ <->\n⇒ =>\n⇐ <=\n⇔ <=>`;
|
||||
const exponent1 = () => p.add(BigInteger.ONE).divide(BigInteger("4"));
|
||||
coinjs.compressed = true; //defaulting coinjs compressed to true;
|
||||
|
||||
function calculateY(x) {
|
||||
let exp = exponent1();
|
||||
// x is x value of public key in BigInteger format without 02 or 03 or 04 prefix
|
||||
return x.modPow(BigInteger("3"), p).add(BigInteger("7")).mod(p).modPow(exp, p)
|
||||
}
|
||||
|
||||
function getUncompressedPublicKey(compressedPublicKey) {
|
||||
// Fetch x from compressedPublicKey
|
||||
let pubKeyBytes = Crypto.util.hexToBytes(compressedPublicKey);
|
||||
const prefix = pubKeyBytes.shift() // remove prefix
|
||||
let prefix_modulus = prefix % 2;
|
||||
pubKeyBytes.unshift(0) // add prefix 0
|
||||
let x = new BigInteger(pubKeyBytes)
|
||||
let xDecimalValue = x.toString()
|
||||
// Fetch y
|
||||
let y = calculateY(x);
|
||||
let yDecimalValue = y.toString();
|
||||
// verify y value
|
||||
let resultBigInt = y.mod(BigInteger("2"));
|
||||
let check = resultBigInt.toString() % 2;
|
||||
if (prefix_modulus !== check)
|
||||
yDecimalValue = y.negate().mod(p).toString();
|
||||
return {
|
||||
x: xDecimalValue,
|
||||
y: yDecimalValue
|
||||
};
|
||||
}
|
||||
|
||||
function getSenderPublicKeyString() {
|
||||
let privateKey = ellipticCurveEncryption.senderRandom();
|
||||
var senderPublicKeyString = ellipticCurveEncryption.senderPublicString(privateKey);
|
||||
return {
|
||||
privateKey: privateKey,
|
||||
senderPublicKeyString: senderPublicKeyString
|
||||
}
|
||||
}
|
||||
|
||||
function deriveSharedKeySender(receiverPublicKeyHex, senderPrivateKey) {
|
||||
let receiverPublicKeyString = getUncompressedPublicKey(receiverPublicKeyHex);
|
||||
var senderDerivedKey = ellipticCurveEncryption.senderSharedKeyDerivation(
|
||||
receiverPublicKeyString.x, receiverPublicKeyString.y, senderPrivateKey);
|
||||
return senderDerivedKey;
|
||||
}
|
||||
|
||||
function deriveSharedKeyReceiver(senderPublicKeyString, receiverPrivateKey) {
|
||||
return ellipticCurveEncryption.receiverSharedKeyDerivation(
|
||||
senderPublicKeyString.XValuePublicString, senderPublicKeyString.YValuePublicString, receiverPrivateKey);
|
||||
}
|
||||
|
||||
function getReceiverPublicKeyString(privateKey) {
|
||||
return ellipticCurveEncryption.receiverPublicString(privateKey);
|
||||
}
|
||||
|
||||
function wifToDecimal(pk_wif, isPubKeyCompressed = false) {
|
||||
let pk = Bitcoin.Base58.decode(pk_wif)
|
||||
pk.shift()
|
||||
pk.splice(-4, 4)
|
||||
//If the private key corresponded to a compressed public key, also drop the last byte (it should be 0x01).
|
||||
if (isPubKeyCompressed == true) pk.pop()
|
||||
pk.unshift(0)
|
||||
let privateKeyDecimal = BigInteger(pk).toString()
|
||||
let privateKeyHex = Crypto.util.bytesToHex(pk)
|
||||
return {
|
||||
privateKeyDecimal: privateKeyDecimal,
|
||||
privateKeyHex: privateKeyHex
|
||||
}
|
||||
}
|
||||
|
||||
//generate a random Interger within range
|
||||
floCrypto.randInt = function (min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(securedMathRandom() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
//generate a random String within length (options : alphaNumeric chars only)
|
||||
floCrypto.randString = function (length, alphaNumeric = true) {
|
||||
var result = '';
|
||||
var characters = alphaNumeric ? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' :
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_+-./*?@#&$<>=[]{}():';
|
||||
for (var i = 0; i < length; i++)
|
||||
result += characters.charAt(Math.floor(securedMathRandom() * characters.length));
|
||||
return result;
|
||||
}
|
||||
|
||||
//Encrypt Data using public-key
|
||||
floCrypto.encryptData = function (data, receiverPublicKeyHex) {
|
||||
var senderECKeyData = getSenderPublicKeyString();
|
||||
var senderDerivedKey = deriveSharedKeySender(receiverPublicKeyHex, senderECKeyData.privateKey);
|
||||
let senderKey = senderDerivedKey.XValue + senderDerivedKey.YValue;
|
||||
let secret = Crypto.AES.encrypt(data, senderKey);
|
||||
return {
|
||||
secret: secret,
|
||||
senderPublicKeyString: senderECKeyData.senderPublicKeyString
|
||||
};
|
||||
}
|
||||
|
||||
//Decrypt Data using private-key
|
||||
floCrypto.decryptData = function (data, privateKeyHex) {
|
||||
var receiverECKeyData = {};
|
||||
if (typeof privateKeyHex !== "string") throw new Error("No private key found.");
|
||||
let privateKey = wifToDecimal(privateKeyHex, true);
|
||||
if (typeof privateKey.privateKeyDecimal !== "string") throw new Error("Failed to detremine your private key.");
|
||||
receiverECKeyData.privateKey = privateKey.privateKeyDecimal;
|
||||
var receiverDerivedKey = deriveSharedKeyReceiver(data.senderPublicKeyString, receiverECKeyData.privateKey);
|
||||
let receiverKey = receiverDerivedKey.XValue + receiverDerivedKey.YValue;
|
||||
let decryptMsg = Crypto.AES.decrypt(data.secret, receiverKey);
|
||||
return decryptMsg;
|
||||
}
|
||||
|
||||
//Sign data using private-key
|
||||
floCrypto.signData = function (data, privateKeyHex) {
|
||||
var key = new Bitcoin.ECKey(privateKeyHex);
|
||||
var messageHash = Crypto.SHA256(data);
|
||||
var messageSign = Bitcoin.ECDSA.sign(messageHash, key.priv);
|
||||
var sighex = Crypto.util.bytesToHex(messageSign);
|
||||
return sighex;
|
||||
}
|
||||
|
||||
//Verify signatue of the data using public-key
|
||||
floCrypto.verifySign = function (data, signatureHex, publicKeyHex) {
|
||||
var msgHash = Crypto.SHA256(data);
|
||||
var sigBytes = Crypto.util.hexToBytes(signatureHex);
|
||||
var publicKeyPoint = ecparams.getCurve().decodePointHex(publicKeyHex);
|
||||
var verify = Bitcoin.ECDSA.verify(msgHash, sigBytes, publicKeyPoint);
|
||||
return verify;
|
||||
}
|
||||
|
||||
//Generates a new flo ID and returns private-key, public-key and floID
|
||||
const generateNewID = floCrypto.generateNewID = function () {
|
||||
var key = new Bitcoin.ECKey(false);
|
||||
key.setCompressed(true);
|
||||
return {
|
||||
floID: key.getBitcoinAddress(),
|
||||
pubKey: key.getPubKeyHex(),
|
||||
privKey: key.getBitcoinWalletImportFormat()
|
||||
}
|
||||
}
|
||||
|
||||
Object.defineProperties(floCrypto, {
|
||||
newID: {
|
||||
get: () => generateNewID()
|
||||
},
|
||||
tmpID: {
|
||||
get: () => {
|
||||
let bytes = Crypto.util.randomBytes(20);
|
||||
bytes.unshift(bitjs.pub);
|
||||
var hash = Crypto.SHA256(Crypto.SHA256(bytes, {
|
||||
asBytes: true
|
||||
}), {
|
||||
asBytes: true
|
||||
});
|
||||
var checksum = hash.slice(0, 4);
|
||||
return bitjs.Base58.encode(bytes.concat(checksum));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//Returns public-key from private-key
|
||||
floCrypto.getPubKeyHex = function (privateKeyHex) {
|
||||
if (!privateKeyHex)
|
||||
return null;
|
||||
var key = new Bitcoin.ECKey(privateKeyHex);
|
||||
if (key.priv == null)
|
||||
return null;
|
||||
key.setCompressed(true);
|
||||
return key.getPubKeyHex();
|
||||
}
|
||||
|
||||
//Returns flo-ID from public-key or private-key
|
||||
floCrypto.getFloID = function (keyHex) {
|
||||
if (!keyHex)
|
||||
return null;
|
||||
try {
|
||||
var key = new Bitcoin.ECKey(keyHex);
|
||||
if (key.priv == null)
|
||||
key.setPub(keyHex);
|
||||
return key.getBitcoinAddress();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
floCrypto.getAddress = function (privateKeyHex, strict = false) {
|
||||
if (!privateKeyHex)
|
||||
return;
|
||||
var key = new Bitcoin.ECKey(privateKeyHex);
|
||||
if (key.priv == null)
|
||||
return null;
|
||||
key.setCompressed(true);
|
||||
let pubKey = key.getPubKeyHex(),
|
||||
version = bitjs.Base58.decode(privateKeyHex)[0];
|
||||
switch (version) {
|
||||
case coinjs.priv: //BTC
|
||||
return coinjs.bech32Address(pubKey).address;
|
||||
case bitjs.priv: //FLO
|
||||
return bitjs.pubkey2address(pubKey);
|
||||
default:
|
||||
return strict ? false : bitjs.pubkey2address(pubKey); //default to FLO address (if strict=false)
|
||||
}
|
||||
}
|
||||
|
||||
//Verify the private-key for the given public-key or flo-ID
|
||||
floCrypto.verifyPrivKey = function (privateKeyHex, pubKey_floID, isfloID = true) {
|
||||
if (!privateKeyHex || !pubKey_floID)
|
||||
return false;
|
||||
try {
|
||||
var key = new Bitcoin.ECKey(privateKeyHex);
|
||||
if (key.priv == null)
|
||||
return false;
|
||||
key.setCompressed(true);
|
||||
if (isfloID && pubKey_floID == key.getBitcoinAddress())
|
||||
return true;
|
||||
else if (!isfloID && pubKey_floID == key.getPubKeyHex())
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
//Check if the given flo-id is valid or not
|
||||
floCrypto.validateFloID = function (floID) {
|
||||
if (!floID)
|
||||
return false;
|
||||
try {
|
||||
let addr = new Bitcoin.Address(floID);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
//Check if the given address (any blockchain) is valid or not
|
||||
floCrypto.validateAddr = function (address, std = true, bech = true) {
|
||||
let raw = decodeAddress(address);
|
||||
if (!raw)
|
||||
return false;
|
||||
if (typeof raw.version !== 'undefined') { //legacy or segwit
|
||||
if (std == false)
|
||||
return false;
|
||||
else if (std === true || (!Array.isArray(std) && std === raw.version) || (Array.isArray(std) && std.includes(raw.version)))
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
} else if (typeof raw.bech_version !== 'undefined') { //bech32
|
||||
if (bech === false)
|
||||
return false;
|
||||
else if (bech === true || (!Array.isArray(bech) && bech === raw.bech_version) || (Array.isArray(bech) && bech.includes(raw.bech_version)))
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
} else //unknown
|
||||
return false;
|
||||
}
|
||||
|
||||
//Check the public-key for the address (any blockchain)
|
||||
floCrypto.verifyPubKey = function (pubKeyHex, address) {
|
||||
let raw = decodeAddress(address),
|
||||
pub_hash = Crypto.util.bytesToHex(ripemd160(Crypto.SHA256(Crypto.util.hexToBytes(pubKeyHex), {
|
||||
asBytes: true
|
||||
})));
|
||||
return raw ? pub_hash === raw.hex : false;
|
||||
}
|
||||
|
||||
//Convert the given address (any blockchain) to equivalent floID
|
||||
floCrypto.toFloID = function (address, options = null) {
|
||||
if (!address)
|
||||
return;
|
||||
let raw = decodeAddress(address);
|
||||
if (!raw)
|
||||
return;
|
||||
else if (options) {
|
||||
if (typeof raw.version !== 'undefined' && (!options.std || !options.std.includes(raw.version)))
|
||||
return;
|
||||
if (typeof raw.bech_version !== 'undefined' && (!options.bech || !options.bech.includes(raw.bech_version)))
|
||||
return;
|
||||
}
|
||||
raw.bytes.unshift(bitjs.pub);
|
||||
let hash = Crypto.SHA256(Crypto.SHA256(raw.bytes, {
|
||||
asBytes: true
|
||||
}), {
|
||||
asBytes: true
|
||||
});
|
||||
return bitjs.Base58.encode(raw.bytes.concat(hash.slice(0, 4)));
|
||||
}
|
||||
|
||||
//Checks if the given addresses (any blockchain) are same (w.r.t keys)
|
||||
floCrypto.isSameAddr = function (addr1, addr2) {
|
||||
if (!addr1 || !addr2)
|
||||
return;
|
||||
let raw1 = decodeAddress(addr1),
|
||||
raw2 = decodeAddress(addr2);
|
||||
if (!raw1 || !raw2)
|
||||
return false;
|
||||
else
|
||||
return raw1.hex === raw2.hex;
|
||||
}
|
||||
|
||||
const decodeAddress = floCrypto.decodeAddr = function (address) {
|
||||
if (!address)
|
||||
return;
|
||||
else if (address.length == 33 || address.length == 34) { //legacy encoding
|
||||
let decode = bitjs.Base58.decode(address);
|
||||
let bytes = decode.slice(0, decode.length - 4);
|
||||
let checksum = decode.slice(decode.length - 4),
|
||||
hash = Crypto.SHA256(Crypto.SHA256(bytes, {
|
||||
asBytes: true
|
||||
}), {
|
||||
asBytes: true
|
||||
});
|
||||
return (hash[0] != checksum[0] || hash[1] != checksum[1] || hash[2] != checksum[2] || hash[3] != checksum[3]) ? null : {
|
||||
version: bytes.shift(),
|
||||
hex: Crypto.util.bytesToHex(bytes),
|
||||
bytes
|
||||
}
|
||||
} else if (address.length == 42) { //bech encoding
|
||||
let decode = coinjs.bech32_decode(address);
|
||||
if (decode) {
|
||||
let bytes = decode.data;
|
||||
let bech_version = bytes.shift();
|
||||
bytes = coinjs.bech32_convert(bytes, 5, 8, false);
|
||||
return {
|
||||
bech_version,
|
||||
hrp: decode.hrp,
|
||||
hex: Crypto.util.bytesToHex(bytes),
|
||||
bytes
|
||||
}
|
||||
} else
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
//Split the str using shamir's Secret and Returns the shares
|
||||
floCrypto.createShamirsSecretShares = function (str, total_shares, threshold_limit) {
|
||||
try {
|
||||
if (str.length > 0) {
|
||||
var strHex = shamirSecretShare.str2hex(str);
|
||||
var shares = shamirSecretShare.share(strHex, total_shares, threshold_limit);
|
||||
return shares;
|
||||
}
|
||||
return false;
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
//Returns the retrived secret by combining the shamirs shares
|
||||
const retrieveShamirSecret = floCrypto.retrieveShamirSecret = function (sharesArray) {
|
||||
try {
|
||||
if (sharesArray.length > 0) {
|
||||
var comb = shamirSecretShare.combine(sharesArray.slice(0, sharesArray.length));
|
||||
comb = shamirSecretShare.hex2str(comb);
|
||||
return comb;
|
||||
}
|
||||
return false;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
//Verifies the shares and str
|
||||
floCrypto.verifyShamirsSecret = function (sharesArray, str) {
|
||||
if (!str)
|
||||
return null;
|
||||
else if (retrieveShamirSecret(sharesArray) === str)
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
}
|
||||
|
||||
const validateASCII = floCrypto.validateASCII = function (string, bool = true) {
|
||||
if (typeof string !== "string")
|
||||
return null;
|
||||
if (bool) {
|
||||
let x;
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
x = string.charCodeAt(i);
|
||||
if (x < 32 || x > 127)
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
let x, invalids = {};
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
x = string.charCodeAt(i);
|
||||
if (x < 32 || x > 127)
|
||||
if (x in invalids)
|
||||
invalids[string[i]].push(i)
|
||||
else
|
||||
invalids[string[i]] = [i];
|
||||
}
|
||||
if (Object.keys(invalids).length)
|
||||
return invalids;
|
||||
else
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
floCrypto.convertToASCII = function (string, mode = 'soft-remove') {
|
||||
let chars = validateASCII(string, false);
|
||||
if (chars === true)
|
||||
return string;
|
||||
else if (chars === null)
|
||||
return null;
|
||||
let convertor, result = string,
|
||||
refAlt = {};
|
||||
ascii_alternatives.split('\n').forEach(a => refAlt[a[0]] = a.slice(2));
|
||||
mode = mode.toLowerCase();
|
||||
if (mode === "hard-unicode")
|
||||
convertor = (c) => `\\u${('000' + c.charCodeAt().toString(16)).slice(-4)}`;
|
||||
else if (mode === "soft-unicode")
|
||||
convertor = (c) => refAlt[c] || `\\u${('000' + c.charCodeAt().toString(16)).slice(-4)}`;
|
||||
else if (mode === "hard-remove")
|
||||
convertor = c => "";
|
||||
else if (mode === "soft-remove")
|
||||
convertor = c => refAlt[c] || "";
|
||||
else
|
||||
return null;
|
||||
for (let c in chars)
|
||||
result = result.replaceAll(c, convertor(c));
|
||||
return result;
|
||||
}
|
||||
|
||||
floCrypto.revertUnicode = function (string) {
|
||||
return string.replace(/\\u[\dA-F]{4}/gi,
|
||||
m => String.fromCharCode(parseInt(m.replace(/\\u/g, ''), 16)));
|
||||
}
|
||||
|
||||
})('object' === typeof module ? module.exports : window.floCrypto = {});
|
||||
770
js/floDapps.js
Normal file
770
js/floDapps.js
Normal file
@ -0,0 +1,770 @@
|
||||
(function(EXPORTS) { //floDapps v2.3.2d
|
||||
/* General functions for FLO Dapps*/
|
||||
'use strict';
|
||||
const floDapps = EXPORTS;
|
||||
|
||||
const DEFAULT = {
|
||||
root: "floDapps",
|
||||
application: floGlobals.application,
|
||||
adminID: floGlobals.adminID
|
||||
};
|
||||
|
||||
Object.defineProperties(floDapps, {
|
||||
application: {
|
||||
get: () => DEFAULT.application
|
||||
},
|
||||
adminID: {
|
||||
get: () => DEFAULT.adminID
|
||||
},
|
||||
root: {
|
||||
get: () => DEFAULT.root
|
||||
}
|
||||
});
|
||||
|
||||
var user_priv_raw, aes_key, user_priv_wrap; //private variable inside capsule
|
||||
const raw_user = {
|
||||
get private() {
|
||||
if (!user_priv_raw)
|
||||
throw "User not logged in";
|
||||
return Crypto.AES.decrypt(user_priv_raw, aes_key);
|
||||
}
|
||||
}
|
||||
|
||||
var user_id, user_public, user_private;
|
||||
const user = floDapps.user = {
|
||||
get id() {
|
||||
if (!user_id)
|
||||
throw "User not logged in";
|
||||
return user_id;
|
||||
},
|
||||
get public() {
|
||||
if (!user_public)
|
||||
throw "User not logged in";
|
||||
return user_public;
|
||||
},
|
||||
get private() {
|
||||
if (!user_private)
|
||||
throw "User not logged in";
|
||||
else if (user_private instanceof Function)
|
||||
return user_private();
|
||||
else
|
||||
return Crypto.AES.decrypt(user_private, aes_key);
|
||||
},
|
||||
sign(message) {
|
||||
return floCrypto.signData(message, raw_user.private);
|
||||
},
|
||||
decrypt(data) {
|
||||
return floCrypto.decryptData(data, raw_user.private);
|
||||
},
|
||||
encipher(message) {
|
||||
return Crypto.AES.encrypt(message, raw_user.private);
|
||||
},
|
||||
decipher(data) {
|
||||
return Crypto.AES.decrypt(data, raw_user.private);
|
||||
},
|
||||
get db_name() {
|
||||
return "floDapps#" + floCrypto.toFloID(user.id);
|
||||
},
|
||||
lock() {
|
||||
user_private = user_priv_wrap;
|
||||
},
|
||||
async unlock() {
|
||||
if (await user.private === raw_user.private)
|
||||
user_private = user_priv_raw;
|
||||
},
|
||||
get_contact(id) {
|
||||
if (!user.contacts)
|
||||
throw "Contacts not available";
|
||||
else if (user.contacts[id])
|
||||
return user.contacts[id];
|
||||
else {
|
||||
let id_raw = floCrypto.decodeAddr(id).hex;
|
||||
for (let i in user.contacts)
|
||||
if (floCrypto.decodeAddr(i).hex == id_raw)
|
||||
return user.contacts[i];
|
||||
}
|
||||
},
|
||||
get_pubKey(id) {
|
||||
if (!user.pubKeys)
|
||||
throw "Contacts not available";
|
||||
else if (user.pubKeys[id])
|
||||
return user.pubKeys[id];
|
||||
else {
|
||||
let id_raw = floCrypto.decodeAddr(id).hex;
|
||||
for (let i in user.pubKeys)
|
||||
if (floCrypto.decodeAddr(i).hex == id_raw)
|
||||
return user.pubKeys[i];
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
user_id = user_public = user_private = undefined;
|
||||
user_priv_raw = aes_key = undefined;
|
||||
delete user.contacts;
|
||||
delete user.pubKeys;
|
||||
delete user.messages;
|
||||
}
|
||||
};
|
||||
|
||||
Object.defineProperties(window, {
|
||||
myFloID: {
|
||||
get: () => {
|
||||
try {
|
||||
return user.id;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
myUserID: {
|
||||
get: () => {
|
||||
try {
|
||||
return user.id;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
myPubKey: {
|
||||
get: () => {
|
||||
try {
|
||||
return user.public;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
myPrivKey: {
|
||||
get: () => {
|
||||
try {
|
||||
return user.private;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var subAdmins, settings
|
||||
Object.defineProperties(floGlobals, {
|
||||
subAdmins: {
|
||||
get: () => subAdmins
|
||||
},
|
||||
settings: {
|
||||
get: () => settings
|
||||
},
|
||||
contacts: {
|
||||
get: () => user.contacts
|
||||
},
|
||||
pubKeys: {
|
||||
get: () => user.pubKeys
|
||||
},
|
||||
messages: {
|
||||
get: () => user.messages
|
||||
}
|
||||
})
|
||||
|
||||
function initIndexedDB() {
|
||||
return new Promise((resolve, reject) => {
|
||||
var obs_g = {
|
||||
//general
|
||||
lastTx: {},
|
||||
//supernode (cloud list)
|
||||
supernodes: {
|
||||
indexes: {
|
||||
uri: null,
|
||||
pubKey: null
|
||||
}
|
||||
}
|
||||
}
|
||||
var obs_a = {
|
||||
//login credentials
|
||||
credentials: {},
|
||||
//for Dapps
|
||||
subAdmins: {},
|
||||
settings: {},
|
||||
appObjects: {},
|
||||
generalData: {},
|
||||
lastVC: {}
|
||||
}
|
||||
//add other given objectStores
|
||||
initIndexedDB.appObs = initIndexedDB.appObs || {}
|
||||
for (let o in initIndexedDB.appObs)
|
||||
if (!(o in obs_a))
|
||||
obs_a[o] = initIndexedDB.appObs[o]
|
||||
Promise.all([
|
||||
compactIDB.initDB(DEFAULT.application, obs_a),
|
||||
compactIDB.initDB(DEFAULT.root, obs_g)
|
||||
]).then(result => {
|
||||
compactIDB.setDefaultDB(DEFAULT.application)
|
||||
resolve("IndexedDB App Storage Initated Successfully")
|
||||
}).catch(error => reject(error));
|
||||
})
|
||||
}
|
||||
|
||||
function initUserDB() {
|
||||
return new Promise((resolve, reject) => {
|
||||
var obs = {
|
||||
contacts: {},
|
||||
pubKeys: {},
|
||||
messages: {}
|
||||
}
|
||||
compactIDB.initDB(user.db_name, obs).then(result => {
|
||||
resolve("UserDB Initated Successfully")
|
||||
}).catch(error => reject('Init userDB failed'));
|
||||
})
|
||||
}
|
||||
|
||||
function loadUserDB() {
|
||||
return new Promise((resolve, reject) => {
|
||||
var loadData = ["contacts", "pubKeys", "messages"]
|
||||
var promises = []
|
||||
for (var i = 0; i < loadData.length; i++)
|
||||
promises[i] = compactIDB.readAllData(loadData[i], user.db_name)
|
||||
Promise.all(promises).then(results => {
|
||||
for (var i = 0; i < loadData.length; i++)
|
||||
user[loadData[i]] = results[i]
|
||||
resolve("Loaded Data from userDB")
|
||||
}).catch(error => reject('Load userDB failed'))
|
||||
})
|
||||
}
|
||||
|
||||
const startUpFunctions = [];
|
||||
|
||||
startUpFunctions.push(function readSupernodeListFromAPI() {
|
||||
return new Promise((resolve, reject) => {
|
||||
compactIDB.readData("lastTx", floCloudAPI.SNStorageID, DEFAULT.root).then(lastTx => {
|
||||
floBlockchainAPI.readData(floCloudAPI.SNStorageID, {
|
||||
ignoreOld: lastTx,
|
||||
sentOnly: true,
|
||||
pattern: "SuperNodeStorage"
|
||||
}).then(result => {
|
||||
for (var i = result.data.length - 1; i >= 0; i--) {
|
||||
var content = JSON.parse(result.data[i]).SuperNodeStorage;
|
||||
for (let sn in content.removeNodes)
|
||||
compactIDB.removeData("supernodes", sn, DEFAULT.root);
|
||||
for (let sn in content.newNodes)
|
||||
compactIDB.writeData("supernodes", content.newNodes[sn], sn, DEFAULT.root);
|
||||
}
|
||||
compactIDB.writeData("lastTx", result.totalTxs, floCloudAPI.SNStorageID, DEFAULT.root);
|
||||
compactIDB.readAllData("supernodes", DEFAULT.root).then(nodes => {
|
||||
floCloudAPI.init(nodes)
|
||||
.then(result => resolve("Loaded Supernode list\n" + result))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
})
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
});
|
||||
|
||||
startUpFunctions.push(function readAppConfigFromAPI() {
|
||||
return new Promise((resolve, reject) => {
|
||||
compactIDB.readData("lastTx", `${DEFAULT.application}|${DEFAULT.adminID}`, DEFAULT.root).then(lastTx => {
|
||||
floBlockchainAPI.readData(DEFAULT.adminID, {
|
||||
ignoreOld: lastTx,
|
||||
sentOnly: true,
|
||||
pattern: DEFAULT.application
|
||||
}).then(result => {
|
||||
for (var i = result.data.length - 1; i >= 0; i--) {
|
||||
var content = JSON.parse(result.data[i])[DEFAULT.application];
|
||||
if (!content || typeof content !== "object")
|
||||
continue;
|
||||
if (Array.isArray(content.removeSubAdmin))
|
||||
for (var j = 0; j < content.removeSubAdmin.length; j++)
|
||||
compactIDB.removeData("subAdmins", content.removeSubAdmin[j]);
|
||||
if (Array.isArray(content.addSubAdmin))
|
||||
for (var k = 0; k < content.addSubAdmin.length; k++)
|
||||
compactIDB.writeData("subAdmins", true, content.addSubAdmin[k]);
|
||||
if (content.settings)
|
||||
for (let l in content.settings)
|
||||
compactIDB.writeData("settings", content.settings[l], l)
|
||||
}
|
||||
compactIDB.writeData("lastTx", result.totalTxs, `${DEFAULT.application}|${DEFAULT.adminID}`, DEFAULT.root);
|
||||
compactIDB.readAllData("subAdmins").then(result => {
|
||||
subAdmins = Object.keys(result);
|
||||
compactIDB.readAllData("settings").then(result => {
|
||||
settings = result;
|
||||
resolve("Read app configuration from blockchain");
|
||||
})
|
||||
})
|
||||
})
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
});
|
||||
|
||||
startUpFunctions.push(function loadDataFromAppIDB() {
|
||||
return new Promise((resolve, reject) => {
|
||||
var loadData = ["appObjects", "generalData", "lastVC"]
|
||||
var promises = []
|
||||
for (var i = 0; i < loadData.length; i++)
|
||||
promises[i] = compactIDB.readAllData(loadData[i])
|
||||
Promise.all(promises).then(results => {
|
||||
for (var i = 0; i < loadData.length; i++)
|
||||
floGlobals[loadData[i]] = results[i]
|
||||
resolve("Loaded Data from app IDB")
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
});
|
||||
|
||||
var keyInput = type => new Promise((resolve, reject) => {
|
||||
let inputVal = prompt(`Enter ${type}: `)
|
||||
if (inputVal === null)
|
||||
reject(null)
|
||||
else
|
||||
resolve(inputVal)
|
||||
});
|
||||
|
||||
function getCredentials() {
|
||||
|
||||
const readSharesFromIDB = indexArr => new Promise((resolve, reject) => {
|
||||
var promises = []
|
||||
for (var i = 0; i < indexArr.length; i++)
|
||||
promises.push(compactIDB.readData('credentials', indexArr[i]))
|
||||
Promise.all(promises).then(shares => {
|
||||
var secret = floCrypto.retrieveShamirSecret(shares)
|
||||
if (secret)
|
||||
resolve(secret)
|
||||
else
|
||||
reject("Shares are insufficient or incorrect")
|
||||
}).catch(error => {
|
||||
clearCredentials();
|
||||
location.reload();
|
||||
})
|
||||
});
|
||||
|
||||
const writeSharesToIDB = (shares, i = 0, resultIndexes = []) => new Promise(resolve => {
|
||||
if (i >= shares.length)
|
||||
return resolve(resultIndexes)
|
||||
var n = floCrypto.randInt(0, 100000)
|
||||
compactIDB.addData("credentials", shares[i], n).then(res => {
|
||||
resultIndexes.push(n)
|
||||
writeSharesToIDB(shares, i + 1, resultIndexes)
|
||||
.then(result => resolve(result))
|
||||
}).catch(error => {
|
||||
writeSharesToIDB(shares, i, resultIndexes)
|
||||
.then(result => resolve(result))
|
||||
})
|
||||
});
|
||||
|
||||
const getPrivateKeyCredentials = () => new Promise((resolve, reject) => {
|
||||
var indexArr = localStorage.getItem(`${DEFAULT.application}#privKey`)
|
||||
if (indexArr) {
|
||||
readSharesFromIDB(JSON.parse(indexArr))
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error))
|
||||
} else {
|
||||
var privKey;
|
||||
keyInput("PRIVATE_KEY").then(result => {
|
||||
if (!result)
|
||||
return reject("Empty Private Key")
|
||||
var floID = floCrypto.getFloID(result)
|
||||
if (!floID || !floCrypto.validateFloID(floID))
|
||||
return reject("Invalid Private Key")
|
||||
privKey = result;
|
||||
}).catch(error => {
|
||||
console.log(error, "Generating Random Keys")
|
||||
privKey = floCrypto.generateNewID().privKey
|
||||
}).finally(_ => {
|
||||
if (!privKey)
|
||||
return;
|
||||
var threshold = floCrypto.randInt(10, 20)
|
||||
var shares = floCrypto.createShamirsSecretShares(privKey, threshold, threshold)
|
||||
writeSharesToIDB(shares).then(resultIndexes => {
|
||||
//store index keys in localStorage
|
||||
localStorage.setItem(`${DEFAULT.application}#privKey`, JSON.stringify(resultIndexes))
|
||||
//also add a dummy privatekey to the IDB
|
||||
var randomPrivKey = floCrypto.generateNewID().privKey
|
||||
var randomThreshold = floCrypto.randInt(10, 20)
|
||||
var randomShares = floCrypto.createShamirsSecretShares(randomPrivKey, randomThreshold, randomThreshold)
|
||||
writeSharesToIDB(randomShares)
|
||||
//resolve private Key
|
||||
resolve(privKey)
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const checkIfPinRequired = key => new Promise((resolve, reject) => {
|
||||
if (key.length == 52)
|
||||
resolve(key)
|
||||
else {
|
||||
keyInput("PIN/Password").then(pwd => {
|
||||
try {
|
||||
let privKey = Crypto.AES.decrypt(key, pwd);
|
||||
resolve(privKey)
|
||||
} catch (error) {
|
||||
reject("Access Denied: Incorrect PIN/Password")
|
||||
}
|
||||
}).catch(error => reject("Access Denied: PIN/Password required"))
|
||||
}
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
getPrivateKeyCredentials().then(key => {
|
||||
checkIfPinRequired(key).then(privKey => {
|
||||
try {
|
||||
user_public = floCrypto.getPubKeyHex(privKey);
|
||||
user_id = floCrypto.getAddress(privKey);
|
||||
floCloudAPI.user(user_id, privKey); //Set user for floCloudAPI
|
||||
user_priv_wrap = () => checkIfPinRequired(key);
|
||||
let n = floCrypto.randInt(12, 20);
|
||||
aes_key = floCrypto.randString(n);
|
||||
user_priv_raw = Crypto.AES.encrypt(privKey, aes_key);
|
||||
user_private = user_priv_wrap;
|
||||
resolve('Login Credentials loaded successful')
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
reject("Corrupted Private Key")
|
||||
}
|
||||
}).catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
var startUpLog = (status, log) => status ? console.log(log) : console.error(log);
|
||||
|
||||
const callStartUpFunction = i => new Promise((resolve, reject) => {
|
||||
startUpFunctions[i]().then(result => {
|
||||
callStartUpFunction.completed += 1;
|
||||
startUpLog(true, `${result}\nCompleted ${callStartUpFunction.completed}/${callStartUpFunction.total} Startup functions`)
|
||||
resolve(true)
|
||||
}).catch(error => {
|
||||
callStartUpFunction.failed += 1;
|
||||
startUpLog(false, `${error}\nFailed ${callStartUpFunction.failed}/${callStartUpFunction.total} Startup functions`)
|
||||
reject(false)
|
||||
})
|
||||
});
|
||||
|
||||
var _midFunction;
|
||||
const midStartUp = () => new Promise((res, rej) => {
|
||||
if (_midFunction instanceof Function) {
|
||||
_midFunction()
|
||||
.then(r => res("Mid startup function completed"))
|
||||
.catch(e => rej("Mid startup function failed"))
|
||||
} else
|
||||
res("No mid startup function")
|
||||
});
|
||||
|
||||
const callAndLog = p => new Promise((res, rej) => {
|
||||
p.then(r => {
|
||||
startUpLog(true, r)
|
||||
res(r)
|
||||
}).catch(e => {
|
||||
startUpLog(false, e)
|
||||
rej(e)
|
||||
})
|
||||
});
|
||||
|
||||
floDapps.launchStartUp = function() {
|
||||
return new Promise((resolve, reject) => {
|
||||
initIndexedDB().then(log => {
|
||||
console.log(log)
|
||||
callStartUpFunction.total = startUpFunctions.length;
|
||||
callStartUpFunction.completed = 0;
|
||||
callStartUpFunction.failed = 0;
|
||||
let p1 = new Promise((res, rej) => {
|
||||
Promise.all(startUpFunctions.map((f, i) => callStartUpFunction(i))).then(r => {
|
||||
callAndLog(midStartUp())
|
||||
.then(r => res(true))
|
||||
.catch(e => rej(false))
|
||||
})
|
||||
});
|
||||
let p2 = new Promise((res, rej) => {
|
||||
callAndLog(getCredentials()).then(r => {
|
||||
callAndLog(initUserDB()).then(r => {
|
||||
callAndLog(loadUserDB())
|
||||
.then(r => res(true))
|
||||
.catch(e => rej(false))
|
||||
}).catch(e => rej(false))
|
||||
}).catch(e => rej(false))
|
||||
})
|
||||
Promise.all([p1, p2])
|
||||
.then(r => resolve('App Startup finished successful'))
|
||||
.catch(e => reject('App Startup failed'))
|
||||
}).catch(error => {
|
||||
startUpLog(false, error);
|
||||
reject("App database initiation failed")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.addStartUpFunction = fn => fn instanceof Function && !startUpFunctions.includes(fn) ? startUpFunctions.push(fn) : false;
|
||||
|
||||
floDapps.setMidStartup = fn => fn instanceof Function ? _midFunction = fn : false;
|
||||
|
||||
floDapps.setCustomStartupLogger = fn => fn instanceof Function ? startUpLog = fn : false;
|
||||
|
||||
floDapps.setCustomPrivKeyInput = fn => fn instanceof Function ? keyInput = fn : false;
|
||||
|
||||
floDapps.setAppObjectStores = appObs => initIndexedDB.appObs = appObs;
|
||||
|
||||
floDapps.storeContact = function(floID, name) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!floCrypto.validateAddr(floID))
|
||||
return reject("Invalid floID!")
|
||||
compactIDB.writeData("contacts", name, floID, user.db_name).then(result => {
|
||||
user.contacts[floID] = name;
|
||||
resolve("Contact stored")
|
||||
}).catch(error => reject(error))
|
||||
});
|
||||
}
|
||||
|
||||
floDapps.storePubKey = function(floID, pubKey) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (floID in user.pubKeys)
|
||||
return resolve("pubKey already stored")
|
||||
if (!floCrypto.validateAddr(floID))
|
||||
return reject("Invalid floID!")
|
||||
if (!floCrypto.verifyPubKey(pubKey, floID))
|
||||
return reject("Incorrect pubKey")
|
||||
compactIDB.writeData("pubKeys", pubKey, floID, user.db_name).then(result => {
|
||||
user.pubKeys[floID] = pubKey;
|
||||
resolve("pubKey stored")
|
||||
}).catch(error => reject(error))
|
||||
});
|
||||
}
|
||||
|
||||
floDapps.sendMessage = function(floID, message) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let options = {
|
||||
receiverID: floID,
|
||||
application: DEFAULT.root,
|
||||
comment: DEFAULT.application
|
||||
}
|
||||
if (floID in user.pubKeys)
|
||||
message = floCrypto.encryptData(JSON.stringify(message), user.pubKeys[floID])
|
||||
floCloudAPI.sendApplicationData(message, "Message", options)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.requestInbox = function(callback) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let lastVC = Object.keys(user.messages).sort().pop()
|
||||
let options = {
|
||||
receiverID: user.id,
|
||||
application: DEFAULT.root,
|
||||
lowerVectorClock: lastVC + 1
|
||||
}
|
||||
let privKey = raw_user.private;
|
||||
options.callback = (d, e) => {
|
||||
for (let v in d) {
|
||||
try {
|
||||
if (d[v].message instanceof Object && "secret" in d[v].message)
|
||||
d[v].message = floCrypto.decryptData(d[v].message, privKey)
|
||||
} catch (error) {}
|
||||
compactIDB.writeData("messages", d[v], v, user.db_name)
|
||||
user.messages[v] = d[v]
|
||||
}
|
||||
if (callback instanceof Function)
|
||||
callback(d, e)
|
||||
}
|
||||
floCloudAPI.requestApplicationData("Message", options)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.manageAppConfig = function(adminPrivKey, addList, rmList, settings) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!Array.isArray(addList) || !addList.length) addList = undefined;
|
||||
if (!Array.isArray(rmList) || !rmList.length) rmList = undefined;
|
||||
if (!settings || typeof settings !== "object" || !Object.keys(settings).length) settings = undefined;
|
||||
if (!addList && !rmList && !settings)
|
||||
return reject("No configuration change")
|
||||
var floData = {
|
||||
[DEFAULT.application]: {
|
||||
addSubAdmin: addList,
|
||||
removeSubAdmin: rmList,
|
||||
settings: settings
|
||||
}
|
||||
}
|
||||
var floID = floCrypto.getFloID(adminPrivKey)
|
||||
if (floID != DEFAULT.adminID)
|
||||
reject('Access Denied for Admin privilege')
|
||||
else
|
||||
floBlockchainAPI.writeData(floID, JSON.stringify(floData), adminPrivKey)
|
||||
.then(result => resolve(['Updated App Configuration', result]))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
const clearCredentials = floDapps.clearCredentials = function() {
|
||||
return new Promise((resolve, reject) => {
|
||||
compactIDB.clearData('credentials', DEFAULT.application).then(result => {
|
||||
localStorage.removeItem(`${DEFAULT.application}#privKey`);
|
||||
user.clear();
|
||||
resolve("privKey credentials deleted!")
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.deleteUserData = function(credentials = false) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let p = []
|
||||
p.push(compactIDB.deleteDB(user.db_name))
|
||||
if (credentials)
|
||||
p.push(clearCredentials())
|
||||
Promise.all(p)
|
||||
.then(result => resolve('User database(local) deleted'))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.deleteAppData = function() {
|
||||
return new Promise((resolve, reject) => {
|
||||
compactIDB.deleteDB(DEFAULT.application).then(result => {
|
||||
localStorage.removeItem(`${DEFAULT.application}#privKey`)
|
||||
user.clear();
|
||||
compactIDB.removeData('lastTx', `${DEFAULT.application}|${DEFAULT.adminID}`, DEFAULT.root)
|
||||
.then(result => resolve("App database(local) deleted"))
|
||||
.catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.securePrivKey = function(pwd) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let indexArr = localStorage.getItem(`${DEFAULT.application}#privKey`)
|
||||
if (!indexArr)
|
||||
return reject("PrivKey not found");
|
||||
indexArr = JSON.parse(indexArr)
|
||||
let encryptedKey = Crypto.AES.encrypt(await user.private, pwd);
|
||||
let threshold = indexArr.length;
|
||||
let shares = floCrypto.createShamirsSecretShares(encryptedKey, threshold, threshold)
|
||||
let promises = [];
|
||||
let overwriteFn = (share, index) =>
|
||||
compactIDB.writeData("credentials", share, index, DEFAULT.application);
|
||||
for (var i = 0; i < threshold; i++)
|
||||
promises.push(overwriteFn(shares[i], indexArr[i]));
|
||||
Promise.all(promises)
|
||||
.then(results => resolve("Private Key Secured"))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
floDapps.verifyPin = function(pin = null) {
|
||||
const readSharesFromIDB = function(indexArr) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var promises = []
|
||||
for (var i = 0; i < indexArr.length; i++)
|
||||
promises.push(compactIDB.readData('credentials', indexArr[i]))
|
||||
Promise.all(promises).then(shares => {
|
||||
var secret = floCrypto.retrieveShamirSecret(shares)
|
||||
console.info(shares, secret)
|
||||
if (secret)
|
||||
resolve(secret)
|
||||
else
|
||||
reject("Shares are insufficient or incorrect")
|
||||
}).catch(error => {
|
||||
clearCredentials();
|
||||
location.reload();
|
||||
})
|
||||
})
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
var indexArr = localStorage.getItem(`${DEFAULT.application}#privKey`)
|
||||
console.info(indexArr)
|
||||
if (!indexArr)
|
||||
reject('No login credentials found')
|
||||
readSharesFromIDB(JSON.parse(indexArr)).then(key => {
|
||||
if (key.length == 52) {
|
||||
if (pin === null)
|
||||
resolve("Private key not secured")
|
||||
else
|
||||
reject("Private key not secured")
|
||||
} else {
|
||||
if (pin === null)
|
||||
return reject("PIN/Password required")
|
||||
try {
|
||||
let privKey = Crypto.AES.decrypt(key, pin);
|
||||
resolve("PIN/Password verified")
|
||||
} catch (error) {
|
||||
reject("Incorrect PIN/Password")
|
||||
}
|
||||
}
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
const getNextGeneralData = floDapps.getNextGeneralData = function(type, vectorClock = null, options = {}) {
|
||||
var fk = floCloudAPI.util.filterKey(type, options)
|
||||
vectorClock = vectorClock || getNextGeneralData[fk] || '0';
|
||||
var filteredResult = {}
|
||||
if (floGlobals.generalData[fk]) {
|
||||
for (let d in floGlobals.generalData[fk])
|
||||
if (d > vectorClock)
|
||||
filteredResult[d] = JSON.parse(JSON.stringify(floGlobals.generalData[fk][d]))
|
||||
} else if (options.comment) {
|
||||
let comment = options.comment;
|
||||
delete options.comment;
|
||||
let fk = floCloudAPI.util.filterKey(type, options);
|
||||
for (let d in floGlobals.generalData[fk])
|
||||
if (d > vectorClock && floGlobals.generalData[fk][d].comment == comment)
|
||||
filteredResult[d] = JSON.parse(JSON.stringify(floGlobals.generalData[fk][d]))
|
||||
}
|
||||
if (options.decrypt) {
|
||||
let decryptionKey = (options.decrypt === true) ? raw_user.private : options.decrypt;
|
||||
if (!Array.isArray(decryptionKey))
|
||||
decryptionKey = [decryptionKey];
|
||||
for (let f in filteredResult) {
|
||||
let data = filteredResult[f]
|
||||
try {
|
||||
if (data.message instanceof Object && "secret" in data.message) {
|
||||
for (let key of decryptionKey) {
|
||||
try {
|
||||
let tmp = floCrypto.decryptData(data.message, key)
|
||||
data.message = JSON.parse(tmp)
|
||||
break;
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
getNextGeneralData[fk] = Object.keys(filteredResult).sort().pop();
|
||||
return filteredResult;
|
||||
}
|
||||
|
||||
const syncData = floDapps.syncData = {};
|
||||
|
||||
syncData.oldDevice = () => new Promise((resolve, reject) => {
|
||||
let sync = {
|
||||
contacts: user.contacts,
|
||||
pubKeys: user.pubKeys,
|
||||
messages: user.messages
|
||||
}
|
||||
let message = Crypto.AES.encrypt(JSON.stringify(sync), raw_user.private)
|
||||
let options = {
|
||||
receiverID: user.id,
|
||||
application: DEFAULT.root
|
||||
}
|
||||
floCloudAPI.sendApplicationData(message, "syncData", options)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error))
|
||||
});
|
||||
|
||||
syncData.newDevice = () => new Promise((resolve, reject) => {
|
||||
var options = {
|
||||
receiverID: user.id,
|
||||
senderID: user.id,
|
||||
application: DEFAULT.root,
|
||||
mostRecent: true,
|
||||
}
|
||||
floCloudAPI.requestApplicationData("syncData", options).then(response => {
|
||||
let vc = Object.keys(response).sort().pop()
|
||||
let sync = JSON.parse(Crypto.AES.decrypt(response[vc].message, raw_user.private))
|
||||
let promises = []
|
||||
let store = (key, val, obs) => promises.push(compactIDB.writeData(obs, val, key, user.db_name));
|
||||
["contacts", "pubKeys", "messages"].forEach(c => {
|
||||
for (let i in sync[c]) {
|
||||
store(i, sync[c][i], c)
|
||||
user[c][i] = sync[c][i]
|
||||
}
|
||||
})
|
||||
Promise.all(promises)
|
||||
.then(results => resolve("Sync data successful"))
|
||||
.catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
});
|
||||
})('object' === typeof module ? module.exports : window.floDapps = {});
|
||||
102
js/floTokenAPI.js
Normal file
102
js/floTokenAPI.js
Normal file
@ -0,0 +1,102 @@
|
||||
(function (EXPORTS) { //floTokenAPI v1.0.3c
|
||||
/* Token Operator to send/receive tokens via blockchain using API calls*/
|
||||
'use strict';
|
||||
const tokenAPI = EXPORTS;
|
||||
|
||||
const DEFAULT = {
|
||||
apiURL: floGlobals.tokenURL || "https://ranchimallflo.duckdns.org/",
|
||||
currency: floGlobals.currency || "rupee"
|
||||
}
|
||||
|
||||
Object.defineProperties(tokenAPI, {
|
||||
URL: {
|
||||
get: () => DEFAULT.apiURL
|
||||
},
|
||||
currency: {
|
||||
get: () => DEFAULT.currency,
|
||||
set: currency => DEFAULT.currency = currency
|
||||
}
|
||||
});
|
||||
|
||||
if (floGlobals.currency) tokenAPI.currency = floGlobals.currency;
|
||||
|
||||
Object.defineProperties(floGlobals, {
|
||||
currency: {
|
||||
get: () => DEFAULT.currency,
|
||||
set: currency => DEFAULT.currency = currency
|
||||
}
|
||||
});
|
||||
|
||||
const fetch_api = tokenAPI.fetch = function (apicall) {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.debug(DEFAULT.apiURL + apicall);
|
||||
fetch(DEFAULT.apiURL + apicall).then(response => {
|
||||
if (response.ok)
|
||||
response.json().then(data => resolve(data));
|
||||
else
|
||||
reject(response)
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
const getBalance = tokenAPI.getBalance = function (floID, token = DEFAULT.currency) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch_api(`api/v1.0/getFloAddressBalance?token=${token}&floAddress=${floID}`)
|
||||
.then(result => resolve(result.balance || 0))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
tokenAPI.getTx = function (txID) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch_api(`api/v1.0/getTransactionDetails/${txID}`).then(res => {
|
||||
if (res.result === "error")
|
||||
reject(res.description);
|
||||
else if (!res.parsedFloData)
|
||||
reject("Data piece (parsedFloData) missing");
|
||||
else if (!res.transactionDetails)
|
||||
reject("Data piece (transactionDetails) missing");
|
||||
else
|
||||
resolve(res);
|
||||
}).catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
tokenAPI.sendToken = function (privKey, amount, receiverID, message = "", token = DEFAULT.currency, options = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let senderID = floCrypto.getFloID(privKey);
|
||||
if (typeof amount !== "number" || isNaN(amount) || amount <= 0)
|
||||
return reject("Invalid amount");
|
||||
getBalance(senderID, token).then(bal => {
|
||||
if (amount > bal)
|
||||
return reject(`Insufficient ${token}# balance`);
|
||||
floBlockchainAPI.writeData(senderID, `send ${amount} ${token}# ${message}`, privKey, receiverID, options)
|
||||
.then(txid => resolve(txid))
|
||||
.catch(error => reject(error))
|
||||
}).catch(error => reject(error))
|
||||
});
|
||||
}
|
||||
|
||||
tokenAPI.getAllTxs = function (floID, token = DEFAULT.currency) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch_api(`api/v1.0/getFloAddressTransactions?token=${token}&floAddress=${floID}`)
|
||||
.then(result => resolve(result))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
const util = tokenAPI.util = {};
|
||||
|
||||
util.parseTxData = function (txData) {
|
||||
let parsedData = {};
|
||||
for (let p in txData.parsedFloData)
|
||||
parsedData[p] = txData.parsedFloData[p];
|
||||
parsedData.sender = txData.transactionDetails.vin[0].addr;
|
||||
for (let vout of txData.transactionDetails.vout)
|
||||
if (vout.scriptPubKey.addresses[0] !== parsedData.sender)
|
||||
parsedData.receiver = vout.scriptPubKey.addresses[0];
|
||||
parsedData.time = txData.transactionDetails.time;
|
||||
return parsedData;
|
||||
}
|
||||
|
||||
})('object' === typeof module ? module.exports : window.floTokenAPI = {});
|
||||
3718
js/index.html
Normal file
3718
js/index.html
Normal file
File diff suppressed because one or more lines are too long
618
js/main copy.js
Normal file
618
js/main copy.js
Normal file
@ -0,0 +1,618 @@
|
||||
const main = (ready) => {
|
||||
if (ready) {
|
||||
document.body.addEventListener("keydown", (e) => {
|
||||
if (e.key === "/") {
|
||||
e.preventDefault();
|
||||
searchWrapper.classList.add("open");
|
||||
let el = document.getElementById("input");
|
||||
el.focusIn();
|
||||
}
|
||||
});
|
||||
let _input = document.querySelector("#input");
|
||||
let _backBtn = document.querySelector("#logo");
|
||||
let home = document.getElementById("home");
|
||||
let searchToggle = document.getElementById("searchToggle");
|
||||
let searchOverlay = document.querySelector(".search-overlay");
|
||||
let searchWrapper = document.querySelector(".search-wrapper");
|
||||
let _getTemplate = document.getElementById("myTemplate");
|
||||
let _cardTemplate = document.getElementById("cardTemplate");
|
||||
let internRating = {};
|
||||
function getDate(time) {
|
||||
let stringTime = time + "000";
|
||||
let newTime = new Date(+stringTime).toDateString();
|
||||
return newTime;
|
||||
}
|
||||
searchToggle.addEventListener("click", () => {
|
||||
searchWrapper.classList.add("open");
|
||||
_input.focus();
|
||||
});
|
||||
searchOverlay.addEventListener("click", () => {
|
||||
searchWrapper.classList.remove("open");
|
||||
});
|
||||
/**
|
||||
* On changing the search input
|
||||
* - Update the DOM and fill the result
|
||||
* - if there is nothing set all the element to the DOM
|
||||
*/
|
||||
_input.addEventListener("input", (e) => {
|
||||
// @ts-ignore
|
||||
let val = e.target.value;
|
||||
window.location.hash = "";
|
||||
if (finalList.length !== 0) {
|
||||
const list = finalList.filter((element) => {
|
||||
let newUserName = element.name.slice(0, val.length);
|
||||
return newUserName.toLowerCase() === val.toLowerCase();
|
||||
});
|
||||
if (list.length) {
|
||||
_rootDiv.innerHTML = renderList(list);
|
||||
}
|
||||
else {
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}
|
||||
}
|
||||
else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
});
|
||||
// intern Data "const internList = []"
|
||||
//
|
||||
// Data from distributer "const distributerData = []"
|
||||
//
|
||||
// filter the transaction of interns from the distributer
|
||||
const receiverList = [];
|
||||
const internList = [];
|
||||
let finalList = [];
|
||||
customElements.define("my-card", class MyCard extends HTMLElement {
|
||||
displayUsername;
|
||||
displayUserId;
|
||||
// look all the value we have to look on change
|
||||
static get observedAttributes() {
|
||||
return ["username", "userid"];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
// attach the shadow DOM
|
||||
this.attachShadow({ mode: "open" });
|
||||
}
|
||||
get username() {
|
||||
return this.getAttribute("username");
|
||||
}
|
||||
get userid() {
|
||||
return this.getAttribute("userid");
|
||||
}
|
||||
set username(val) {
|
||||
this.setAttribute("username", val);
|
||||
}
|
||||
set userid(val) {
|
||||
this.setAttribute("userid", val);
|
||||
}
|
||||
// @ts-ignore
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (oldValue !== newValue && this.displayUsername) {
|
||||
this.displayUsername.innerText = this.username;
|
||||
this.displayUserId.innerText = this.userid;
|
||||
}
|
||||
}
|
||||
// run when the element attached to the DOM
|
||||
connectedCallback() {
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = this.render();
|
||||
const node = document.importNode(template.content, true);
|
||||
this.shadowRoot.append(node);
|
||||
// select the element from the shadow DOM and set the value
|
||||
this.displayUsername = this.shadowRoot.querySelector(".username");
|
||||
this.displayUserId = this.shadowRoot.querySelector(".userid");
|
||||
this.shadowRoot
|
||||
.querySelector("span")
|
||||
.addEventListener("click", (e) => {
|
||||
// back to the home page
|
||||
window.location.hash = "";
|
||||
_rootDiv.innerHTML = renderList();
|
||||
});
|
||||
}
|
||||
// render the element to the DOM
|
||||
render() {
|
||||
if (finalList.length) {
|
||||
let el = document.createElement("div");
|
||||
let backBtn = document.createElement("div");
|
||||
let username = document.createElement("h2");
|
||||
let floId = document.createElement("h3");
|
||||
let projectName = document.createElement("h4");
|
||||
let profile = document.createElement("div");
|
||||
let totalMoneyEarned = document.createElement("div");
|
||||
let totalNumberOfTransaction = document.createElement("div");
|
||||
const myResult = finalList.filter((l) => {
|
||||
return this.userid.slice(1) === l.floId;
|
||||
});
|
||||
myResult.forEach((r) => {
|
||||
let txData = document.createElement("ul");
|
||||
let red = document.createElement("span");
|
||||
let totalAmount = 0;
|
||||
profile.classList.add("profile");
|
||||
username.innerText = r.name;
|
||||
floId.innerText = this.userid.slice(1);
|
||||
projectName.innerText = `Project - ${r.projectName || "Intern Inactive"}`;
|
||||
totalNumberOfTransaction.innerText = `Total Number of transactions - ${r.transactions.length}`;
|
||||
username.style.textAlign = "left";
|
||||
red.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
`;
|
||||
backBtn.classList.add("back-btn");
|
||||
backBtn.append(red);
|
||||
if (r.transactions.length) {
|
||||
r.transactions.forEach((t) => {
|
||||
let amount = t.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
let senderAddress = t.transaction.vin[0].addr;
|
||||
let time = getDate(t.transaction.time);
|
||||
let li = document.createElement("li");
|
||||
li.style.margin = "1em 0em";
|
||||
totalAmount += num;
|
||||
li.innerHTML = `
|
||||
<div class="card">
|
||||
<div>₹${amount[0]}/-</div>
|
||||
<div>${time}</div>
|
||||
<h3>Transaction Detail</h3>
|
||||
<div>Message - ${t.transaction.floData}</div>
|
||||
<div>Sent from - RanchiMall Distribution Address "${senderAddress}"</div>
|
||||
<a target="_blank" href="${t.transaction.blockChainLink}">${t.transaction.blockChainLink}</a>
|
||||
</div>
|
||||
`;
|
||||
txData.appendChild(li);
|
||||
});
|
||||
}
|
||||
else {
|
||||
let li = document.createElement("div");
|
||||
li.innerText = "No Transaction Found";
|
||||
txData.appendChild(li);
|
||||
}
|
||||
totalMoneyEarned.classList.add("totalAmount");
|
||||
totalMoneyEarned.innerHTML = `
|
||||
<div>₹${totalAmount}</div>
|
||||
<div style="font-size: xx-small; text-align: right;">Total Amount Paid</div>
|
||||
`;
|
||||
let styling = document.createElement("style");
|
||||
styling.innerHTML = `
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
ul {
|
||||
padding: 0em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 1em 0em;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #64b5f6;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(var(--background-color), 1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.totalAmount {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
flex: 1 0;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.card > div:nth-of-type(1) {
|
||||
margin: 0.5em 0em;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.card > div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
width: max-content;
|
||||
background: rgba(var(--background-color), 1);
|
||||
padding: 0.4em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
`;
|
||||
el.appendChild(backBtn);
|
||||
el.appendChild(styling);
|
||||
//el.appendChild(profile);
|
||||
el.appendChild(username);
|
||||
el.appendChild(floId);
|
||||
el.appendChild(projectName);
|
||||
el.appendChild(totalMoneyEarned);
|
||||
el.appendChild(totalNumberOfTransaction);
|
||||
el.appendChild(txData);
|
||||
});
|
||||
return el.innerHTML;
|
||||
}
|
||||
}
|
||||
});
|
||||
let path = {
|
||||
current: window.location.hash || "#",
|
||||
printPath: () => { },
|
||||
};
|
||||
const _rootDiv = document.getElementById("uInfo");
|
||||
// render all the list of the use on to the DOM
|
||||
/*function renderList() {
|
||||
|
||||
if (finalList.length !== 0) {
|
||||
let el: HTMLDivElement = document.createElement("div");
|
||||
let heading: HTMLHeadElement = document.createElement("h2");
|
||||
heading.innerText = "RanchiMall Internship Blockchain Contract";
|
||||
heading.style.textAlign = "center";
|
||||
heading.style.width = "100%";
|
||||
heading.style.padding = "2em 0.5em";
|
||||
|
||||
el.appendChild(heading);
|
||||
|
||||
for (let i of finalList) {
|
||||
let card: HTMLAnchorElement = document.createElement("div");
|
||||
let link = document.createElement("a");
|
||||
|
||||
link.innerText =
|
||||
i.transactions[0].transaction.blockChainLink;
|
||||
link.href = i.transactions[0].transaction.blockChainLink;
|
||||
link.target = "_blank";
|
||||
link.style.marginTop = "0em";
|
||||
|
||||
card.classList.add("card");
|
||||
card.href = `#${i.floId}`;
|
||||
let amount = i.transactions[0].transaction.floData.match(
|
||||
/([0-9]+)/
|
||||
);
|
||||
card.innerHTML = `
|
||||
<a href="#${i.floId}" style="position: relative;">
|
||||
<div class="profile"></div>
|
||||
<h3>${i.name}</h3>
|
||||
<h5>${i.floId}</h5>
|
||||
<h5>Total amount paid: ₹${i.totalMoneyEarned}</h5>
|
||||
<h5>Total no. of transaction: ${i.transactions.length
|
||||
}</h5>
|
||||
<div class="last-tx">
|
||||
<div>Last transaction </div>
|
||||
<div class="last-tx-content">
|
||||
<div>${getDate(
|
||||
i.transactions[0].transaction.time
|
||||
)}</div>
|
||||
<div style="font-size: 2em; padding: 0.5em 0em;">₹${amount[0]
|
||||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>${internRating[i.floId]}</div>
|
||||
</a>
|
||||
<div style="margin: 0.5em 0em;">View last payment blockchain</div>
|
||||
<a target="_blank" href="${i.transactions[0].transaction.blockChainLink
|
||||
}">${i.transactions[0].transaction.blockChainLink}</a>
|
||||
`;
|
||||
el.appendChild(card);
|
||||
}
|
||||
return el.innerHTML;
|
||||
} else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
}*/
|
||||
function renderList(data) {
|
||||
// check if the finallist have any length
|
||||
if (data.length !== 0) {
|
||||
// get the template from the DOM
|
||||
// get the deep copy the template
|
||||
let node = _getTemplate.content.cloneNode(true);
|
||||
for (let i of data) {
|
||||
let amount = i.transactions[0].transaction.floData.match(/([0-9]+)/);
|
||||
//
|
||||
let cardNode = _cardTemplate.content.cloneNode(true);
|
||||
cardNode.querySelector(".link").href = `#${i.floId}`;
|
||||
cardNode.querySelector(".heading-name").textContent =
|
||||
i.name;
|
||||
cardNode.querySelector(".heading-floId").textContent =
|
||||
i.floId;
|
||||
cardNode.querySelector(".total-money-earned").textContent = `Total amount paid: ₹${i.totalMoneyEarned}`;
|
||||
cardNode.querySelector(".number-of-transaction").textContent = `Total number of transactions: ${i.transactions.length}`;
|
||||
cardNode.querySelector(".last-tx-content").textContent = getDate(i.transactions[0].transaction.time);
|
||||
cardNode.querySelector(".last-tx-amount").textContent = `₹${amount[0]}/-`;
|
||||
cardNode.querySelector(".intern-rating").textContent =
|
||||
internRating[i.floId];
|
||||
cardNode.querySelector(".blockchain-link").href =
|
||||
i.transactions[0].transaction.blockChainLink;
|
||||
node.querySelector(".card-wrapper").appendChild(cardNode);
|
||||
}
|
||||
let el = document.createElement("div");
|
||||
el.appendChild(node);
|
||||
return el.innerHTML;
|
||||
}
|
||||
else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
}
|
||||
// render the details page
|
||||
function renderDetail() {
|
||||
return `
|
||||
<my-card username="red" style="
|
||||
flex: 1;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
" userid="${window.location.hash}"></my-card>
|
||||
`;
|
||||
}
|
||||
let routes = {
|
||||
"#": renderList(finalList),
|
||||
"#detail": renderDetail(),
|
||||
};
|
||||
/**
|
||||
* Run when there is change of hash on the window
|
||||
* - get the first value from the routes object
|
||||
* - check the value is matching to the comming route value
|
||||
* - if so, render the home page otherwise detail page
|
||||
*/
|
||||
const handleRender = (route) => {
|
||||
// ...
|
||||
let val = Object.keys(routes)[0];
|
||||
if (val === route) {
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}
|
||||
else {
|
||||
_rootDiv.innerHTML = renderDetail();
|
||||
}
|
||||
};
|
||||
// check the change in hash
|
||||
window.addEventListener("hashchange", (e) => {
|
||||
// get the current path
|
||||
path.current = window.location.hash || "#";
|
||||
/**
|
||||
* @param always be the path of the window
|
||||
*/
|
||||
handleRender(path.current);
|
||||
});
|
||||
// render the home page default
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
// Go the home page
|
||||
_backBtn.addEventListener("click", () => {
|
||||
window.location.hash = "";
|
||||
_rootDiv.innerHTML = renderList();
|
||||
});
|
||||
/**
|
||||
* Creating a list in which store all the
|
||||
* flo addresses of the receiver
|
||||
*/
|
||||
/**
|
||||
* get the intern data from the RanchiMall
|
||||
* - request the server for data
|
||||
* - loop over the response
|
||||
* - push the each data to the "finalList arrary"
|
||||
* - call the fetchInternData()
|
||||
*/
|
||||
async function getInternData() {
|
||||
try {
|
||||
let r = await floCloudAPI.requestObjectData("RIBC", {
|
||||
application: "InternManage",
|
||||
receiverID: "FMyRTrz9CG4TFNM6rCQgy3VQ5NF23bY2xD",
|
||||
senderIDs: [
|
||||
"F7TxecSPV8oFZE6Y2giVuP8hfsqfAD6erj",
|
||||
"FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX",
|
||||
"FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd",
|
||||
"FS4jMAcSimRMrhoRhk5cjuJERS2otiwq4A",
|
||||
"FU2fkubqGD5ynbr7qhvaPe9DPqrNdGB6mw",
|
||||
"FUkY9k9mVVxPzYA8uUGxUuLVH6CB83Nb9r",
|
||||
],
|
||||
});
|
||||
if (r) {
|
||||
let i = floGlobals.appObjects.RIBC.internList;
|
||||
for (let key in i) {
|
||||
internList.push({
|
||||
floId: key,
|
||||
floUserName: i[key],
|
||||
});
|
||||
}
|
||||
// fetch all the data and pack together
|
||||
fetchInternData();
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
// ERROR HANDLING
|
||||
console.log("Error Occur while fetching the Intern Data", e);
|
||||
_rootDiv.innerHTML = `
|
||||
<div style="flex: 1; padding: 1em;">
|
||||
<h1>Something Went Wrong [keep Refreshing the page ...]</h1>
|
||||
<p style="color: red;">${e}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
function bundleAllData() {
|
||||
// get the internList from the server
|
||||
let internList = floGlobals.appObjects.RIBC.internList;
|
||||
internRating = floGlobals.appObjects.RIBC.internRating;
|
||||
// get the intern Assigned project from the server
|
||||
// get the value of internAssigned project
|
||||
let internsAssigned = floGlobals.appObjects.RIBC.internsAssigned;
|
||||
const internsAssignedArr = Object.entries(internsAssigned);
|
||||
// get the project details from the server
|
||||
let projectDetails = floGlobals.appObjects.RIBC.projectDetails;
|
||||
// set the tragetList
|
||||
let tragetList = [];
|
||||
// loop over the intern data
|
||||
for (let internId in internList) {
|
||||
// loop over the intern assigned project so we get the
|
||||
// associated projects
|
||||
for (let [k, v] of internsAssignedArr) {
|
||||
// find the value have correct key
|
||||
let value = v.find((el) => {
|
||||
return el === internId;
|
||||
});
|
||||
// if we find a value find its project Details also
|
||||
if (value) {
|
||||
// loop over the project details
|
||||
for (let i in projectDetails) {
|
||||
// find out the key by the slicing it
|
||||
let key = k.slice(0, 14);
|
||||
// get the value
|
||||
let newVal = projectDetails[key];
|
||||
// send it ot targetList
|
||||
tragetList.push({
|
||||
internId: internId,
|
||||
project: k,
|
||||
projectName: newVal.projectName,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// loop over to the finalList to attach the projectName
|
||||
for (let key in tragetList) {
|
||||
// get the internId from the tragetList
|
||||
let val = tragetList[key].internId;
|
||||
// get the index out of that
|
||||
let index = finalList.findIndex((el) => el.floId === val);
|
||||
// if it exists
|
||||
if (index > -1) {
|
||||
finalList[index].projectName = tragetList[key].projectName;
|
||||
}
|
||||
}
|
||||
for (let index of finalList) {
|
||||
let totalAmount = 0;
|
||||
/*finalList[index].transactions.forEach((intern) => {
|
||||
let amount = intern.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
totalAmount += num;
|
||||
});
|
||||
finalList[index].totalMoneyEarned = totalAmount;*/
|
||||
}
|
||||
/**
|
||||
* Loop over the final List to get the totalAmount
|
||||
*/
|
||||
finalList.forEach((list) => {
|
||||
let totalAmount = 0;
|
||||
list.transactions.forEach((intern) => {
|
||||
let amount = intern.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
totalAmount += num;
|
||||
// add the blockChainLink key
|
||||
//intern.transaction.blockChainLink = `https://livenet.flocha.in/block/${intern.transaction.blockhash}`;
|
||||
intern.transaction.blockChainLink = `https://livenet.flocha.in/tx/${intern.transaction.txid}`;
|
||||
});
|
||||
const transactionsDetails = list.transactions.sort((first, second) => {
|
||||
return second.transaction.time - first.transaction.time;
|
||||
});
|
||||
list.totalMoneyEarned = totalAmount;
|
||||
list.transactions = transactionsDetails;
|
||||
});
|
||||
const myArr = finalList.sort((first, second) => {
|
||||
return (second.transactions[0].transaction.time -
|
||||
first.transactions[0].transaction.time);
|
||||
});
|
||||
finalList = myArr;
|
||||
}
|
||||
// get the internData after the 3sec I don't know why
|
||||
setTimeout(() => {
|
||||
getInternData();
|
||||
}, 1000);
|
||||
/**
|
||||
* Fetch initial transactions
|
||||
* - request the distributer transactions from the server
|
||||
* - push all these transactions to the "receiverList array"
|
||||
* - then loop over to the interList array in which we collect interns data
|
||||
* - filter out the transactions of the intern from the distributer transactions
|
||||
* - push all the data to the new called finalList array
|
||||
* - render the home page to the DOM
|
||||
*/
|
||||
function fetchInternData() {
|
||||
floBlockchainAPI
|
||||
.readAllTxs("FThgnJLcuStugLc24FJQggmp2WgaZjrBSn", "", "")
|
||||
.then((r) => {
|
||||
// loop over the response transactions
|
||||
r.forEach((user) => {
|
||||
// sending all the transaction to the new array
|
||||
receiverList.push({
|
||||
floId: user.vout[0].scriptPubKey.addresses[0],
|
||||
transaction: user,
|
||||
});
|
||||
});
|
||||
// loop over the intern data
|
||||
for (let d of internList) {
|
||||
// filter the intern transactions
|
||||
const result = receiverList.filter((i) => {
|
||||
return i.floId === d.floId;
|
||||
});
|
||||
// check if the transaction are available
|
||||
if (result.length) {
|
||||
// add all the transaction to the new Array
|
||||
finalList.push({
|
||||
name: d.floUserName,
|
||||
floId: d.floId,
|
||||
transactions: [...result],
|
||||
});
|
||||
}
|
||||
}
|
||||
bundleAllData();
|
||||
// re-render the DOM
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}, console.error);
|
||||
}
|
||||
}
|
||||
};
|
||||
618
js/main.js
618
js/main.js
@ -1,618 +0,0 @@
|
||||
const main = (ready) => {
|
||||
if (ready) {
|
||||
document.body.addEventListener("keydown", (e) => {
|
||||
if (e.key === "/") {
|
||||
e.preventDefault();
|
||||
searchWrapper.classList.add("open");
|
||||
let el = document.getElementById("input");
|
||||
el.focusIn();
|
||||
}
|
||||
});
|
||||
let _input = document.querySelector("#input");
|
||||
let _backBtn = document.querySelector("#logo");
|
||||
let home = document.getElementById("home");
|
||||
let searchToggle = document.getElementById("searchToggle");
|
||||
let searchOverlay = document.querySelector(".search-overlay");
|
||||
let searchWrapper = document.querySelector(".search-wrapper");
|
||||
let _getTemplate = document.getElementById("myTemplate");
|
||||
let _cardTemplate = document.getElementById("cardTemplate");
|
||||
let internRating = {};
|
||||
function getDate(time) {
|
||||
let stringTime = time + "000";
|
||||
let newTime = new Date(+stringTime).toDateString();
|
||||
return newTime;
|
||||
}
|
||||
searchToggle.addEventListener("click", () => {
|
||||
searchWrapper.classList.add("open");
|
||||
_input.focus();
|
||||
});
|
||||
searchOverlay.addEventListener("click", () => {
|
||||
searchWrapper.classList.remove("open");
|
||||
});
|
||||
/**
|
||||
* On changing the search input
|
||||
* - Update the DOM and fill the result
|
||||
* - if there is nothing set all the element to the DOM
|
||||
*/
|
||||
_input.addEventListener("input", (e) => {
|
||||
// @ts-ignore
|
||||
let val = e.target.value;
|
||||
window.location.hash = "";
|
||||
if (finalList.length !== 0) {
|
||||
const list = finalList.filter((element) => {
|
||||
let newUserName = element.name.slice(0, val.length);
|
||||
return newUserName.toLowerCase() === val.toLowerCase();
|
||||
});
|
||||
if (list.length) {
|
||||
_rootDiv.innerHTML = renderList(list);
|
||||
}
|
||||
else {
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}
|
||||
}
|
||||
else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
});
|
||||
// intern Data "const internList = []"
|
||||
//
|
||||
// Data from distributer "const distributerData = []"
|
||||
//
|
||||
// filter the transaction of interns from the distributer
|
||||
const receiverList = [];
|
||||
const internList = [];
|
||||
let finalList = [];
|
||||
customElements.define("my-card", class MyCard extends HTMLElement {
|
||||
displayUsername;
|
||||
displayUserId;
|
||||
// look all the value we have to look on change
|
||||
static get observedAttributes() {
|
||||
return ["username", "userid"];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
// attach the shadow DOM
|
||||
this.attachShadow({ mode: "open" });
|
||||
}
|
||||
get username() {
|
||||
return this.getAttribute("username");
|
||||
}
|
||||
get userid() {
|
||||
return this.getAttribute("userid");
|
||||
}
|
||||
set username(val) {
|
||||
this.setAttribute("username", val);
|
||||
}
|
||||
set userid(val) {
|
||||
this.setAttribute("userid", val);
|
||||
}
|
||||
// @ts-ignore
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (oldValue !== newValue && this.displayUsername) {
|
||||
this.displayUsername.innerText = this.username;
|
||||
this.displayUserId.innerText = this.userid;
|
||||
}
|
||||
}
|
||||
// run when the element attached to the DOM
|
||||
connectedCallback() {
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = this.render();
|
||||
const node = document.importNode(template.content, true);
|
||||
this.shadowRoot.append(node);
|
||||
// select the element from the shadow DOM and set the value
|
||||
this.displayUsername = this.shadowRoot.querySelector(".username");
|
||||
this.displayUserId = this.shadowRoot.querySelector(".userid");
|
||||
this.shadowRoot
|
||||
.querySelector("span")
|
||||
.addEventListener("click", (e) => {
|
||||
// back to the home page
|
||||
window.location.hash = "";
|
||||
_rootDiv.innerHTML = renderList();
|
||||
});
|
||||
}
|
||||
// render the element to the DOM
|
||||
render() {
|
||||
if (finalList.length) {
|
||||
let el = document.createElement("div");
|
||||
let backBtn = document.createElement("div");
|
||||
let username = document.createElement("h2");
|
||||
let floId = document.createElement("h3");
|
||||
let projectName = document.createElement("h4");
|
||||
let profile = document.createElement("div");
|
||||
let totalMoneyEarned = document.createElement("div");
|
||||
let totalNumberOfTransaction = document.createElement("div");
|
||||
const myResult = finalList.filter((l) => {
|
||||
return this.userid.slice(1) === l.floId;
|
||||
});
|
||||
myResult.forEach((r) => {
|
||||
let txData = document.createElement("ul");
|
||||
let red = document.createElement("span");
|
||||
let totalAmount = 0;
|
||||
profile.classList.add("profile");
|
||||
username.innerText = r.name;
|
||||
floId.innerText = this.userid.slice(1);
|
||||
projectName.innerText = `Project - ${r.projectName || "Intern Inactive"}`;
|
||||
totalNumberOfTransaction.innerText = `Total Number of transactions - ${r.transactions.length}`;
|
||||
username.style.textAlign = "left";
|
||||
red.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
`;
|
||||
backBtn.classList.add("back-btn");
|
||||
backBtn.append(red);
|
||||
if (r.transactions.length) {
|
||||
r.transactions.forEach((t) => {
|
||||
let amount = t.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
let senderAddress = t.transaction.vin[0].addr;
|
||||
let time = getDate(t.transaction.time);
|
||||
let li = document.createElement("li");
|
||||
li.style.margin = "1em 0em";
|
||||
totalAmount += num;
|
||||
li.innerHTML = `
|
||||
<div class="card">
|
||||
<div>₹${amount[0]}/-</div>
|
||||
<div>${time}</div>
|
||||
<h3>Transaction Detail</h3>
|
||||
<div>Message - ${t.transaction.floData}</div>
|
||||
<div>Sent from - RanchiMall Distribution Address "${senderAddress}"</div>
|
||||
<a target="_blank" href="${t.transaction.blockChainLink}">${t.transaction.blockChainLink}</a>
|
||||
</div>
|
||||
`;
|
||||
txData.appendChild(li);
|
||||
});
|
||||
}
|
||||
else {
|
||||
let li = document.createElement("div");
|
||||
li.innerText = "No Transaction Found";
|
||||
txData.appendChild(li);
|
||||
}
|
||||
totalMoneyEarned.classList.add("totalAmount");
|
||||
totalMoneyEarned.innerHTML = `
|
||||
<div>₹${totalAmount}</div>
|
||||
<div style="font-size: xx-small; text-align: right;">Total Amount Paid</div>
|
||||
`;
|
||||
let styling = document.createElement("style");
|
||||
styling.innerHTML = `
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
ul {
|
||||
padding: 0em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 1em 0em;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #64b5f6;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(var(--background-color), 1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.totalAmount {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
flex: 1 0;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.card > div:nth-of-type(1) {
|
||||
margin: 0.5em 0em;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.card > div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
width: max-content;
|
||||
background: rgba(var(--background-color), 1);
|
||||
padding: 0.4em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
`;
|
||||
el.appendChild(backBtn);
|
||||
el.appendChild(styling);
|
||||
//el.appendChild(profile);
|
||||
el.appendChild(username);
|
||||
el.appendChild(floId);
|
||||
el.appendChild(projectName);
|
||||
el.appendChild(totalMoneyEarned);
|
||||
el.appendChild(totalNumberOfTransaction);
|
||||
el.appendChild(txData);
|
||||
});
|
||||
return el.innerHTML;
|
||||
}
|
||||
}
|
||||
});
|
||||
let path = {
|
||||
current: window.location.hash || "#",
|
||||
printPath: () => { },
|
||||
};
|
||||
const _rootDiv = document.getElementById("uInfo");
|
||||
// render all the list of the use on to the DOM
|
||||
/*function renderList() {
|
||||
|
||||
if (finalList.length !== 0) {
|
||||
let el: HTMLDivElement = document.createElement("div");
|
||||
let heading: HTMLHeadElement = document.createElement("h2");
|
||||
heading.innerText = "RanchiMall Internship Blockchain Contract";
|
||||
heading.style.textAlign = "center";
|
||||
heading.style.width = "100%";
|
||||
heading.style.padding = "2em 0.5em";
|
||||
|
||||
el.appendChild(heading);
|
||||
|
||||
for (let i of finalList) {
|
||||
let card: HTMLAnchorElement = document.createElement("div");
|
||||
let link = document.createElement("a");
|
||||
|
||||
link.innerText =
|
||||
i.transactions[0].transaction.blockChainLink;
|
||||
link.href = i.transactions[0].transaction.blockChainLink;
|
||||
link.target = "_blank";
|
||||
link.style.marginTop = "0em";
|
||||
|
||||
card.classList.add("card");
|
||||
card.href = `#${i.floId}`;
|
||||
let amount = i.transactions[0].transaction.floData.match(
|
||||
/([0-9]+)/
|
||||
);
|
||||
card.innerHTML = `
|
||||
<a href="#${i.floId}" style="position: relative;">
|
||||
<div class="profile"></div>
|
||||
<h3>${i.name}</h3>
|
||||
<h5>${i.floId}</h5>
|
||||
<h5>Total amount paid: ₹${i.totalMoneyEarned}</h5>
|
||||
<h5>Total no. of transaction: ${i.transactions.length
|
||||
}</h5>
|
||||
<div class="last-tx">
|
||||
<div>Last transaction </div>
|
||||
<div class="last-tx-content">
|
||||
<div>${getDate(
|
||||
i.transactions[0].transaction.time
|
||||
)}</div>
|
||||
<div style="font-size: 2em; padding: 0.5em 0em;">₹${amount[0]
|
||||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>${internRating[i.floId]}</div>
|
||||
</a>
|
||||
<div style="margin: 0.5em 0em;">View last payment blockchain</div>
|
||||
<a target="_blank" href="${i.transactions[0].transaction.blockChainLink
|
||||
}">${i.transactions[0].transaction.blockChainLink}</a>
|
||||
`;
|
||||
el.appendChild(card);
|
||||
}
|
||||
return el.innerHTML;
|
||||
} else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
}*/
|
||||
function renderList(data) {
|
||||
// check if the finallist have any length
|
||||
if (data.length !== 0) {
|
||||
// get the template from the DOM
|
||||
// get the deep copy the template
|
||||
let node = _getTemplate.content.cloneNode(true);
|
||||
for (let i of data) {
|
||||
let amount = i.transactions[0].transaction.floData.match(/([0-9]+)/);
|
||||
//
|
||||
let cardNode = _cardTemplate.content.cloneNode(true);
|
||||
cardNode.querySelector(".link").href = `#${i.floId}`;
|
||||
cardNode.querySelector(".heading-name").textContent =
|
||||
i.name;
|
||||
cardNode.querySelector(".heading-floId").textContent =
|
||||
i.floId;
|
||||
cardNode.querySelector(".total-money-earned").textContent = `Total amount paid: ₹${i.totalMoneyEarned}`;
|
||||
cardNode.querySelector(".number-of-transaction").textContent = `Total number of transactions: ${i.transactions.length}`;
|
||||
cardNode.querySelector(".last-tx-content").textContent = getDate(i.transactions[0].transaction.time);
|
||||
cardNode.querySelector(".last-tx-amount").textContent = `₹${amount[0]}/-`;
|
||||
cardNode.querySelector(".intern-rating").textContent =
|
||||
internRating[i.floId];
|
||||
cardNode.querySelector(".blockchain-link").href =
|
||||
i.transactions[0].transaction.blockChainLink;
|
||||
node.querySelector(".card-wrapper").appendChild(cardNode);
|
||||
}
|
||||
let el = document.createElement("div");
|
||||
el.appendChild(node);
|
||||
return el.innerHTML;
|
||||
}
|
||||
else {
|
||||
return `
|
||||
<h1 style="
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 50vh;
|
||||
">Loading...</h1>
|
||||
`;
|
||||
}
|
||||
}
|
||||
// render the details page
|
||||
function renderDetail() {
|
||||
return `
|
||||
<my-card username="red" style="
|
||||
flex: 1;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
" userid="${window.location.hash}"></my-card>
|
||||
`;
|
||||
}
|
||||
let routes = {
|
||||
"#": renderList(finalList),
|
||||
"#detail": renderDetail(),
|
||||
};
|
||||
/**
|
||||
* Run when there is change of hash on the window
|
||||
* - get the first value from the routes object
|
||||
* - check the value is matching to the comming route value
|
||||
* - if so, render the home page otherwise detail page
|
||||
*/
|
||||
const handleRender = (route) => {
|
||||
// ...
|
||||
let val = Object.keys(routes)[0];
|
||||
if (val === route) {
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}
|
||||
else {
|
||||
_rootDiv.innerHTML = renderDetail();
|
||||
}
|
||||
};
|
||||
// check the change in hash
|
||||
window.addEventListener("hashchange", (e) => {
|
||||
// get the current path
|
||||
path.current = window.location.hash || "#";
|
||||
/**
|
||||
* @param always be the path of the window
|
||||
*/
|
||||
handleRender(path.current);
|
||||
});
|
||||
// render the home page default
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
// Go the home page
|
||||
_backBtn.addEventListener("click", () => {
|
||||
window.location.hash = "";
|
||||
_rootDiv.innerHTML = renderList();
|
||||
});
|
||||
/**
|
||||
* Creating a list in which store all the
|
||||
* flo addresses of the receiver
|
||||
*/
|
||||
/**
|
||||
* get the intern data from the RanchiMall
|
||||
* - request the server for data
|
||||
* - loop over the response
|
||||
* - push the each data to the "finalList arrary"
|
||||
* - call the fetchInternData()
|
||||
*/
|
||||
async function getInternData() {
|
||||
try {
|
||||
let r = await floCloudAPI.requestObjectData("RIBC", {
|
||||
application: "RIBC",
|
||||
receiverID: "FMeiptdJNtYQEtzyYAVNP8fjsDJ1i4EPfE",
|
||||
senderIDs: [
|
||||
"F7TxecSPV8oFZE6Y2giVuP8hfsqfAD6erj",
|
||||
"FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX",
|
||||
"FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd",
|
||||
"FS4jMAcSimRMrhoRhk5cjuJERS2otiwq4A",
|
||||
"FU2fkubqGD5ynbr7qhvaPe9DPqrNdGB6mw",
|
||||
"FUkY9k9mVVxPzYA8uUGxUuLVH6CB83Nb9r",
|
||||
],
|
||||
});
|
||||
if (r) {
|
||||
let i = floGlobals.appObjects.RIBC.internList;
|
||||
for (let key in i) {
|
||||
internList.push({
|
||||
floId: key,
|
||||
floUserName: i[key],
|
||||
});
|
||||
}
|
||||
// fetch all the data and pack together
|
||||
fetchInternData();
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
// ERROR HANDLING
|
||||
console.log("Error Occur while fetching the Intern Data", e);
|
||||
_rootDiv.innerHTML = `
|
||||
<div style="flex: 1; padding: 1em;">
|
||||
<h1>Something Went Wrong [keep Refreshing the page ...]</h1>
|
||||
<p style="color: red;">${e}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
function bundleAllData() {
|
||||
// get the internList from the server
|
||||
let internList = floGlobals.appObjects.RIBC.internList;
|
||||
internRating = floGlobals.appObjects.RIBC.internRating;
|
||||
// get the intern Assigned project from the server
|
||||
// get the value of internAssigned project
|
||||
let internsAssigned = floGlobals.appObjects.RIBC.internsAssigned;
|
||||
const internsAssignedArr = Object.entries(internsAssigned);
|
||||
// get the project details from the server
|
||||
let projectDetails = floGlobals.appObjects.RIBC.projectDetails;
|
||||
// set the tragetList
|
||||
let tragetList = [];
|
||||
// loop over the intern data
|
||||
for (let internId in internList) {
|
||||
// loop over the intern assigned project so we get the
|
||||
// associated projects
|
||||
for (let [k, v] of internsAssignedArr) {
|
||||
// find the value have correct key
|
||||
let value = v.find((el) => {
|
||||
return el === internId;
|
||||
});
|
||||
// if we find a value find its project Details also
|
||||
if (value) {
|
||||
// loop over the project details
|
||||
for (let i in projectDetails) {
|
||||
// find out the key by the slicing it
|
||||
let key = k.slice(0, 14);
|
||||
// get the value
|
||||
let newVal = projectDetails[key];
|
||||
// send it ot targetList
|
||||
tragetList.push({
|
||||
internId: internId,
|
||||
project: k,
|
||||
projectName: newVal.projectName,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// loop over to the finalList to attach the projectName
|
||||
for (let key in tragetList) {
|
||||
// get the internId from the tragetList
|
||||
let val = tragetList[key].internId;
|
||||
// get the index out of that
|
||||
let index = finalList.findIndex((el) => el.floId === val);
|
||||
// if it exists
|
||||
if (index > -1) {
|
||||
finalList[index].projectName = tragetList[key].projectName;
|
||||
}
|
||||
}
|
||||
for (let index of finalList) {
|
||||
let totalAmount = 0;
|
||||
/*finalList[index].transactions.forEach((intern) => {
|
||||
let amount = intern.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
totalAmount += num;
|
||||
});
|
||||
finalList[index].totalMoneyEarned = totalAmount;*/
|
||||
}
|
||||
/**
|
||||
* Loop over the final List to get the totalAmount
|
||||
*/
|
||||
finalList.forEach((list) => {
|
||||
let totalAmount = 0;
|
||||
list.transactions.forEach((intern) => {
|
||||
let amount = intern.transaction.floData.match(/([0-9]+)/);
|
||||
let num = Number(amount[0]);
|
||||
totalAmount += num;
|
||||
// add the blockChainLink key
|
||||
//intern.transaction.blockChainLink = `https://livenet.flocha.in/block/${intern.transaction.blockhash}`;
|
||||
intern.transaction.blockChainLink = `https://livenet.flocha.in/tx/${intern.transaction.txid}`;
|
||||
});
|
||||
const transactionsDetails = list.transactions.sort((first, second) => {
|
||||
return second.transaction.time - first.transaction.time;
|
||||
});
|
||||
list.totalMoneyEarned = totalAmount;
|
||||
list.transactions = transactionsDetails;
|
||||
});
|
||||
const myArr = finalList.sort((first, second) => {
|
||||
return (second.transactions[0].transaction.time -
|
||||
first.transactions[0].transaction.time);
|
||||
});
|
||||
finalList = myArr;
|
||||
}
|
||||
// get the internData after the 3sec I don't know why
|
||||
setTimeout(() => {
|
||||
getInternData();
|
||||
}, 1000);
|
||||
/**
|
||||
* Fetch initial transactions
|
||||
* - request the distributer transactions from the server
|
||||
* - push all these transactions to the "receiverList array"
|
||||
* - then loop over to the interList array in which we collect interns data
|
||||
* - filter out the transactions of the intern from the distributer transactions
|
||||
* - push all the data to the new called finalList array
|
||||
* - render the home page to the DOM
|
||||
*/
|
||||
function fetchInternData() {
|
||||
floBlockchainAPI
|
||||
.readAllTxs("FThgnJLcuStugLc24FJQggmp2WgaZjrBSn", "", "")
|
||||
.then((r) => {
|
||||
// loop over the response transactions
|
||||
r.forEach((user) => {
|
||||
// sending all the transaction to the new array
|
||||
receiverList.push({
|
||||
floId: user.vout[0].scriptPubKey.addresses[0],
|
||||
transaction: user,
|
||||
});
|
||||
});
|
||||
// loop over the intern data
|
||||
for (let d of internList) {
|
||||
// filter the intern transactions
|
||||
const result = receiverList.filter((i) => {
|
||||
return i.floId === d.floId;
|
||||
});
|
||||
// check if the transaction are available
|
||||
if (result.length) {
|
||||
// add all the transaction to the new Array
|
||||
finalList.push({
|
||||
name: d.floUserName,
|
||||
floId: d.floId,
|
||||
transactions: [...result],
|
||||
});
|
||||
}
|
||||
}
|
||||
bundleAllData();
|
||||
// re-render the DOM
|
||||
_rootDiv.innerHTML = renderList(finalList);
|
||||
}, console.error);
|
||||
}
|
||||
}
|
||||
};
|
||||
544
js/main_UI.js
544
js/main_UI.js
@ -1,29 +1,21 @@
|
||||
"use strict";
|
||||
// Global variables
|
||||
const appPages = ['dashboard', 'settings'];
|
||||
const domRefs = {};
|
||||
let timerId;
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// Global variables
|
||||
const { html, render: renderElem } = uhtml;
|
||||
//Checks for internet connection status
|
||||
if (!navigator.onLine)
|
||||
notify(
|
||||
"There seems to be a problem connecting to the internet, Please check you internet connection.",
|
||||
"error",
|
||||
{ sound: true }
|
||||
);
|
||||
window.addEventListener("offline", () => {
|
||||
notify(
|
||||
"There seems to be a problem connecting to the internet, Please check you internet connection.",
|
||||
"error",
|
||||
{ pinned: true, sound: true }
|
||||
);
|
||||
});
|
||||
window.addEventListener("online", () => {
|
||||
getRef("notification_drawer").clearAll();
|
||||
notify("We are back online.", "success");
|
||||
});
|
||||
floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
|
||||
window.addEventListener('offline', () => {
|
||||
floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
|
||||
})
|
||||
window.addEventListener('online', () => {
|
||||
getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
|
||||
notify('We are back online.', 'success')
|
||||
})
|
||||
|
||||
// Use instead of document.getElementById
|
||||
const domRefs = {};
|
||||
function getRef(elementId) {
|
||||
if (!domRefs.hasOwnProperty(elementId)) {
|
||||
domRefs[elementId] = {
|
||||
@ -43,22 +35,6 @@ function getRef(elementId) {
|
||||
}
|
||||
}
|
||||
|
||||
// returns dom with specified element
|
||||
function createElement(tagName, options) {
|
||||
const { className, textContent, innerHTML, attributes = {} } = options
|
||||
const elem = document.createElement(tagName)
|
||||
for (let attribute in attributes) {
|
||||
elem.setAttribute(attribute, attributes[attribute])
|
||||
}
|
||||
if (className)
|
||||
elem.className = className
|
||||
if (textContent)
|
||||
elem.textContent = textContent
|
||||
if (innerHTML)
|
||||
elem.innerHTML = innerHTML
|
||||
return elem
|
||||
}
|
||||
|
||||
// Use when a function needs to be executed after user finishes changes
|
||||
const debounce = (callback, wait) => {
|
||||
let timeoutId = null;
|
||||
@ -70,170 +46,99 @@ const debounce = (callback, wait) => {
|
||||
};
|
||||
}
|
||||
|
||||
// Limits the rate of function execution
|
||||
function throttle(func, delay) {
|
||||
// If setTimeout is already scheduled, no need to do anything
|
||||
if (timerId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Schedule a setTimeout after delay seconds
|
||||
timerId = setTimeout(function () {
|
||||
func();
|
||||
|
||||
// Once setTimeout function execution is finished, timerId = undefined so that in
|
||||
// the next scroll event function execution can be scheduled by the setTimeout
|
||||
timerId = undefined;
|
||||
}, delay);
|
||||
}
|
||||
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
}
|
||||
push(element) {
|
||||
this.items.push(element);
|
||||
}
|
||||
pop() {
|
||||
if (this.items.length == 0)
|
||||
return "Underflow";
|
||||
return this.items.pop();
|
||||
}
|
||||
peek() {
|
||||
return this.items[this.items.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
// function required for popups or modals to appear
|
||||
function showPopup(popupId, pinned) {
|
||||
zIndex++
|
||||
getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
|
||||
popupStack = getRef(popupId).show({ pinned, popupStack })
|
||||
return getRef(popupId);
|
||||
}
|
||||
|
||||
// hides the popup or modal
|
||||
function hidePopup() {
|
||||
if (popupStack.peek() === undefined)
|
||||
return;
|
||||
popupStack.peek().popup.hide()
|
||||
}
|
||||
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
const getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
|
||||
return new Promise(resolve => {
|
||||
showPopup('confirmation_popup', true)
|
||||
getRef('confirm_title').textContent = title;
|
||||
getRef('confirm_message').textContent = message;
|
||||
let cancelButton = getRef('confirmation_popup').children[2].children[0],
|
||||
submitButton = getRef('confirmation_popup').children[2].children[1]
|
||||
submitButton.textContent = confirmText
|
||||
cancelButton.textContent = cancelText
|
||||
submitButton.onclick = () => {
|
||||
hidePopup()
|
||||
resolve(true);
|
||||
}
|
||||
cancelButton.onclick = () => {
|
||||
hidePopup()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// displays a popup for asking user input. Use this instead of JS prompt
|
||||
async function getPromptInput(title, message = '', isPassword = true, cancelText = 'Cancel', confirmText = 'OK') {
|
||||
showPopup('prompt_popup', true)
|
||||
getRef('prompt_title').textContent = title;
|
||||
let input = getRef('prompt_input');
|
||||
input.setAttribute("placeholder", message)
|
||||
let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
|
||||
if (isPassword)
|
||||
input.setAttribute("type", "text")
|
||||
else
|
||||
input.setAttribute("type", "password")
|
||||
input.focusIn()
|
||||
buttons[0].textContent = cancelText;
|
||||
buttons[1].textContent = confirmText;
|
||||
return new Promise((resolve, reject) => {
|
||||
buttons[0].onclick = () => {
|
||||
hidePopup()
|
||||
return;
|
||||
}
|
||||
buttons[1].onclick = () => {
|
||||
let value = input.value;
|
||||
hidePopup()
|
||||
resolve(value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
||||
function notify(message, mode, options = {}) {
|
||||
const { pinned = false, sound = false } = options
|
||||
let icon
|
||||
switch (mode) {
|
||||
case 'success':
|
||||
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="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
|
||||
icon = `<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
|
||||
break;
|
||||
case 'error':
|
||||
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="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
|
||||
icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
|
||||
options.pinned = true
|
||||
break;
|
||||
}
|
||||
getRef("notification_drawer").push(message, { pinned, icon });
|
||||
if (navigator.onLine && sound) {
|
||||
getRef("notification_sound").currentTime = 0;
|
||||
getRef("notification_sound").play();
|
||||
if (mode === 'error') {
|
||||
console.error(message)
|
||||
}
|
||||
return getRef("notification_drawer").push(message, { icon, ...options });
|
||||
}
|
||||
|
||||
function getFormatedTime(time, relative) {
|
||||
function getFormattedTime(timestamp, format) {
|
||||
try {
|
||||
if (String(time).indexOf("_")) time = String(time).split("_")[0];
|
||||
const intTime = parseInt(time);
|
||||
if (String(intTime).length < 13) time *= 1000;
|
||||
let timeFrag = new Date(intTime).toString().split(" "),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
minutes = new Date(intTime).getMinutes(),
|
||||
hours = new Date(intTime).getHours(),
|
||||
currentTime = new Date().toString().split(" ");
|
||||
timestamp = parseInt(timestamp)
|
||||
if (String(timestamp).length < 13)
|
||||
timestamp *= 1000
|
||||
let [day, month, date, year] = new Date(timestamp).toString().split(' '),
|
||||
minutes = new Date(timestamp).getMinutes(),
|
||||
hours = new Date(timestamp).getHours(),
|
||||
currentTime = new Date().toString().split(' ')
|
||||
|
||||
minutes = minutes < 10 ? `0${minutes}` : minutes;
|
||||
minutes = minutes < 10 ? `0${minutes}` : minutes
|
||||
let finalHours = ``;
|
||||
if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
|
||||
else if (hours === 0) finalHours = `12:${minutes}`;
|
||||
else finalHours = `${hours}:${minutes}`;
|
||||
if (hours > 12)
|
||||
finalHours = `${hours - 12}:${minutes}`
|
||||
else if (hours === 0)
|
||||
finalHours = `12:${minutes}`
|
||||
else
|
||||
finalHours = `${hours}:${minutes}`
|
||||
|
||||
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
|
||||
if (relative) {
|
||||
return `${date} ${month} ${year}`;
|
||||
} else return `${finalHours} ${month} ${date} ${year}`;
|
||||
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
|
||||
switch (format) {
|
||||
case 'date-only':
|
||||
return `${month} ${date}, ${year}`;
|
||||
break;
|
||||
case 'time-only':
|
||||
return finalHours;
|
||||
case 'relative':
|
||||
return relativeTime.from(timestamp)
|
||||
default:
|
||||
return `${month} ${date}, ${year} at ${finalHours}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return time;
|
||||
return timestamp;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', e => showPage(window.location.hash))
|
||||
window.addEventListener('hashchange', e => routeTo(window.location.hash))
|
||||
window.addEventListener("load", () => {
|
||||
document.body.classList.remove('hide-completely')
|
||||
showPage(window.location.hash)
|
||||
// document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.code === 'Escape') {
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
document.body.classList.remove('hidden')
|
||||
document.addEventListener("pointerdown", (e) => {
|
||||
if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
|
||||
createRipple(e, e.target.closest("button, sm-button, .interact"));
|
||||
if (e.target.closest("button, .interact")) {
|
||||
createRipple(e, e.target.closest("button, .interact"));
|
||||
}
|
||||
});
|
||||
document.addEventListener('copy', () => {
|
||||
notify('copied', 'success')
|
||||
})
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === '/') {
|
||||
e.preventDefault();
|
||||
getRef('search_payments').focusIn()
|
||||
}
|
||||
})
|
||||
getRef('search_payments').addEventListener('input', e => {
|
||||
const searchQuery = e.target.value.toLowerCase();
|
||||
const filteredInterns = []
|
||||
for (const floId in floGlobals.internTxs) {
|
||||
if (floId.toLowerCase().includes(searchQuery) || floGlobals.appObjects.RIBC.internList[floId].toLowerCase().includes(searchQuery))
|
||||
filteredInterns.push({ floId, name: floGlobals.appObjects.RIBC.internList[floId] })
|
||||
}
|
||||
// sort filtered by relevance
|
||||
filteredInterns.sort((a, b) => {
|
||||
if (a.floId.toLowerCase().includes(searchQuery) && b.floId.toLowerCase().includes(searchQuery)) {
|
||||
return a.name.toLowerCase().includes(searchQuery) ? -1 : 1
|
||||
} else if (a.floId.toLowerCase().includes(searchQuery)) {
|
||||
return -1
|
||||
} else if (b.floId.toLowerCase().includes(searchQuery)) {
|
||||
return 1
|
||||
} else {
|
||||
return a.name.toLowerCase().includes(searchQuery) ? -1 : 1
|
||||
}
|
||||
})
|
||||
renderElem(getRef("intern_payment_list"), html`${filteredInterns.map(intern => render.internCard(intern.floId))}`);
|
||||
})
|
||||
});
|
||||
|
||||
function createRipple(event, target) {
|
||||
@ -264,42 +169,271 @@ function createRipple(event, target) {
|
||||
};
|
||||
}
|
||||
|
||||
function showPage(targetPage, options = {}) {
|
||||
const { firstLoad, hashChange } = options
|
||||
const appState = {
|
||||
params: {},
|
||||
}
|
||||
function routeTo(targetPage) {
|
||||
const routingAnimation = { in: slideInUp, out: slideOutUp }
|
||||
let pageId
|
||||
let subPageId1
|
||||
let searchParams
|
||||
let params
|
||||
if (targetPage === '') {
|
||||
pageId = 'overview_page'
|
||||
pageId = 'home'
|
||||
history.replaceState(null, null, '#/home');
|
||||
} else {
|
||||
if (targetPage.includes('/')) {
|
||||
if (targetPage.includes('?')) {
|
||||
const splitAddress = targetPage.split('?')
|
||||
searchParams = splitAddress.pop();
|
||||
[, pageId, subPageId1] = splitAddress.pop().split('/')
|
||||
} else {
|
||||
[, pageId, subPageId1] = targetPage.split('/')
|
||||
}
|
||||
} else {
|
||||
pageId = targetPage
|
||||
}
|
||||
}
|
||||
else {
|
||||
pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
|
||||
if (!getRef(pageId)?.classList.contains('page')) return
|
||||
appState.currentPage = pageId
|
||||
|
||||
if (searchParams) {
|
||||
const urlSearchParams = new URLSearchParams('?' + searchParams);
|
||||
params = Object.fromEntries(urlSearchParams.entries());
|
||||
}
|
||||
if(!appPages.includes(pageId)) return
|
||||
document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
|
||||
document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active')
|
||||
getRef(pageId).classList.remove('hide-completely')
|
||||
getRef(pageId).animate([
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'none'
|
||||
},
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
})
|
||||
const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
|
||||
targetListItem.classList.add('nav-list__item--active')
|
||||
if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) {
|
||||
getRef('side_nav').scrollTo({
|
||||
top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
if (params)
|
||||
appState.params = params
|
||||
switch (pageId) {
|
||||
case 'intern':
|
||||
if (params && params.id) {
|
||||
render.intern(params.id)
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (hashChange && window.innerWidth < 640) {
|
||||
getRef('side_nav').close()
|
||||
switch (appState.lastPage) {
|
||||
case 'intern':
|
||||
routingAnimation.in = slideInRight;
|
||||
routingAnimation.out = slideOutRight;
|
||||
break;
|
||||
}
|
||||
}
|
||||
switch (pageId) {
|
||||
case 'intern':
|
||||
routingAnimation.in = slideInLeft;
|
||||
routingAnimation.out = slideOutLeft;
|
||||
break;
|
||||
}
|
||||
if (appState.lastPage !== pageId) {
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
|
||||
getRef(pageId).closest('.page').classList.remove('hidden')
|
||||
if (appState.lastPage) {
|
||||
getRef(appState.lastPage).animate(routingAnimation.out, { duration: floGlobals.prefersReducedMotion ? 0 : 150, fill: 'forwards', easing: 'ease' }).onfinish = (e) => {
|
||||
e.target.effect.target.classList.add('hidden')
|
||||
}
|
||||
}
|
||||
getRef(pageId).classList.remove('hidden')
|
||||
getRef(pageId).animate(routingAnimation.in, { duration: floGlobals.prefersReducedMotion ? 0 : 150, fill: 'forwards', easing: 'ease' }).onfinish = (e) => {
|
||||
appState.lastPage = pageId
|
||||
}
|
||||
}
|
||||
}
|
||||
const slideInLeft = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0)'
|
||||
}
|
||||
]
|
||||
const slideOutLeft = [
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0)'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
]
|
||||
const slideInRight = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0)'
|
||||
}
|
||||
]
|
||||
const slideOutRight = [
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0)'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(1rem)'
|
||||
},
|
||||
]
|
||||
const slideInDown = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateY(-1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)'
|
||||
},
|
||||
]
|
||||
const slideOutDown = [
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateY(1rem)'
|
||||
},
|
||||
]
|
||||
const slideInUp = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateY(1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)'
|
||||
},
|
||||
]
|
||||
const slideOutUp = [
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateY(-1rem)'
|
||||
},
|
||||
]
|
||||
|
||||
floGlobals.internTxs = {}
|
||||
function formatAmount(amount = 0) {
|
||||
if (!amount)
|
||||
return '₹0';
|
||||
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'inr' })
|
||||
}
|
||||
function fetchRibcData() {
|
||||
return floCloudAPI.requestObjectData("RIBC", {
|
||||
application: "InternManage",
|
||||
receiverID: "FMyRTrz9CG4TFNM6rCQgy3VQ5NF23bY2xD"
|
||||
});
|
||||
}
|
||||
function fetchInternData() {
|
||||
return floBlockchainAPI
|
||||
.readAllTxs("FThgnJLcuStugLc24FJQggmp2WgaZjrBSn")
|
||||
.then((allTxs) => {
|
||||
allTxs.forEach((tx) => {
|
||||
const floId = tx.vout[0].scriptPubKey.addresses[0];
|
||||
if (!floGlobals.appObjects.RIBC.internList[floId]) return; // not an intern
|
||||
const { txid, floData, time } = tx
|
||||
if (!floGlobals.internTxs[floId])
|
||||
floGlobals.internTxs[floId] = {
|
||||
total: 0,
|
||||
txs: []
|
||||
};
|
||||
const amount = parseFloat(floData.match(/([0-9]+)/)[1]) || 0; // get amount from floData
|
||||
floGlobals.internTxs[floId].total += amount;
|
||||
floGlobals.internTxs[floId].txs.push({
|
||||
txid,
|
||||
amount,
|
||||
time
|
||||
});
|
||||
|
||||
});
|
||||
render.internPaymentList();
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
const render = {
|
||||
internCard(floId) {
|
||||
const { total, txs } = floGlobals.internTxs[floId];
|
||||
return html`
|
||||
<li>
|
||||
<a href=${`#/intern?id=${floId}`} class="intern-card">
|
||||
<div class="flex flex-direction-column gap-0-5">
|
||||
<h3>${floGlobals.appObjects.RIBC.internList[floId]}</h3>
|
||||
<sm-copy value=${floId}></sm-copy>
|
||||
</div>
|
||||
<div class="flex flex-direction-column">
|
||||
<p>Last payment: <b>${formatAmount(txs[0].amount)}</b> on ${getFormattedTime(txs[0].time, 'date-only')}</p>
|
||||
<p>Total paid: <b>${formatAmount(total)}</b></p>
|
||||
</div>
|
||||
<button class="button button--small button--colored margin-left-auto">
|
||||
See details
|
||||
<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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
},
|
||||
internPaymentList() {
|
||||
const renderedList = []
|
||||
for (const intern in floGlobals.internTxs) {
|
||||
renderedList.push(render.internCard(intern));
|
||||
}
|
||||
renderElem(getRef("intern_payment_list"), html`${renderedList}`);
|
||||
},
|
||||
paymentCard(tx) {
|
||||
const { txid, amount, time } = tx;
|
||||
return html`
|
||||
<li class="payment-card">
|
||||
<time>${getFormattedTime(time, 'date-only')}</time>
|
||||
<div class="flex align-items-center space-between">
|
||||
<p class="amount">${formatAmount(amount)}</p>
|
||||
<a class="button button--small button--colored" href=${`https://flosight.duckdns.org/tx/${txid}`} target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"> </path>
|
||||
</svg>
|
||||
View transaction
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
},
|
||||
intern(floId) {
|
||||
renderElem(getRef('intern'), html`
|
||||
<a href="#/home" class="button button--colored margin-right-auto back-button">
|
||||
<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" opacity=".87"/><path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/></svg>
|
||||
Back
|
||||
</a>
|
||||
<section id="intern__details" class="flex flex-direction-column gap-1">
|
||||
<h1>${floGlobals.appObjects.RIBC.internList[floId]}</h1>
|
||||
<div>
|
||||
<p style="font-size: 0.9rem;">FLO Address</p>
|
||||
<sm-copy value=${floId}></sm-copy>
|
||||
</div>
|
||||
<p>Total paid: <b>${formatAmount(floGlobals.internTxs[floId].total)}</b></p>
|
||||
</section>
|
||||
<section class="flex flex-direction-column gap-1">
|
||||
<h4>Payment history</h4>
|
||||
<ul id="payment_history">
|
||||
${floGlobals.internTxs[floId].txs.map(tx => render.paymentCard(tx))}
|
||||
</ul>
|
||||
</section>
|
||||
`)
|
||||
}
|
||||
}
|
||||
|
||||
async function main() {
|
||||
try {
|
||||
await fetchRibcData();
|
||||
await fetchInternData()
|
||||
routeTo(window.location.hash)
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user