diff --git a/testnet.html b/testnet.html
index d60a046..7ae3874 100644
--- a/testnet.html
+++ b/testnet.html
@@ -1,128 +1,213 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
-    <title>FLO webWallet Testnet</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <title>FLO web wallet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta charset="UTF-8">
+    <meta name="description"
+        content="This webapp allows monitoring FLO addresses and performing transactions based on blockchain.">
     <style>
-        body {
-            font-family: Avenir;
-            -webkit-text-size-adjust: 100%;
-            -webkit-font-smoothing: antialiased;
+        @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
+
+        :root {
+            --sidenav-color: #f0f0f0;
+            --accent-color: #D40E1E;
+            --back-color: #ebebeb;
+            --body-color: #fff;
+            --sec-color: #ccc;
+            --bw: #000;
+            --opac-accent-color: rgba(210, 13, 29, 0.1);
         }
 
         * {
+            -webkit-box-sizing: border-box;
             box-sizing: border-box;
         }
 
-        .inp {
-            position: relative;
-            margin: auto;
-            width: 100%;
-            margin-bottom: 10px;
-            background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 49%, #b5bdc8 100%);
-            //transform: rotateX(45deg) rotateY(-10deg) rotate(25deg) scale(2);
+        ::-moz-selection {
+            color: #fff;
+            background: var(--accent-color);
         }
 
-        .inp .label {
-            position: absolute;
-            top: 16px;
-            left: 8px;
+        ::selection {
+            color: #fff;
+            background: var(--accent-color);
+        }
+
+        svg {
+            overflow: visible;
+        }
+
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: var(--body-color);
             font-size: 16px;
-            color: #9098A9;
-            font-weight: 500;
-            transform-origin: 0 0;
-            transition: all .2s ease;
+            color: var(--bw);
+            margin: 0;
+            height: 100vh;
         }
 
-        .inp .border {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            height: 2px;
-            width: 100%;
-            background: #0077FF;
-            transform: scaleX(0);
-            transform-origin: 0 0;
-            transition: all .15s ease;
-        }
-
-        .inp input,
+        button,
         textarea {
-            -webkit-appearance: none;
+            -ms-flex-item-align: start;
+            align-self: flex-start;
+            display: flexbox;
             width: 100%;
-            border: 0;
-            font-family: inherit;
-            padding: 12px;
-            height: 48px;
-            font-size: 16px;
-            font-weight: 500;
-            border-bottom: 2px solid #C8CCD4;
-            background-color: rgba(255, 255, 255, 0.7);
-            border-radius: 0;
-            color: #223254;
-            transition: all .15s ease;
+            padding: 1em;
+            background: transparent;
+            border-radius: 0.25em;
+            border: 1px solid var(--sec-color);
+            margin: 1em 0;
+            font-family: 'Roboto', sans-serif;
         }
 
-        .inp textarea {
-            height: 200px;
-            resize: none;
+        button {
+            width: 100%;
+            font-weight: bold;
+            color: var(--accent-color);
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            cursor: pointer;
+            -webkit-transition: color 0.2s ease, background-color 0.2s ease, border 0.2s ease;
+            transition: color 0.2s ease, background-color 0.2s ease, border 0.2s ease;
+            font-size: 0.8em;
         }
 
-        .inp input:hover:enabled,
-        textarea:hover:enabled {
-            background: rgba(255, 255, 255, 0.5);
+        button:hover {
+            background-color: var(--opac-accent-color);
+            border: 1px transparent solid;
         }
 
-        .inp input:not(:placeholder-shown)+span,
-        textarea:not(:placeholder-shown)+span {
-            color: #5A667F;
-            transform: translateY(-24px) scale(.75);
+        .flex{
+            display: flex;
+        }
+        .grid{
+            display: grid;
+        }
+        .column-grid{
+            grid-auto-flow: column;
+        }
+        .align-center{
+            align-items: center;
+        }
+        .gap-1{
+            gap: 1rem;
         }
 
-        .inp input:focus,
+        .primaryButton {
+            background: var(--accent-color) !important;
+            color: white !important;
+            border: 1px solid var(--accent-color);
+            width: 100%;
+        }
+
+        .primaryButton:hover {
+            opacity: 0.8;
+        }
+
+        button:disabled,
+        button[disabled] {
+            color: var(--sec-color) !important;
+            pointer-events: none;
+            background: transparent !important;
+            border: none;
+        }
+
+        button:focus,
+        input:focus,
         textarea:focus {
-            background: rgba(255, 255, 255, 0.5);
             outline: none;
         }
 
-        .inp input:focus+span,
-        textarea:focus+span {
-            color: #0077FF;
-            transform: translateY(-24px) scale(.75);
+        ::-moz-focus-inner {
+            border: none;
         }
 
-        .inp input:focus+span+.border,
-        textarea:focus+span+.border {
-            transform: scaleX(1);
+        .icons:active,
+        monitor:active,
+        button:active,
+        svg:active {
+            -webkit-tap-highlight-color: transparent;
         }
 
-        .inpContainer {
-            display: grid;
-            padding: 5px;
+        .input,
+        .text-area {
+            width: 100%;
+            margin: 1em 0;
+            -ms-flex-item-align: start;
+            align-self: flex-start;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            position: relative;
         }
 
-        .addrLabelContainer {
-            font-family: Avenir;
-            display: grid;
-            padding: 0px;
+        .input label,
+        .text-area label {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0.6;
+            padding: 0 0.4em;
+            margin: 1.05em 1em 1em 0.8em;
+            -webkit-transition: color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+            transition: color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+            transition: transform 0.2s ease, color 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
+            transition: transform 0.2s ease, color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+            background: var(--body-color);
+            z-index: 1;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            -webkit-transform-origin: left;
+            transform-origin: left;
+            will-change: transform;
         }
 
-        .addrLabel {
-            margin-bottom: 0px;
+        .input .label-active,
+        .text-area .label-active {
+            -webkit-transform: translateY(-1.7em) scale(0.8);
+            transform: translateY(-1.7em) scale(0.8);
+            opacity: 1 !important;
         }
 
-        .col-50 {
-            float: left;
-            width: 50%;
-            margin-top: 6px;
+        .input input:focus {
+            border: var(--accent-color) 1px solid;
         }
 
-        .row:after {
-            content: "";
-            display: table;
-            clear: both;
+        .input input:focus~label {
+            color: var(--accent-color);
+        }
+
+        .text-area textarea {
+            resize: none;
+        }
+
+        .text-area textarea:focus {
+            border: var(--accent-color) 1px solid;
+        }
+
+        .text-area textarea:focus~label {
+            color: var(--accent-color);
+        }
+
+        textarea,
+        input {
+            color: inherit;
+            width: 100%;
+            font-size: 1em;
+            display: flexbox;
+            background-color: transparent;
+            padding: 1em;
+            border-radius: 0.25em;
+            margin: 0;
+            border: 1px solid var(--sec-color);
+            font-family: 'Roboto', sans-serif;
+            -webkit-transition: border 0.2s ease;
+            transition: border 0.2s ease;
         }
 
         textarea {
@@ -137,1062 +222,2668 @@
             margin: 0.4rem 0.8rem;
         }
 
-        @media screen and (max-width: 800px) {
-            .col-50 {
-                width: 100%;
-                margin-top: 0;
-                padding: 20px;
+        #flo_data_status:not(:empty){
+            color: red;
+            padding: 0.5rem 0;
+        }
+
+        #overlay {
+            opacity: 0;
+            pointer-events: none;
+            position: fixed;
+            z-index: 6;
+            background: rgba(0, 0, 0, 0.2);
+            height: 100vh;
+            width: 100vw;
+            -webkit-transition: opacity 0.2s ease;
+            transition: opacity 0.2s ease;
+        }
+
+        #overlay #popup {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            bottom: 0;
+            position: absolute;
+            width: 100vw;
+            padding: 1em;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            background: var(--body-color);
+            -webkit-transition: -webkit-transform 0.2s ease;
+            transition: -webkit-transform 0.2s ease;
+            transition: transform 0.2s ease;
+            transition: transform 0.2s ease, -webkit-transform 0.2s ease;
+            -webkit-transform: translateY(1em);
+            transform: translateY(1em);
+        }
+
+        #overlay #popup .input {
+            width: 100% !important;
+            margin: 1em 0 !important;
+        }
+
+        #overlay #popup button {
+            border: none;
+            width: auto;
+            margin: 0.5em 0 !important;
+        }
+
+        #overlay #popup button:first-of-type {
+            margin-left: auto !important;
+        }
+
+        #overlay #popup button:last-of-type {
+            margin-left: 0.5em !important;
+            width: 4em !important;
+        }
+
+        #overlay #popup h4,
+        #overlay #popup h5 {
+            margin: 1em 0;
+            opacity: 0.8;
+            width: 100%;
+        }
+
+        #textCopied {
+            font-weight: normal;
+            padding: 1em;
+            border-radius: 2em;
+            background: var(--sec-color);
+            position: absolute;
+            bottom: 0;
+            pointer-events: none;
+            margin: 2em 0;
+            left: 50%;
+            -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+            -webkit-transition: 0.2s opacity ease;
+            transition: 0.2s opacity ease;
+            opacity: 0;
+            z-index: 10;
+        }
+
+        #main-card #header {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            font-weight: normal;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            position: absolute;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            height: 48px;
+            z-index: 3;
+            top: 0;
+            right: 0;
+            left: 0;
+        }
+
+        #main-card #header span {
+            margin-right: 1em;
+            font-weight: bold;
+        }
+
+        #main-card #header svg {
+            fill: var(--accent-color);
+            height: 2em;
+            width: 2em;
+        }
+
+        #main-card #header svg:first-of-type {
+            margin: 1em 0.4em 1em 1em;
+        }
+
+        #main-card #header svg:last-of-type {
+            margin: 1em 0.5em 1em auto;
+        }
+
+        #main-card .right {
+            display: -ms-grid;
+            display: grid;
+            left: 0;
+            position: absolute;
+            top: 48px;
+            right: 0;
+            bottom: 54px;
+        }
+
+        #loadBalance,
+        #spinner {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 2em;
+            height: 2em;
+            padding: 0.3em;
+            margin: 1.9em 1em;
+        }
+
+        #loadBalance .p1,
+        #spinner .p1 {
+            fill: none;
+        }
+
+        #loadBalance .p2,
+        #spinner .p2 {
+            fill: var(--accent-color);
+        }
+
+        #spinner {
+            margin: 0.7em 0;
+        }
+
+        #sendData #sdleft {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-line-pack: start;
+            align-content: flex-start;
+            width: 100%;
+            margin: 0.5em 0;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            -webkit-transition: width 0.2s ease;
+            transition: width 0.2s ease;
+        }
+
+        #sendData #sdleft .input {
+            -webkit-transition: border 0.2s ease;
+            transition: border 0.2s ease;
+            border: 1px solid var(--sec-color);
+            margin: 1em 0 !important;
+            border-radius: 0.25em;
+            width: 100% !important;
+        }
+
+        #sendData #sdleft .input input {
+            height: auto;
+            border: none;
+            padding: 1em 0 1em 1em;
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            min-width: 0;
+        }
+
+        #sendData #sdleft .input button {
+            margin: 0.5em 0.5em 0.5em 0 !important;
+            height: auto;
+            border: none;
+            width: 9em;
+        }
+
+        #sendData #sdleft .input:focus-within {
+            border: 1px solid var(--accent-color);
+        }
+
+        #sendData #sdright {
+            opacity: 0.6;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            width: 100%;
+            pointer-events: none;
+        }
+
+        #sendData #sdright .input,
+        #sendData #sdright .text-area {
+            margin: 0.5em 0;
+        }
+
+        #sendData #dispBal {
+            position: relative;
+            width: 100%;
+            border: 1px solid var(--sec-color);
+            padding: 1em 2em;
+            -ms-flex-item-align: start;
+            align-self: flex-start;
+            overflow-wrap: break-word;
+            border-radius: 0.25em;
+            margin: auto;
+        }
+
+        #sendData #dispBal #dispBalInt {
+            font-size: 3em;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+        }
+
+        #sendData #dispBal #dispBalFloat {
+            font-size: 1em;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+        }
+
+        #sendData #dispBal h5:last-of-type {
+            opacity: 0.8;
+            font-weight: normal;
+        }
+
+        #bottom-nav {
+            overflow: hidden;
+            position: fixed;
+            height: 54px;
+            -ms-flex-line-pack: center;
+            align-content: center;
+            text-align: center;
+            left: 0;
+            right: 0;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            bottom: 0;
+            z-index: 4;
+            background: var(--body-color);
+            border-top: 1px solid var(--sec-color);
+        }
+
+        #bottom-nav #indicator {
+            display: none;
+        }
+
+        #bottom-nav .icons {
+            opacity: 0.8;
+            position: relative;
+            width: 100%;
+            z-index: 2;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+            -ms-grid-column-align: center;
+            justify-self: center;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            padding: 0.4em;
+            cursor: pointer;
+        }
+
+        #bottom-nav .icons svg {
+            fill: var(--bw);
+            height: 1.1em;
+            margin: 0 0 4px 0;
+            stroke: none;
+        }
+
+        #bottom-nav .icons h6 {
+            margin: 0;
+            font-weight: normal;
+        }
+
+        #bottom-nav .icons span {
+            display: none;
+        }
+
+        .activeButton {
+            opacity: 1 !important;
+            color: var(--accent-color) !important;
+        }
+
+        .activeButton svg {
+            fill: var(--accent-color) !important;
+        }
+
+        .reveal {
+            width: 16em !important;
+        }
+
+        .reveal span {
+            opacity: 1 !important;
+        }
+
+        #overlay2 {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.2);
+            z-index: 3;
+            -webkit-transition: opacity 0.2s ease;
+            transition: opacity 0.2s ease;
+        }
+
+        .show {
+            opacity: 1 !important;
+            pointer-events: all !important;
+        }
+
+        .hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .hide-completely{
+            display: none;
+        }
+
+        #fix_invalid_button{
+            margin-bottom: 1rem !important;
+        }
+
+        #menu {
+            display: none;
+        }
+
+        #addrGen card {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            margin: 1em 0;
+            border: solid 1px var(--sec-color);
+            border-radius: 0.25em;
+        }
+
+        #addrGen card h5 {
+            margin: 0.5em 0 1em 0;
+            font-weight: normal;
+        }
+
+        #addrGen card h4 {
+            font-weight: normal;
+        }
+
+        #addrGen card div {
+            position: relative;
+            display: flexbox;
+            padding: 1em;
+            word-break: break-all;
+            width: 100%;
+        }
+
+        #addrGen card div:nth-of-type(1) {
+            border-bottom: 1px solid var(--sec-color);
+        }
+
+        #addrGen card svg {
+            cursor: pointer;
+            position: absolute;
+            right: 0;
+            top: 0;
+            padding: 0.6em;
+            height: 2.5em;
+            width: 2.5em;
+            margin: 0.8em;
+            fill: var(--bw);
+            opacity: 0.5;
+            border-radius: 2em;
+            -webkit-transition: 0.2s ease background;
+            transition: 0.2s ease background;
+        }
+
+        #addrGen card svg:hover {
+            background: var(--sec-color);
+            opacity: 1;
+        }
+
+        input[type=number]::-webkit-inner-spin-button,
+        input[type=number]::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            appearance: none;
+            margin: 0;
+        }
+
+        input[type=number] {
+            -moz-appearance: textfield;
+        }
+
+        .innerPage {
+            position: fixed;
+            overflow-y: auto;
+            display: -ms-grid;
+            display: grid;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            -ms-flex-line-pack: start;
+            align-content: flex-start;
+            z-index: 2;
+            background: var(--body-color);
+        }
+
+        .title-bar {
+            top: 0;
+            position: absolute;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            width: 100%;
+            height: auto;
+            -ms-flex-line-pack: center;
+            align-content: center;
+            background: var(--body-color);
+            border-bottom: 1px solid var(--sec-color);
+        }
+
+        .title-bar svg {
+            display: flexbox;
+            height: 3em;
+            width: 3em;
+            padding: 0.9em;
+            fill: var(--bw) !important;
+            cursor: pointer;
+            -ms-flex-item-align: center;
+            align-self: center;
+        }
+
+        .title-bar span {
+            padding: 0.5em;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            width: calc(100% - 8em);
+            font-weight: bold;
+            line-height: 1.5em;
+        }
+
+        .title-bar h5 {
+            margin: 0;
+            font-weight: normal;
+        }
+
+        .title-bar h3 {
+            margin: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        #dispMsg trans-container {
+            position: absolute;
+            overflow-y: auto;
+            width: 100%;
+            bottom: 0;
+            top: 65px;
+            padding: 0.25em 0 5em 0;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            -ms-flex-line-pack: start;
+            align-content: flex-start;
+            background: var(--back-color);
+            scroll-behavior: smooth;
+        }
+
+        #dispMsg trans-container transaction-card {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            position: relative;
+            width: calc(100% - 1em);
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            margin: 0.25em 0.5em;
+            border-radius: 0.25em;
+            background: var(--body-color);
+        }
+
+        #dispMsg trans-container transaction-card svg {
+            display: flexbox;
+            -ms-flex-item-align: center;
+            align-self: center;
+            margin-right: 0.5em;
+            height: 1em;
+            width: 1em;
+            fill: var(--accent-color);
+        }
+
+        #dispMsg trans-container transaction-card div {
+            display: flexbox;
+            width: 100%;
+            line-height: 1.4em;
+            padding: 1em;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        #dispMsg trans-container transaction-card div:nth-of-type(1) {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-line-pack: center;
+            align-content: center;
+            opacity: 0.8;
+            font-size: 0.9em;
+            padding-bottom: 0.5em;
+        }
+
+        #dispMsg trans-container transaction-card div:nth-of-type(2) {
+            padding-top: 0.5em;
+        }
+
+        #dispMsg trans-container transaction-card div:nth-of-type(3) {
+            text-align: right;
+            font-size: 0.8em;
+            opacity: 0.8;
+        }
+
+        loading {
+            position: absolute;
+            display: -ms-grid;
+            display: grid;
+            height: calc(100% - 1.6em);
+            width: calc(100% - 1.1em);
+            place-items: center;
+            z-index: 10;
+        }
+
+        loading svg {
+            position: relative;
+            height: 2.5em;
+            width: 2.5em;
+        }
+
+        loading .p1 {
+            fill: none;
+        }
+
+        loading .p2 {
+            fill: var(--accent-color);
+        }
+
+        #addNewAddress,
+        #scrollToTop {
+            position: fixed;
+            cursor: pointer;
+            width: 3.5em;
+            height: 3.5em;
+            right: 0;
+            margin: 1em;
+            padding: 1.2em;
+            border-radius: 50%;
+            -webkit-box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.4);
+            box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.4);
+            -webkit-transition: right 0.2s ease, bottom 0.2s ease, opacity 0.2s ease;
+            transition: right 0.2s ease, bottom 0.2s ease, opacity 0.2s ease;
+            z-index: 2;
+            background: var(--accent-color);
+            fill: #fff;
+        }
+
+        #addNewAddress {
+            bottom: 54px;
+        }
+
+        #scrollToTop {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        #edit-container,
+        #add-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 4;
+            background: rgba(0, 0, 0, 0.2);
+            -webkit-transition: opacity 0.2s ease;
+            transition: opacity 0.2s ease;
+        }
+
+        #add,
+        #edit {
+            position: absolute;
+            bottom: 0;
+            width: 100vw;
+            height: auto;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            -webkit-transform: translateY(1em);
+            transform: translateY(1em);
+            padding: 1em;
+            background: var(--body-color);
+            -webkit-transition: -webkit-transform 0.2s ease;
+            transition: -webkit-transform 0.2s ease;
+            transition: transform 0.2s ease;
+            transition: transform 0.2s ease, -webkit-transform 0.2s ease;
+        }
+
+        #add button,
+        #edit button {
+            border: none;
+            width: auto;
+            margin: 0.5em 0 !important;
+        }
+
+        #add button:last-of-type,
+        #edit button:last-of-type {
+            margin-left: 1em !important;
+        }
+
+        #add h4,
+        #edit h4 {
+            margin: 1em 0;
+            opacity: 0.8;
+        }
+
+        #add .input,
+        #edit .input {
+            margin: 1em 0 !important;
+            width: 100% !important;
+        }
+
+        #edit-container #edit #loadingSvg {
+            top: 0;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+            opacity: 0.6;
+            fill: var(--bw);
+            position: absolute;
+            right: 0;
+            height: 2em;
+            width: 2em;
+            padding: 0.5em;
+            margin: 1.7em 1em 1em 1.5em;
+            -webkit-transition: opacity 0.2s ease;
+            transition: opacity 0.2s ease;
+            z-index: 2;
+            border-radius: 2em;
+            cursor: pointer;
+        }
+
+        #edit-container #edit #loadingSvg:hover {
+            background: var(--sec-color);
+        }
+
+        #edit-container #edit div:first-of-type {
+            position: relative;
+            width: 100%;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-line-pack: center;
+            align-content: center;
+            margin-bottom: 1em;
+        }
+
+        #edit-container #edit div:first-of-type button {
+            display: flexbox;
+            white-space: nowrap;
+            margin-left: 0 !important;
+            -ms-flex-item-align: center;
+            align-self: center;
+        }
+
+        #edit-container #edit div:first-of-type h4 {
+            padding: 0;
+            -ms-flex-item-align: center;
+            align-self: center;
+            display: flexbox;
+            text-align: right;
+        }
+
+        #edit-container #edit h4 {
+            padding-right: 2em;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        #edit-container #edit button:nth-of-type(2) {
+            margin-left: auto !important;
+        }
+
+        #edit-container #edit h3,
+        #edit-container #edit h4,
+        #edit-container #edit h5 {
+            display: flexbox;
+            width: 100%;
+        }
+
+        #add-container #add button:first-of-type {
+            margin-left: auto !important;
+        }
+
+        #monitor-list {
+            position: relative;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            width: 100%;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            -ms-flex-line-pack: start;
+            align-content: flex-start;
+            padding-bottom: 5em;
+        }
+
+        #monitor-list monitor {
+            height: auto;
+            border-radius: 0.25em;
+            border: 1px solid var(--sec-color);
+            margin: 0.5em 0;
+            -ms-flex-item-align: start;
+            align-self: flex-start;
+            width: 100%;
+            position: relative;
+            cursor: pointer;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        #monitor-list monitor div {
+            padding: 1em;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        #monitor-list monitor div:nth-of-type(1) {
+            padding: 1em 4em 1em 0.8em;
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+
+        #monitor-list monitor div:nth-of-type(2) {
+            font-size: 0.8em;
+            padding-top: 0;
+            opacity: 0.8;
+        }
+
+        #monitor-list monitor div:nth-of-type(3) {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            z-index: 1;
+        }
+
+        #monitor-list monitor svg {
+            top: 0;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+            opacity: 0.6;
+            fill: var(--bw);
+            position: absolute;
+            right: 0;
+            height: 2em;
+            width: 2em;
+            padding: 0.5em;
+            margin: 0.5em;
+            -webkit-transition: opacity 0.2s ease;
+            transition: opacity 0.2s ease;
+            z-index: 2;
+            border-radius: 2em;
+        }
+
+        #monitor-list monitor svg:hover {
+            background: var(--sec-color);
+        }
+
+        #monitor-list monitor badge {
+            position: absolute;
+            pointer-events: none;
+            color: #fff;
+            background: var(--accent-color);
+            border-radius: 2em;
+            padding: 0.5em;
+            -webkit-transition: opacity 0.2s ease;
+            transition: opacity 0.2s ease;
+            bottom: 0;
+            right: 0;
+            margin: 0.5em;
+            line-height: 0;
+            display: -webkit-inline-box;
+            display: -ms-inline-flexbox;
+            display: inline-flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+        }
+
+        #monitor-list monitor badge::after {
+            content: "";
+            display: block;
+            padding-bottom: 100%;
+        }
+
+        #settings-page section {
+            width: 100%;
+            border-bottom: 1px solid var(--sec-color);
+            display: -ms-grid;
+            display: grid;
+            padding-bottom: 1em;
+        }
+
+        #settings-page section:last-of-type {
+            border: none;
+        }
+
+        #settings-page h3,
+        #settings-page h4 {
+            display: flexbox;
+            width: 100%;
+            -ms-flex-item-align: center;
+            align-self: center;
+        }
+
+        #settings-page h5 {
+            margin: 0;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+            font-weight: normal;
+            opacity: 0.9;
+        }
+
+        #settings-page div {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            width: 100%;
+            padding: 1em 0;
+            -ms-flex-line-pack: center;
+            align-content: center;
+        }
+
+        #settings-page .row {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+        }
+
+        #settings-page .row span {
+            font-size: 0.8em;
+        }
+
+        #settings-page .border-card {
+            color: inherit;
+            text-decoration: none;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            padding: 0.5em 0;
+            width: auto;
+        }
+
+        #settings-page .border-card svg {
+            fill: var(--accent-color);
+            display: flexbox;
+            height: 2em;
+            -ms-flex-item-align: center;
+            align-self: center;
+            margin: 0.5em;
+        }
+
+        .slide-up {
+            opacity: 1;
+            -webkit-transform: none !important;
+            transform: none !important;
+            pointer-events: all;
+        }
+
+        .switch {
+            display: flexbox;
+            width: 2em;
+            -ms-flex-line-pack: center;
+            align-content: center;
+            position: relative;
+            height: 1.5em;
+            z-index: 1;
+            margin-right: 1em;
+            -ms-flex-item-align: center;
+            align-self: center;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 3em;
+            background-color: var(--sec-color);
+            -webkit-transition: .4s;
+            transition: .4s;
+        }
+
+        .slider:before {
+            position: absolute;
+            -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+            content: "";
+            height: 1.6em;
+            width: 1.6em;
+            background-color: white;
+            -webkit-transform: translateY(-1px);
+            transform: translateY(-1px);
+            -webkit-transition: .4s;
+            transition: .4s;
+            -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
+        }
+
+        input:checked+.slider {
+            background-color: var(--accent-color);
+        }
+
+        input:checked+.slider:before {
+            -webkit-transform: translate(1.4em, -1px);
+            transform: translate(1.4em, -1px);
+        }
+
+        .slider.round {
+            border-radius: 2em;
+        }
+
+        .slider.round:before {
+            border-radius: 50%;
+        }
+
+        .page {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            position: absolute;
+            overflow-y: auto;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            -ms-flex-line-pack: start;
+            align-content: flex-start;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            padding: 0 1em;
+        }
+
+        #transaction-complete {
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            text-align: center;
+            -ms-flex-line-pack: center;
+            align-content: center;
+        }
+
+        #transaction-complete h3 {
+            text-align: center;
+            width: 100%;
+        }
+
+        #transaction-complete svg {
+            -ms-grid-column-align: center;
+            justify-self: center;
+            fill: green;
+            width: 20vw;
+        }
+
+        #transaction-complete button {
+            position: absolute;
+            bottom: 0;
+        }
+
+        #enterPrivKey {
+            width: 100%;
+            position: absolute;
+            overflow-y: auto;
+            display: -ms-grid;
+            display: grid;
+            -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+            padding: 1em;
+            top: 49px;
+        }
+
+        #enterPrivKey .input {
+            width: 100% !important;
+            margin: 1em 0 !important;
+        }
+
+        #enterPrivKey h4 {
+            margin: 0.5em 0;
+        }
+
+        #noInternet {
+            pointer-events: none;
+            opacity: 0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 1em;
+            z-index: 11;
+            background: khaki;
+            color: #000;
+        }
+
+        .spin {
+            -webkit-animation: spin 1s infinite ease;
+            animation: spin 1s infinite ease;
+        }
+
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+
+            100% {
+                -webkit-transform: rotate(359deg);
+                transform: rotate(359deg);
             }
         }
-    </style>
-    <style media="screen">
-        .option-input {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            -ms-appearance: none;
-            -o-appearance: none;
-            appearance: none;
-            position: relative;
-            top: 8px;
-            height: 30px;
-            width: 30px;
-            transition: all 0.15s ease-out 0s;
-            background: #cbd1d8;
-            border: none;
-            color: #fff;
-            cursor: pointer;
-            display: inline-block;
-            margin-right: 0.5rem;
-            outline: none;
-            position: relative;
-            z-index: 1000;
+
+        @keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+
+            100% {
+                -webkit-transform: rotate(359deg);
+                transform: rotate(359deg);
+            }
         }
 
-        .option-input:hover {
-            background: #9faab7;
+        .highlight {
+            -webkit-animation: highlightElement 0.6s ease forwards;
+            animation: highlightElement 0.6s ease forwards;
         }
 
-        .option-input:checked {
-            background: #aaa;
+        @-webkit-keyframes highlightElement {
+            0% {
+                opacity: 0;
+                background: var(--accent-color);
+            }
+
+            100% {
+                opacity: 1;
+                background: transparent;
+            }
         }
 
-        .option-input:checked::before {
-            height: 30px;
-            width: 30px;
-            position: absolute;
-            content: '✔';
-            display: inline-block;
-            font-size: 20px;
-            text-align: center;
-            line-height: 30px;
+        @keyframes highlightElement {
+            0% {
+                opacity: 0;
+                background: var(--accent-color);
+            }
+
+            100% {
+                opacity: 1;
+                background: transparent;
+            }
         }
 
-        .option-input:checked::after {
-            -webkit-animation: click-wave 0.65s;
-            -moz-animation: click-wave 0.65s;
-            animation: click-wave 0.65s;
-            background: #40e0d0;
-            content: '';
-            display: block;
-            position: relative;
-            z-index: 100;
+        .fade {
+            -webkit-animation: fade 0.2s ease forwards;
+            animation: fade 0.2s ease forwards;
         }
 
-        .option-input.radio {
-            border-radius: 50%;
+        @-webkit-keyframes fade {
+            0% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 1;
+            }
         }
 
-        .option-input.radio::after {
-            border-radius: 50%;
+        @keyframes fade {
+            0% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 1;
+            }
         }
 
-        .radioContainer {
-            display: -webkit-box;
-            display: -moz-box;
-            display: -ms-flexbox;
-            display: box;
-            color: #9faab7;
-            font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
-            text-align: left;
+        @media screen and (min-width: 768px) {
+            #enterPrivKey {
+                border: 1px solid var(--sec-color);
+                width: 400px;
+                padding: 2em;
+                left: 50%;
+                margin: 2em 0;
+                -webkit-transform: translateX(-50%);
+                transform: translateX(-50%);
+            }
+
+            #enterPrivKey .title-bar {
+                position: relative;
+                border: none;
+            }
+
+            #enterPrivKey button {
+                margin: 0.5em 0 0.5em auto !important;
+            }
+
+            #transaction-complete svg {
+                width: 8em;
+            }
+
+            #transaction-complete button {
+                position: relative;
+                bottom: auto;
+            }
+
+            .innerPage {
+                position: absolute;
+                overflow-y: auto;
+                padding: 0 1em;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+            }
+
+            #settings-page h4 {
+                text-align: left;
+            }
+
+            #settings-page div {
+                padding: 0.5em 0;
+                -ms-flex-line-pack: center;
+                align-content: center;
+            }
+
+            #settings-page #deleteDB button {
+                margin-left: 0 !important;
+                margin-right: auto !important;
+                width: auto;
+            }
+
+            #monitor-list {
+                padding-bottom: 6em;
+            }
+
+            #monitor-list monitor {
+                -ms-flex-item-align: auto;
+                align-self: auto;
+                width: 16em;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                margin: 0.5em;
+                -webkit-box-orient: vertical;
+                -webkit-box-direction: normal;
+                -ms-flex-direction: column;
+                flex-direction: column;
+            }
+
+            #monitor-list monitor div:first-of-type {
+                padding: 1.5em 2em 1.5em 0.8em;
+                -webkit-box-flex: 1;
+                -ms-flex: 1;
+                flex: 1;
+            }
+
+            #monitor-list monitor div:nth-of-type(2) {
+                padding: 1em 4em 1em 1em;
+            }
+
+            #monitor-list monitor svg {
+                top: auto;
+                bottom: 0;
+                opacity: 0;
+            }
+
+            #monitor-list monitor svg:hover {
+                opacity: 1 !important;
+            }
+
+            #monitor-list monitor badge {
+                top: 0;
+                bottom: auto;
+            }
+
+            #monitor-list monitor:hover svg {
+                opacity: 0.6;
+            }
+
+            #add-container,
+            #edit-container {
+                display: -ms-grid;
+                display: grid;
+                place-content: center;
+            }
+
+            #add,
+            #edit {
+                padding: 1em 2em;
+                -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+                box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+                border-radius: 0.25em;
+                position: relative;
+                width: 400px !important;
+            }
+
+            ::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+            }
+
+            ::-webkit-scrollbar-track {
+                background: transparent;
+            }
+
+            ::-webkit-scrollbar-thumb {
+                background: var(--sec-color);
+                opacity: 0.4;
+                border-radius: 1em;
+            }
+
+            ::-webkit-scrollbar-thumb:hover {
+                background: #555;
+            }
+
+            ::-webkit-scrollbar-corner {
+                background: transparent;
+            }
+
+            .input:hover label,
+            .text-area:hover label {
+                opacity: 0.8;
+            }
+
+            card {
+                margin: 1em !important;
+            }
+
+            body {
+                background-color: var(--back-color) !important;
+                display: -ms-grid;
+                display: grid;
+                place-items: center !important;
+            }
+
+            button,
+            .input,
+            .text-area {
+                margin: 1em !important;
+            }
+
+            #main-card {
+                margin: 0 !important;
+                position: relative;
+                width: 80vw !important;
+                height: 90vh !important;
+                border-radius: 0.25em;
+                overflow: hidden;
+                -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+                box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+                background: var(--body-color);
+                -webkit-transition: width 0.2s ease, height 0.2s ease;
+                transition: width 0.2s ease, height 0.2s ease;
+            }
+
+            #main-card #bottom-nav {
+                display: -ms-grid;
+                display: grid;
+                border-top: none;
+                opacity: 1 !important;
+                pointer-events: all !important;
+                position: absolute !important;
+                -webkit-box-orient: vertical;
+                -webkit-box-direction: normal;
+                -ms-flex-direction: column;
+                flex-direction: column;
+                -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+                top: 0;
+                width: 64px;
+                text-align: left !important;
+                height: 100%;
+                background: var(--sidenav-color);
+                -webkit-transition: width 0.2s ease;
+                transition: width 0.2s ease;
+            }
+
+            #main-card #bottom-nav #indicator {
+                position: absolute;
+                display: inline-block;
+                left: 0;
+                width: 4px;
+                height: 2em;
+                background: var(--accent-color);
+                border-radius: 0 4px 4px 0;
+                -webkit-transition: -webkit-transform 0.2s ease;
+                transition: -webkit-transform 0.2s ease;
+                transition: transform 0.2s ease;
+                transition: transform 0.2s ease, -webkit-transform 0.2s ease;
+            }
+
+            #main-card #bottom-nav #menu {
+                position: absolute;
+                top: 0;
+                display: inline-block !important;
+                opacity: 0.8;
+            }
+
+            #main-card #bottom-nav #settingsBtn {
+                position: absolute;
+                bottom: 0;
+            }
+
+            #main-card #bottom-nav .icons {
+                padding: 1.2em;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                -ms-flex-line-pack: center;
+                align-content: center;
+                -ms-flex-wrap: nowrap;
+                flex-wrap: nowrap;
+                white-space: nowrap;
+                -webkit-transition: opacity 0.2s ease;
+                transition: opacity 0.2s ease;
+            }
+
+            #main-card #bottom-nav .icons h6 {
+                display: none;
+            }
+
+            #main-card #bottom-nav .icons span {
+                opacity: 0;
+                display: inline-block;
+                -webkit-transition: opacity 0.2s ease;
+                transition: opacity 0.2s ease;
+                margin-left: 1em;
+                line-height: 1.2em;
+            }
+
+            #main-card #bottom-nav .icons svg {
+                height: 1.2em;
+                display: flexbox;
+                -ms-flex-item-align: center !important;
+                align-self: center !important;
+                margin: 0;
+            }
+
+            #main-card #bottom-nav .icons:hover {
+                opacity: 1;
+            }
+
+            #main-card .right {
+                top: 64px;
+                left: 64px;
+                right: 0;
+                bottom: 0;
+            }
+
+            #header {
+                opacity: 1 !important;
+                pointer-events: all !important;
+                z-index: 2;
+                width: calc(100% - 64px);
+                left: 64px !important;
+                height: 64px !important;
+            }
+
+            #overlay {
+                display: -ms-grid;
+                display: grid;
+                place-content: center;
+            }
+
+            #overlay #popup {
+                padding: 1em 2em;
+                -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+                box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+                border-radius: 0.25em;
+                width: 400px !important;
+                position: relative;
+            }
+
+            .input,
+            button {
+                width: auto !important;
+            }
+
+            #sendData #sdleft {
+                width: 40%;
+                padding: 0 0.5em;
+            }
+
+            #sendData #sdright {
+                opacity: 0.6;
+                width: 60%;
+                display: flexbox;
+                -ms-flex-item-align: start;
+                align-self: flex-start;
+            }
+
+            #sendData #sdright .input,
+            #sendData #sdright button,
+            #sendData #sdright .text-area {
+                width: 100% !important;
+                margin: 0.5em !important;
+            }
         }
 
-        .radioContainer label {
-            display: block;
-            line-height: 30px;
-            width: 100%;
-        }
-    </style>
-    <style media="screen">
-        .DataTable h4 {
-            font-family: Avenir;
-            font-size: 30px;
-            color: #fff;
-            font-weight: 300;
-            text-align: center;
-            margin-bottom: 0px;
-            margin-top: 0px;
-            background-color: rgba(255, 255, 255, 0.3);
+        @media screen and (min-width: 1280px) {
+            #main-card {
+                width: 60vw !important;
+                height: 80vh !important;
+            }
         }
 
-        .DataTable table {
-            width: 100%;
-            table-layout: fixed;
+        @media screen and (min-width: 1600px) {
+            #main-card {
+                width: 50vw !important;
+            }
         }
 
-        .tbl-header {
-            background-color: rgba(255, 255, 255, 0.3);
+        @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
+            #main-card {
+                width: 80vw !important;
+                height: 60vh !important;
+            }
+
+            monitor svg {
+                opacity: 1 !important;
+            }
         }
 
-        .tbl-content {
-            height: 300px;
-            overflow-x: auto;
-            margin-top: 0px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
+        @media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
+            #main-card {
+                width: 80vw !important;
+                height: 70vh !important;
+            }
+
+            monitor svg {
+                opacity: 1 !important;
+            }
         }
 
-        .DataTable th {
-            padding: 20px 15px;
-            text-align: left;
-            font-weight: 500;
-            font-size: 12px;
-            color: #fff;
-            text-transform: uppercase;
+        @media screen and (max-width: 380px) {
+            button {
+                font-size: 0.8em;
+            }
         }
 
-        .DataTable td {
-            padding: 15px;
-            text-align: left;
-            vertical-align: middle;
-            font-weight: 300;
-            font-size: 12px;
-            color: #fff;
-            border-bottom: solid 1px rgba(255, 255, 255, 0.1);
+        @media screen and (max-width: 360px) {
+            body {
+                font-size: 12px !important;
+            }
+
+            #bottom-nav {
+                height: 48px;
+            }
+
+            trans-container {
+                top: 48px !important;
+            }
+
+            #header {
+                height: 4em;
+            }
+
+            .right {
+                bottom: 48px !important;
+            }
         }
 
-
-        /* demo styles */
-        section.DataTable {
-            background: -webkit-linear-gradient(left, #25c481, #25b7c4);
-            background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 49%, #b5bdc8 100%);
-            font-family: 'Roboto', sans-serif;
-        }
-
-        /* for custom scrollbar for webkit browser*/
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-    </style>
-    <style media="screen">
-        /*Glass Theme*/
-        .btn-glass {
-            flex-grow: 1;
-            text-align: center;
-            display: inline-block;
-            color: rgba(255, 255, 255, 0.7);
-            text-decoration: none;
-            padding: 1em 2em;
-            font-family: Lato;
-            font-weight: 300;
-            border: 1px dotted transparent;
-            letter-spacing: 0.98pt;
-            text-transform: uppercase;
-            transition: background-position 2s cubic-bezier(0, 1, 0, 1), border-color 500ms, background-color 500ms;
-            position: relative;
-            background-attachment: fixed, scroll;
-            background-size: 100vw 100vh, cover;
-            background-position: center center, 0 0;
-            background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.075) 10%, rgba(255, 255, 255, 0.075) 14%, rgba(255, 255, 255, 0.15) 14%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.075) 17%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.075) 40%, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.075) 60%, rgba(255, 255, 255, 0.075) 66%, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0.075) 70%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse farthest-corner, transparent, rgba(0, 0, 0, 0.2) 110%);
-        }
-
-        .btn-glass:hover:enabled,
-        .btn-glass:disabled {
-            background-position: -100vw 0, 0 0;
-        }
-
-        .btn-glass:active {
-            background-position: -75vw 0, 0 0;
-            border-style: solid;
-        }
-
-        .nav-light {
-            background-color: white;
-        }
-
-        .nav-light .btn-glass {
-            color: #585858;
-            background-color: rgba(17, 17, 17, 0);
-        }
-
-        .nav-light .btn-glass:hover:enabled {
-            color: rgba(255, 255, 255, 0.7);
-            border-color: #000000;
-            background-color: #111111;
-        }
-
-        .nav-light .btn-glass:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(17, 17, 17, 0.5);
-        }
-
-        .nav-light .btn-glass.btn-blue {
-            color: #6ab1d1;
-            background-color: rgba(42, 143, 189, 0);
-        }
-
-        .nav-light .btn-glass.btn-blue:hover:enabled {
-            color: rgba(255, 255, 255, 0.7);
-            border-color: #1c607e;
-            background-color: #2A8FBD;
-        }
-
-        .nav-light .btn-glass.btn-blue:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(42, 143, 189, 0.5);
-        }
-
-        .nav-light .btn-glass.btn-green {
-            color: #a5c75f;
-            background-color: rgba(127, 175, 27, 0);
-        }
-
-        .nav-light .btn-glass.btn-green:hover:enabled {
-            color: rgba(255, 255, 255, 0.7);
-            border-color: #4f6d11;
-            background-color: #7FAF1B;
-        }
-
-        .nav-light .btn-glass.btn-green:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(127, 175, 27, 0.5);
-        }
-
-        .nav-light .btn-glass.btn-yellow {
-            color: #fccd69;
-            background-color: rgba(251, 184, 41, 0);
-        }
-
-        .nav-light .btn-glass.btn-yellow:hover:enabled {
-            color: rgba(255, 255, 255, 0.7);
-            border-color: #d49104;
-            background-color: #FBB829;
-        }
-
-        .nav-light .btn-glass.btn-yellow:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(251, 184, 41, 0.5);
-        }
-
-        .nav-light .btn-glass.btn-red {
-            color: #f56558;
-            background-color: rgba(240, 35, 17, 0);
-        }
-
-        .nav-light .btn-glass.btn-red:hover:enabled {
-            color: rgba(255, 255, 255, 0.7);
-            border-color: #aa180b;
-            background-color: #F02311;
-        }
-
-        .nav-light .btn-glass.btn-red:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(240, 35, 17, 0.5);
-        }
-
-        .nav-light .btn-glass.btn-info {
-            color: #6CDFFF;
-            background-color: rgba(108, 223, 234, 0);
-        }
-
-        .nav-light .btn-glass.btn-info:hover:enabled {
-            color: rgba(255, 255, 255, 0.7);
-            border-color: #29d0e0;
-            background-color: #6CDFEA;
-        }
-
-        .nav-light .btn-glass.btn-info:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(108, 223, 234, 0.5);
-        }
-
-        .nav-dark {
-            background-color: #444;
-        }
-
-        .nav-dark .btn-glass {
-            color: rgba(255, 255, 255, 0.7);
-            background-color: rgba(17, 17, 17, 0);
-        }
-
-        .nav-dark .btn-glass:hover:enabled,
-        .nav-dark .btn-glass:disabled {
-            border-color: #000000;
-            background-color: #111111;
-        }
-
-        .nav-dark .btn-glass:active {
-            position: relative;
-            z-index: 1;
-            box-shadow: 0 0 1em 0.5ex rgba(17, 17, 17, 0.5);
-        }
-
-        nav.btn-bar {
-            display: flex;
-            justify-content: flex-end;
-            flex-wrap: wrap;
-        }
-
-        :root {
-            font-family: 'Open Sans', sans;
-            font-size: 11pt;
-            line-height: 1.6;
-            min-height: 100vh;
-            background-attachment: fixed, scroll;
-            background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png), radial-gradient(ellipse farthest-corner, #555, #999);
-        }
-
-        body {
-            width: 85vw;
-            margin: 4em auto;
-            line-height: inherit;
-        }
-
-        article {
-            padding: 0;
-            border: 2px solid transparent;
-            border-radius: 2px;
-            box-sizing: border-box;
-            background-color: white;
-            box-shadow: 0 1ex 1em rgba(0, 0, 0, 0.3);
-        }
-
-        article+article {
-            margin-top: 4em;
-        }
-
-        article section {
-            margin: 5px;
-        }
-
-        article>section>h2 {
-            font-family: 'Lato';
-            font-weight: 800;
-            font-size: 1.3em;
-            margin-bottom: 0.8em;
-        }
-
-        article>section>p {
-            margin-bottom: 1em;
-            text-indent: 2ch;
-        }
-
-        article>section>p:first-child,
-        article>section>h2+p {
-            text-indent: 0;
-        }
-
-        h1 {
-            font-family: 'Lato';
-            font-weight: 800;
-            text-align: center;
-            font-size: 5vw;
-            color: rgba(255, 255, 255, 0.3);
-        }
-
-        h1 sub {
-            font-size: 2vw;
-        }
-
-        .btn {
-            cursor: pointer
-        }
-
-        .nav-light .btn:disabled {
-            cursor: not-allowed;
-        }
-
-        .nav-dark .btn:disabled {
-            cursor: auto;
-        }
+        /*# sourceMappingURL=main.css.map */
     </style>
 </head>
+<script>
+    /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
+    const floGlobals = {
+        blockchain: "FLO_TEST",
+        apiURL: {
+            FLO: ['https://livenet.flocha.in/', 'https://flosight.duckdns.org/'],
+            FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
+        },
+        fee: 0.0005
+    }
+</script>
 
-<body>
-    <script>
-        const crypto = "FLO_TEST"
-        const mainnet = `https://flosight.duckdns.org`;
-        const testnet = `https://testnet-flosight.duckdns.org`;
-        if (crypto == "FLO")
-            var server = mainnet;
-        else if (crypto == "FLO_TEST")
-            var server = testnet;
-
-        window["loadwait"] = false;
-        window["refreshwait"] = false;
-        const fee = 0.0005;
-    </script>
-
-    <h1>FLO<sub><i>Testnet</i></sub> Web Wallet</h1>
-
-
-    <article>
-        <nav class="btn-bar nav-dark">
-            <button id="getDataBtn" class="btn btn-glass" onclick="getDataMode()">Monitor FLO Data</button>
-            <button id="sendDataBtn" class="btn btn-glass" onclick="sendDataMode()">Send FLO Data</button>
-            <button id="addrGenBtn" class="btn btn-glass" onclick="addrGenMode()">Address Generator</button>
-        </nav>
-    </article>
-
-    <article id="addrGen">
-        <div class="inpContainer">
-            <nav class="btn-bar nav-light">
-                <button id="GenNewAddrBtn" class="btn btn-glass btn-green" onclick="GenNewAddr()">Generate New
-                    Address</button>
-                <button id="RecoverAddrBtn" class="btn btn-glass btn-yellow" onclick="RecoverAddr()">Recover FLO
-                    Address</button>
-            </nav>
+<body onload="onLoadStartUp()">
+    <div id="main-card">
+        <div id="noInternet">
+            There seems to be a problem connecting to the internet.
         </div>
-        <section class="DataTable">
-            <div class="tbl-header">
-                <table cellpadding="0" cellspacing="0" border="0">
-                    <thead>
-                        <tr>
-                            <th>FLO Address</th>
-                            <th>Private Key</th>
-                        </tr>
-                    </thead>
-                </table>
+        <div id="overlay2"></div>
+        <header id="header">
+            <svg viewBox="0 0 96 108" style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
+                <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
+                        c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
+                        c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
+                        c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
+                        c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
+                        c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
+                        c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
+                        c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
+                        c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
+                        c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
+                        c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
+                        c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
+                        c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
+                        c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
+                        c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
+                        c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
+                        c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
+                        C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
+                        c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
+                        c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
+                        c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
+                        c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
+            </svg>
+            <span>RanchiMall</span>
+            <svg viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+                <g>
+                    <path d="M18,4v12c0,1.1-0.9,2-2,2H1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h15C17.1,2,18,2.9,18,4z M16,10
+                    c0-1.4-1.1-2.5-2.5-2.5S11,8.6,11,10s1.1,2.5,2.5,2.5S16,11.4,16,10z" />
+                    <path d="M16,2H1l13-2C15.1,0,16,0.9,16,2z" style="fill: #9e0915" />
+                    <circle cx="13.5" cy="10" r="1.5" />
+                </g>
+            </svg>
+            <span>FLO web wallet</span>
+        </header>
+        <div id="bottom-nav">
+            <div id="indicator"></div>
+            <div class="icons" id="menu" title='Expand side navigation bar'>
+                <svg role="img" viewBox="0 0 20 16">
+                    <g>
+                        <path
+                            d="M19,2H1C0.4,2,0,1.6,0,1v0c0-0.6,0.4-1,1-1l18,0c0.6,0,1,0.4,1,1v0C20,1.6,19.6,2,19,2z" />
+                        <path
+                            d="M12,10H1c-0.6,0-1-0.4-1-1v0c0-0.6,0.4-1,1-1h11c0.6,0,1,0.4,1,1v0C13,9.6,12.6,10,12,10z" />
+                    </g>
+                </svg>
+                <span></span>
             </div>
-            <div class="tbl-content">
-                <table id="addrDisp" cellpadding="0" cellspacing="0" border="0">
-                </table>
+            <div class="icons tabs activeButton" title='Generate or recover FLO address' id="addrGenBtn"
+                onclick="showPage(this.id, 'addrGen')">
+                <svg role="img" viewBox="0 0 20 16">
+                    <g>
+                        <circle cx="9" cy="9" r="3" />
+                        <path
+                            d="M12,14v1c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1v1c0,0.6,0.4,1,1,1h0c0.6,0,1-0.4,1-1V2
+                                                c0-1.1-0.9-2-2-2H2C0.9,0,0,0.9,0,2v14c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2v-2c0-0.6-0.4-1-1-1h0C12.4,13,12,13.4,12,14z" />
+                        <circle cx="17" cy="9" r="3" />
+                    </g>
+                </svg>
+                <h6>Generate</h6>
+                <span>Generate address</span>
             </div>
-        </section>
-    </article>
+            <div class="icons tabs" title='Send FLO data' id="sendDataBtn" onclick="showPage(this.id, 'sendData')">
+                <svg role="img" viewBox="0 0 20 16">
+                    <g>
+                        <path d="M0.3,9.1l6.2,2.2c0.2,0.1,0.4,0,0.5-0.1L19.1,0L0.3,8.2C-0.1,8.4-0.1,9,0.3,9.1z" />
+                        <path
+                            d="M10,18.8l-2.2-6.2c-0.1-0.2,0-0.4,0.1-0.5L19.1,0l-8.2,18.8C10.7,19.2,10.1,19.2,10,18.8z" />
+                    </g>
+                </svg>
+                <h6>Send</h6>
+                <span>Send FLO data</span>
+            </div>
+            <div class="icons tabs" title='Monitor FLO data' id="getDataBtn" onclick="showPage(this.id, 'getData')">
+                <svg role="img" viewBox="0 0 20 16">
+                    <path d="M18,0H2C0.9,0,0,0.9,0,2v14c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V2C20,0.9,19.1,0,18,0z M16.4,6.9l-4.2,4.2
+                                                c-0.4,0.4-1,0.4-1.4,0L8.6,9l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l4.2-4.2c0.4-0.4,1-0.4,1.4,0L11.4,9l3.5-3.5
+                                                c0.4-0.4,1-0.4,1.4,0C16.8,5.9,16.8,6.5,16.4,6.9z" />
+                </svg>
+                <h6>Monitor</h6>
+                <span>Monitor FLO data</span>
+            </div>
+            <div class="icons tabs" title="Settings" id="settingsBtn" onclick="showPage(this.id, 'settings-page')">
+                <svg role="img" x='0' y='0' viewBox="0 0 20 16">
+                    <title>Settings</title>
+                    <g>
+                        <circle cx="9.6" cy="8.7" r="4" />
+                        <path d="M18.8,7.3l-3.4-5.9C14.9,0.5,14,0,13,0H6.2c-1,0-1.9,0.5-2.4,1.4L0.4,7.3c-0.5,0.9-0.5,1.9,0,2.8l3.4,5.9
+                                c0.5,0.9,1.4,1.4,2.4,1.4H13c1,0,1.9-0.5,2.4-1.4l3.4-5.9C19.3,9.2,19.3,8.1,18.8,7.3z M9.6,14.7c-3.3,0-6-2.7-6-6s2.7-6,6-6
+                                s6,2.7,6,6S12.9,14.7,9.6,14.7z" />
+                    </g>
+                </svg>
+                <h6>Settings</h6>
+                <span>Settings</span>
+            </div>
+        </div>
+        <div class="right">
+            <h5 id="textCopied">
+                Copied
+            </h5>
+            <div id="getData" class="page">
+                <div id="add-container" class="hide">
+                    <div id="add">
+                        <h4>Add new address to monitoring list</h4>
+                        <div class="input">
+                            <input autocomplete="off" aria-label="FLO address" type="text" oninput="checkAddress(this)"
+                                onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)"
+                                id="floAddr" />
+                            <label>FLO Address</label>
+                        </div>
+                        <div class="input">
+                            <input autocomplete="off" aria-label="Label" type="text"
+                                onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)"
+                                id="addrLabel" />
+                            <label>Label</label>
+                        </div>
+                        <button onclick="closeAdd()">Cancel</button>
+                        <button id="addAddressToMonitor" onclick="addAddressToMonitoringList()" disabled>Add</button>
+                    </div>
+                </div>
+                <div id="edit-container" class="hide">
+                    <div id="edit">
+                        <h4>Edit display card</h4>
+                        <svg id="loadingSvg" onclick="copyToClipboard(this.parentNode, '0')" viewBox="0 0 13 16"
+                            style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                            <title>Copy FLO address</title>
+                            <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
+                                        C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
+                                        c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z" />
+                        </svg>
+                        <div>
+                            <button onclick="showBalance()">Check balance</button>
+                            <svg class="hide" id="spinner" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;"
+                                xml:space="preserve">
+                                <g>
+                                    <path class='p1' d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
+                                                    S11.3,14,8,14z" />
+                                    <path class='p2' d="M6.5,13.8c-2.2-0.5-3.9-2.3-4.4-4.5c-0.7-3.6,1.7-6.8,5-7.2C7.6,2,8,1.6,8,1.1v0c0-0.6-0.5-1.1-1.1-1
+                                                    C2.5,0.7-0.8,4.9,0.2,9.6c0.6,3.1,2.9,5.5,6,6.2c4.8,1.1,9.1-2.2,9.8-6.7C16,8.5,15.5,8,14.9,8h0c-0.5,0-0.9,0.4-1,0.9
+                                                    C13.5,12.2,10.2,14.7,6.5,13.8z" />
+                                </g>
+                            </svg>
+                            <h4 id="showBalance"></h4>
+                        </div>
+                        <div class="input">
+                            <input autocomplete="off" aria-label="Label" type="text"
+                                onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)"
+                                id="newAddrLabel" />
+                            <label>Label</label>
+                        </div>
+                        <button onclick="removedata()" id="removeAddr">Remove</button>
+                        <button onclick="closeEdit()">Cancel</button>
+                        <button id="editdata" onclick="editdata()">Save</button>
+                    </div>
+                </div>
+                <div id="monitor-list">
+                </div>
+                <svg id="addNewAddress" viewBox="0 0 17 17">
+                    <title>Add new address to monitor</title>
+                    <path id="Union_1" data-name="Union 1"
+                        d="M7.5-3701v-6.5H1a1,1,0,0,1-1-1,1,1,0,0,1,1-1H7.5v-6.5a1,1,0,0,1,1-1,1,1,0,0,1,1,1v6.5H16a1,1,0,0,1,1,1,1,1,0,0,1-1,1H9.5v6.5a1,1,0,0,1-1,1A1,1,0,0,1,7.5-3701Z"
+                        transform="translate(0 3717)" />
+                </svg>
+            </div>
+            <div id="dispMsg" class="hide innerPage">
+                <div class='title-bar'>
+                    <svg onclick="backToMonitoringPage()" viewBox="0 0 16 16">
+                        <title>Go back to monitoring page</title>
+                        <path d="M14.9,6.5h-11L8.4,2c0.4-0.4,0.4-1.2,0-1.6C8-0.1,7.2-0.1,6.8,0.3L0.3,6.8C0.2,6.9,0.1,7,0.1,7.2C0,7.5,0,7.8,0.1,8
+                                    c0.1,0.1,0.1,0.3,0.2,0.4l6.5,6.5c0.4,0.4,1.2,0.4,1.6,0c0.4-0.4,0.4-1.2,0-1.6L3.9,8.8h11c0.6,0,1.1-0.5,1.1-1.1
+                                    C16,7,15.5,6.5,14.9,6.5z" />
+                    </svg>
+                    <span>
+                        <h3 id="addressLabel"></h3>
+                        <h5 id="fullAddress"></h5>
+                    </span>
+                    <svg onclick="refreshdata()" viewBox="0 0 16 16" style="enable-background:new 0 0 19.9 21.5;"
+                        xml:space="preserve">
+                        <title>Refresh transactions</title>
+                        <path d="M10,6h4.7c0.4,0,0.7-0.3,0.7-0.7V0.7C15.3,0.3,15,0,14.6,0c-0.1,0-0.9,0.7-1.9,1.6c-2.2-1.7-5.3-2.2-8.5-0.8
+                                        C2.8,1.5,1.6,2.7,0.9,4.3C-1.9,10.2,2.4,16,8,16c3.2,0,5.9-1.9,7.2-4.6c0.3-0.7-0.2-1.4-0.9-1.4c-0.4,0-0.7,0.2-0.9,0.5
+                                        c-1.3,2.8-4.7,4.4-8.1,2.9c-1.2-0.5-2.2-1.5-2.7-2.7C0.6,6.3,3.8,2,8,2c1.2,0,2.4,0.4,3.3,1c-1.1,1.1-2,2.1-2,2.3
+                                        C9.3,5.7,9.6,6,10,6z" />
+                    </svg>
+                </div>
+                <trans-container id="transactions-container">
 
-    <article id="sendData">
-        <div class="row">
-            <div class="col-50 inpContainer">
-                <label for="getBal_addr" class="inp">
-                    <input type="text" id="getBal_addr" placeholder="&nbsp;">
-                    <span class="label">Sender IDs</span>
-                    <span class="border"></span>
-                </label>
-                <nav class="btn-bar nav-light">
-                    <button class="btn btn-glass btn-blue" onclick="getBalance()">Get Sender Balance</button>
-                </nav>
-                <div class="radioContainer">
-                    <div id="dispBal"></div>
+                </trans-container>
+                <svg onclick="backToTop()" id="scrollToTop" viewBox="0 0 16 9" style="enable-background:new 0 0 16 9;"
+                    xml:space="preserve">
+                    <path class="st0" d="M15.7,7.3l-7-7c-0.4-0.4-1-0.4-1.4,0l-7,7c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0L8,2.4l6.3,6.3
+                            c0.4,0.4,1,0.4,1.4,0C16.1,8.3,16.1,7.7,15.7,7.3z" />
+                </svg>
+            </div>
+
+            <div id="sendData" class="page hide">
+                <div id="sdleft">
+                    <div id="dispBal">
+                        <svg class="hide" id="loadBalance" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;"
+                            xml:space="preserve">
+                            <g>
+                                <path class='p1' d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
+                                                            S11.3,14,8,14z" />
+                                <path class='p2' d="M6.5,13.8c-2.2-0.5-3.9-2.3-4.4-4.5c-0.7-3.6,1.7-6.8,5-7.2C7.6,2,8,1.6,8,1.1v0c0-0.6-0.5-1.1-1.1-1
+                                                            C2.5,0.7-0.8,4.9,0.2,9.6c0.6,3.1,2.9,5.5,6,6.2c4.8,1.1,9.1-2.2,9.8-6.7C16,8.5,15.5,8,14.9,8h0c-0.5,0-0.9,0.4-1,0.9
+                                                            C13.5,12.2,10.2,14.7,6.5,13.8z" />
+                            </g>
+                        </svg>
+                        <h5>Available balance</h5>
+                        <span id="dispBalInt">0</span>
+                        <span id="dispBalFloat"></span> FLO(s)
+                        <h5>To send FLO data, make sure you have enough balance.</h5>
+                    </div>
+                    <div class="input">
+                        <input autocomplete="off" aria-label="FLO address" onfocus="animateInput(this.parentNode)"
+                            onblur="revertBack(this.parentNode)" type="text" id="getBal_addr"
+                            oninput="checkBalAddress(this)" />
+                        <label>FLO address</label>
+                        <button id="getBal_btn" onclick="getBal()" disabled>Check balance</button>
+                    </div>
+                </div>
+                <div id="sdright">
+                    <div class="input">
+                        <input autocomplete="off" aria-label="Receiver's address" oninput="validateInfo(this)"
+                            type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)"
+                            id="receiver" />
+                        <label>Receiver's address</label>
+                    </div>
+                    <div class="input">
+                        <input autocomplete="off" aria-label="Amount" type="number"
+                            onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="amount" />
+                        <label>Amount</label>
+                    </div>
+                    <div class="text-area">
+                        <textarea maxlength="1040" aria-label="FLO data" data-gramm_editor="false"
+                            onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" rows="8"
+                            id="flotextdata"></textarea>
+                        <label>FLO data</label>
+                        <div id="show_character_count">1040/1040</div>
+                    </div>
+                    <p id="flo_data_status"></p>
+                    <button class="primaryButton hide-completely" id="fix_invalid_button" onclick="removeInvalid()">Fix</button>
+                    <button class="primaryButton" id="sendBtn" onclick="showPrivKeyPage()" disabled>Send</button>
                 </div>
             </div>
-            <div class="col-50 inpContainer">
-                <label for="sendReceiver" class="inp">
-                    <input type="text" id="sendReceiver" placeholder="&nbsp;">
-                    <span class="label">Receiver ID</span>
-                    <span class="border"></span>
-                </label>
-                <label for="sendAmt" class="inp">
-                    <input type="number" id="sendAmt" placeholder="&nbsp;">
-                    <span class="label">Amount</span>
-                    <span class="border"></span>
-                </label>
-                <label for="flotextdata" class="inp">
-                    <textarea id="flotextdata" placeholder="&nbsp;"></textarea>
-                    <span class="label">FLO Data</span>
-                    <span class="border"></span>
-                    <div id="show_character_count">1040/1040</div>
-                </label>
-                <nav class="btn-bar nav-light">
-                    <button class="btn btn-glass btn-green" id="sendBtn" onclick="sendTransaction()"
-                        disabled>Send</button>
-                </nav>
+            <div class="innerPage hide" id="privKeyPage">
+                <div class='title-bar'>
+                    <svg onclick="showPage('sendDataBtn', 'sendData')" viewBox="0 0 16 16">
+                        <title>Go back to monitoring page</title>
+                        <path d="M14.9,6.5h-11L8.4,2c0.4-0.4,0.4-1.2,0-1.6C8-0.1,7.2-0.1,6.8,0.3L0.3,6.8C0.2,6.9,0.1,7,0.1,7.2C0,7.5,0,7.8,0.1,8
+                                            c0.1,0.1,0.1,0.3,0.2,0.4l6.5,6.5c0.4,0.4,1.2,0.4,1.6,0c0.4-0.4,0.4-1.2,0-1.6L3.9,8.8h11c0.6,0,1.1-0.5,1.1-1.1
+                                            C16,7,15.5,6.5,14.9,6.5z" />
+                    </svg>
+                    <span>
+                        <h3>Send</h3>
+                    </span>
+                </div>
+                <div id="enterPrivKey">
+                    <div class="input">
+                        <input autocomplete="off" aria-label="private key" type="text"
+                            onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="privKey" />
+                        <label>Private key</label>
+                    </div>
+                    <button onclick="sendMessage()">continue</button>
+                </div>
+            </div>
+            <div id="transaction-complete" class="innerPage hide">
+                <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+                    <g>
+                        <path d="M14.3,2.4L7.9,8.7L5.8,6.6c-0.4-0.4-1-0.4-1.4,0S4,7.6,4.4,8l2.8,2.8c0.4,0.4,1,0.4,1.4,0l7.1-7.1
+                                c0.4-0.4,0.4-1,0-1.4C15.3,2,14.7,2,14.3,2.4z" />
+                        <path
+                            d="M13.9,7C14,7.3,14,7.7,14,8c0,3.3-2.7,6-6,6s-6-2.7-6-6s2.7-6,6-6c1.5,0,2.8,0.5,3.9,1.4L13.3,2
+                                C11.9,0.8,10,0,8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8c0-0.9-0.2-1.8-0.4-2.6L13.9,7z" />
+                    </g>
+                </svg>
+                <h3>Transaction successful</h3>
+                <h4 id="transactionId"></h4>
+                <button class="primaryButton" onclick="showPage('sendDataBtn', 'sendData')">Done</button>
+            </div>
+            <div id="addrGen" class="page hide">
+                <button id="GenNewAddrBtn" class="primaryButton">Generate new address</button>
+                <button id="showRecoveryModal">Recover FLO address</button><br /><br />
+                <div id="addrDisp">
+                </div>
+            </div>
+            <div id="settings-page" class="page hide">
+                <section>
+                    <h4>Dark mode</h4>
+                    <div>
+                        <span class="row">
+                            Automatic<br>
+                            <span>Dark mode active : 6pm - 6am</span>
+                        </span>
+                        <label class="switch">
+                            <input autocomplete="off" aria-label="Toggle automatic dark theme" type="checkbox"
+                                id="auto-mode" type="checkbox" onclick="autoMode()" />
+                            <span class="slider round"></span>
+                        </label>
+                    </div>
+                    <div>
+                        <span class="row">Manual<br>
+                            <span>Dark mode</span>
+                        </span>
+                        <label class="switch">
+                            <input autocomplete="off" aria-label="Toggle manual dark theme" type="checkbox"
+                                id="manual-mode" type="checkbox" onclick="theme()" />
+                            <span class="slider round"></span>
+                        </label>
+                    </div>
+                </section>
+                <section id="deleteDB">
+                    <h4>Clear all local data</h4>
+                    <h5>This will delete all local Web Wallet data like added addresses and locally stored
+                        transactions.After clearing local data you may experience slow loading of newly added address,
+                        please proceed cautiously! </h5>
+                    <button class="primaryButton" onclick="deleteDB()">Clear data</button>
+                </section>
+                <section>
+                    <h4>About</h4>
+                    <h5>Version 2.7.4</h5>
+                    <a class="border-card" href="https://flo.cash/" target="_blank" rel="noopener noreferrer">
+                        <h5>Powered by</h5>
+                        <svg viewBox="0 0 108 48" style="enable-background:new 0 0 107.65 47.07;" xml:space="preserve">
+                            <g>
+                                <path class="flo-logo"
+                                    d="M34.2,32.4c0,0,3.75-0.18,7.41-3.86c2.96-2.98,3.65-6.66,3.99-8.52c-11.04-0.63-12.36,0.99-13.71,1.68
+                                                c-1.19,0.61-5.33,4.55-5.33,4.55s3.06-3.13,3.2-9.94c0.09-4.54-1.02-7.39-2.72-10.64C25.29,2.33,22.79,0,22.79,0l0.01,4.97
+                                                c0,0,4.35,2.84,4.35,11.84c0,6.52-4.35,11.02-4.35,11.02s-4.35-4.5-4.35-11.02c0-9.01,4.35-11.84,4.35-11.84L22.79,0
+                                                c0,0-2.48,2.33-4.23,5.67c-1.7,3.25-2.81,6.1-2.72,10.64c0.13,6.81,3.2,9.94,3.2,9.94s-4.14-3.95-5.33-4.55
+                                                c-1.35-0.69-2.67-2.31-13.71-1.68c0.34,1.86,1.03,5.54,3.99,8.52c3.66,3.68,7.41,3.86,7.41,3.86s-5.05-2.03-7.15-9.45
+                                                c0,0,5.76-0.7,9.63,1.87c2.52,1.67,4.86,4.26,6.79,6.01c0,0-2.58-0.04-6.81,1.88c-2.54,1.15-3.92,2.84-4.44,4.38
+                                                c-0.36,1.06-0.2,2.27-0.2,2.27s3.31,0.31,5.94,0c1.99-0.23,3.42-2.16,3.42-2.16s-2,0.78-3.95,0.78c-2.06,0-2.67-0.66-2.67-0.66
+                                                c0.98-3.64,8.68-5.19,8.68-5.19s-1.34,2.6-1.42,6.5c-0.1,4.79,3.57,8.52,3.57,8.45c0,0.07,3.67-3.66,3.57-8.45
+                                                c-0.08-3.9-1.42-6.5-1.42-6.5s7.71,1.55,8.68,5.19c0,0-0.61,0.66-2.67,0.66c-1.95,0-3.95-0.78-3.95-0.78s1.43,1.93,3.42,2.16
+                                                c2.63,0.31,5.94,0,5.94,0s0.16-1.21-0.2-2.27c-0.52-1.54-1.9-3.23-4.44-4.38c-4.23-1.92-6.81-1.88-6.81-1.88
+                                                c1.93-1.76,4.27-4.34,6.79-6.01c3.87-2.57,9.63-1.87,9.63-1.87C39.26,30.38,34.2,32.4,34.2,32.4z M22.8,43.06
+                                                c-0.95-1.37-1.47-2.13-1.47-4.26c0-2.4,1.12-4.61,1.47-5.14c0.35,0.52,1.47,2.74,1.47,5.14C24.27,40.92,23.75,41.69,22.8,43.06z" />
+                                <g>
+                                    <polygon class="flo-logo"
+                                        points="73.53,36.36 73.53,20.01 70.53,20.01 70.53,36.36 70.53,39.35 84,39.35 84,36.36 		" />
+                                    <g>
+                                        <rect x="52.75" y="20.01" class="flo-logo" width="13.47" height="2.93" />
+                                        <polygon class="flo-logo" points="63.74,28.36 55.74,28.36 52.75,28.36 52.75,31.35 52.75,39.35 55.74,39.35 55.74,31.35 63.74,31.35 
+                                                                    " />
+                                    </g>
+                                    <path class="flo-logo" d="M97.99,20.01c-5.34,0-9.67,4.33-9.67,9.67s4.33,9.67,9.67,9.67s9.67-4.33,9.67-9.67S103.33,20.01,97.99,20.01
+                                                    z M97.99,35.85c-3.41,0-6.17-2.76-6.17-6.17c0-3.41,2.76-6.17,6.17-6.17c3.41,0,6.17,2.76,6.17,6.17
+                                                    C104.15,33.09,101.39,35.85,97.99,35.85z" />
+                                </g>
+                            </g>
+                        </svg>
+                    </a>
+                </section>
             </div>
         </div>
-    </article>
-
-    <article id="getData">
-        <div class="inpContainer">
-            <label for="getAddr" class="inp">
-                <input type="text" id="getAddr" placeholder="&nbsp;">
-                <span class="label">FLO ID</span>
-                <span class="border"></span>
-            </label>
-            <nav class="btn-bar nav-light">
-                <button id="getData" class="btn btn-glass btn-blue" onclick="monitorData()">Monitor Data</button>
-                <button id="clearLocalData" class="btn btn-glass btn-red" onclick="clearLocalData()">Clear Local
-                    Data</button>
-            </nav>
+    </div>
+    <div id="overlay">
+        <div id="popup">
+            <h4>Recover FLO address</h4>
+            <h5>Please enter your private key.</h5>
+            <div class="input">
+                <input autocomplete="off" aria-label="Private key" type="text" onfocus="animateInput(this.parentNode)"
+                    onblur="revertBack(this.parentNode)" id="pop" oninput="checkPrivateKey(this)" />
+                <label>Private key</label>
+            </div>
+            <button onclick="fadeout()">Cancel</button>
+            <button id="ok" onclick="RecoverAddr()" disabled>Ok</button>
         </div>
-        <div id="dispData"></div>
-    </article>
-
+    </div>
     <script>
-        getDataMode(); //default start
-        startup();
+        //UI for webWallet
+        // repeatedly accessed DOM elements
+        let bottomNav = document.getElementById('bottom-nav'),
+            floAddr = document.getElementById('floAddr'),
+            addrLabel = document.getElementById('addrLabel'),
+            newAddrLabel = document.getElementById('newAddrLabel'),
+            recentPage = 'addrGenBtn',
+            mode, activeAddress, initial = 0,
+            limit = 10,
+            scrollingEvent;
+        window.addEventListener('offline', () => {
+            document.getElementById('noInternet').classList.add('show');
+        })
+        window.addEventListener('online', () => {
+            document.getElementById('noInternet').classList.remove('show');
+        })
+        const html = document.querySelector('html');
+        if (localStorage.dark === 'yes') {
+            nightlight();
+            document.getElementById('manual-mode').checked = true;
+            clearInterval(mode);
+        } else if (localStorage.dark === 'auto') {
+            document.getElementById('auto-mode').checked = true;
+            document.getElementById('manual-mode').checked = false;
+            autoMode();
+            mode = setInterval(() => {
+                let d = new Date(),
+                    t = d.getHours();
+                if (t > 6 && t < 18) {
+                    daylight();
+                } else {
+                    nightlight();
+                }
+            }, 60000);
+        } else {
+            daylight();
+            document.getElementById('manual-mode').checked = false;
+            clearInterval(mode);
+        }
 
-        function startup() {
-            var idb = indexedDB.open("FLO_webWallet_testnet");
-            new Promise(function (resolve, reject) {
-                idb.onerror = function (event) {
-                    //console.log("Error in opening IndexedDB!");
-                    reject(Error("Error in opening IndexedDB!"));
-                };
-                idb.onupgradeneeded = function (event) {
-                    var objectStore = event.target.result.createObjectStore('Label');
-                };
-                idb.onsuccess = function (event) {
-                    var db = event.target.result;
-                    var obslabel = db.transaction('Label', "readwrite").objectStore('Label');
-                    var val = obslabel.getAllKeys();
-                    //  console.log(val.result);
-                    val.onsuccess = function (event) {
-                        resolve(event.target.result);
-                    }
+        function daylight() {
+            html.setAttribute("style",
+                `--bw: #000;--back-color: #EBEBEB;--body-color: #fff;--sidenav-color:#f0f0f0;--sec-color: #ccc;--opac-accent-color: rgb(210, 13, 29, 0.1);`
+            );
+        }
+
+        function nightlight() {
+            html.setAttribute("style",
+                `--bw: #fff;--back-color: #222;--body-color: #2a2a2a;--sidenav-color:#313131;--sec-color: #555;--opac-accent-color: rgb(210, 13, 29, 0.2);`
+            );
+        }
+
+        function autoMode() {
+            let x = document.getElementById('auto-mode');
+            if (x.checked) {
+                localStorage.setItem('dark', 'auto');
+                document.getElementById('manual-mode').checked = false;
+                let d = new Date();
+                let t = d.getHours();
+                if (t > 6 && t < 18) {
+                    daylight();
+                } else {
+                    nightlight();
                 }
-            }).then(res => {
-                if (res.length) {
-                    var input = document.getElementById("getAddr");
-                    input.value = res.join(',');
-                    monitorData();
-                    input.value = "";
-                }
-            }).catch(error => {
-                console.log(error.message);
+            } else {
+                localStorage.setItem('dark', 'no');
+                daylight();
+                clearInterval(mode);
+            }
+        }
+
+        function theme() {
+            let x = document.getElementById('manual-mode');
+            if (!x.checked) {
+                daylight();
+                localStorage.setItem('dark', 'no');
+            } else {
+                nightlight();
+                localStorage.setItem('dark', 'yes');
+                document.getElementById('auto-mode').checked = false;
+            }
+        }
+        document.getElementById('showRecoveryModal').onclick = function () {
+            document.getElementById('overlay').classList.add('show');
+            document.getElementById('popup').classList.add('slide-up');
+            if (window.innerWidth > 768)
+                document.getElementById('pop').focus();
+            let y = document.addEventListener("click", function (event) {
+                if (event.target.closest('#popup') || event.target.closest('#showRecoveryModal')) return;
+                fadeout();
+                document.removeEventListener('click', y);
+            });
+        }
+        document.getElementById('pop').addEventListener('keypress', function (event) {
+            if (event.keyCode == 13)
+                document.getElementById('ok').click();
+        });
+
+        document.getElementById('getBal_addr').addEventListener('keypress', function (event) {
+            if (event.keyCode == 13)
+                document.getElementById('getBal_btn').click();
+        });
+
+        addrLabel.addEventListener('keypress', function (event) {
+            if (event.keyCode == 13)
+                document.getElementById('addAddressToMonitor').click();
+        });
+        floAddr.addEventListener('keypress', function (event) {
+            if (event.keyCode == 13)
+                document.getElementById('addAddressToMonitor').click();
+        });
+        newAddrLabel.addEventListener('keypress', (event) => {
+            if (event.keyCode == 13)
+                editdata();
+        });
+
+        function closeSidePanel() {
+            if (window.innerWidth > 768) {
+                bottomNav.classList.remove('reveal');
+                document.getElementById('overlay2').classList.remove('show');
+            }
+        }
+
+        function fadeout() {
+            document.getElementById('overlay').classList.remove('show');
+            document.getElementById('popup').classList.remove('slide-up');
+            document.getElementById('pop').value = '';
+        }
+        document.getElementById('menu').addEventListener('click', function () {
+            if (window.innerWidth > 768) {
+                bottomNav.classList.toggle('reveal');
+            }
+            document.getElementById('overlay2').classList.toggle('show');
+            let y = document.addEventListener("click", function (event) {
+                if (event.target.closest('#menu') || event.target.closest('#bottom-nav')) return;
+                closeSidePanel();
+                document.removeEventListener('click', y);
+            });
+        });
+
+        function animateInput(thisInput) {
+            thisInput.children[1].classList.add('label-active');
+        }
+
+        function revertBack(thisInput) {
+            if (thisInput.children[0].value == '')
+                thisInput.children[1].classList.remove('label-active');
+        }
+
+        function clickedAddress(thisCard) {
+            let address = thisCard.children[1].textContent,
+                label = thisCard.children[0].textContent;
+            if (thisCard.lastElementChild.tagName === 'badge')
+                thisCard.lastElementChild.remove();
+            monitorData(address, label);
+            showInnerPage('dispMsg');
+        }
+
+        function showAdd() {
+            document.getElementById('add-container').classList.add('show');
+            document.getElementById('add').classList.add('slide-up');
+            if (window.innerWidth > 768)
+                floAddr.focus();
+        }
+
+        function closeAdd() {
+            document.getElementById('add-container').classList.remove('show');
+            document.getElementById('add').classList.remove('slide-up');
+            floAddr.value = '';
+            addrLabel.value = '';
+            document.getElementById('addAddressToMonitor').disabled = true;
+        }
+        document.getElementById('addNewAddress').onclick = function () {
+            showAdd();
+            let y = document.addEventListener("click", function (event) {
+                if (event.target.closest('#add') || event.target.closest('#addNewAddress')) return;
+                closeAdd();
+                document.removeEventListener('click', y);
             });
         }
 
-        function clearLocalData() {
-            document.getElementById("dispData").innerHTML = '';
-            var DBDeleteRequest = window.indexedDB.deleteDatabase("FLO_webWallet_testnet");
-            DBDeleteRequest.onsuccess = function (event) {
-                console.log("Database deleted successfully");
-                alert("Successfully Cleared Local Data!");
-            };
-        }
-
-        function addrGenMode() {
-            document.getElementById("addrGenBtn").disabled = true;
-            document.getElementById("sendDataBtn").disabled = false;
-            document.getElementById("getDataBtn").disabled = false;
-            document.getElementById("addrGen").style.display = 'block';
-            document.getElementById("sendData").style.display = 'none';
-            document.getElementById("getData").style.display = 'none';
-        }
-
-        function sendDataMode() {
-            document.getElementById("addrGenBtn").disabled = false;
-            document.getElementById("sendDataBtn").disabled = true;
-            document.getElementById("getDataBtn").disabled = false;
-            document.getElementById("addrGen").style.display = 'none';
-            document.getElementById("sendData").style.display = 'block';
-            document.getElementById("getData").style.display = 'none';
-        }
-
-        function getDataMode() {
-            document.getElementById("addrGenBtn").disabled = false;
-            document.getElementById("sendDataBtn").disabled = false;
-            document.getElementById("getDataBtn").disabled = true;
-            document.getElementById("addrGen").style.display = 'none';
-            document.getElementById("sendData").style.display = 'none';
-            document.getElementById("getData").style.display = 'block';
-        }
-    </script>
-
-    <script>
-        function ajax(method, uri) {
-            var request = new XMLHttpRequest();
-            var url = `${server}/${uri}`
-            console.log(url)
-            var result;
-            request.open(method, url, false);
-            request.onload = function () {
-                if (request.readyState == 4 && request.status == 200)
-                    result = this.response;
-                else {
-                    console.log('error');
-                    result = false;
-                }
-            };
-            request.send();
-            console.log(result);
-            return result;
-        }
-
-        function validateAddr(inputtxt) {
-            try {
-                var addr = new Bitcoin.Address(inputtxt);
-                return true;
-
-            } catch {
-                return false;
+        function checkAddress(thisInput) {
+            let x = document.getElementById('addAddressToMonitor');
+            if (floCrypto.validateAddr(thisInput.value))
+                x.disabled = false;
+            else {
+                x.disabled = true;
             }
         }
 
-        function verifyWIF(wif, addr) {
-            try {
-                var key = new Bitcoin.ECKey(wif);
-                if (key.priv == null) {
-                    return false;
-                }
-                key.setCompressed(true);
-                var bitcoinAddress = key.getBitcoinAddress();
-                if (addr == bitcoinAddress)
-                    return true;
-                else
-                    return false;
+        function addAddressToMonitoringList() {
+            let label = addrLabel.value;
+            if (label == '')
+                label = 'Unknown'
+            compactIDB.addData('labels', label, floAddr.value).then((resolve) => {
+                createAddressCards(floAddr.value, label);
+                floWebWallet.syncTransactions(floAddr.value);
+                closeAdd();
+            }).catch((error) => {
+                alert(error);
+            })
+        }
+
+        document.getElementById(recentPage).click();
+
+        function showPage(element, page) {
+            let allPages = document.querySelectorAll('.page'),
+                allTabs = document.querySelectorAll('.tabs'),
+                allInnerPages = document.querySelectorAll('.innerPage');
+            bottomNav.classList.remove('hide');
+            document.getElementById('header').classList.remove('hide');
+            allPages.forEach(function (pages) {
+                pages.classList.add('hide');
+            });
+            allTabs.forEach(function (tab) {
+                tab.classList.remove('activeButton');
+            });
+            allInnerPages.forEach(function (Ipage) {
+                Ipage.classList.add('hide');
+            });
+            let pageBtn = document.getElementById(element);
+            pageBtn.classList.add('activeButton');
+            if (window.innerWidth > 768) {
+                let topDistance = pageBtn.offsetTop - 16,
+                    height = pageBtn.getBoundingClientRect().height;
+                document.getElementById('indicator').setAttribute('style', 'transform: translateY(' + (topDistance + (
+                    height / 2)) + 'px');
             }
-            catch (e) {
-                // browser does not have sufficient JavaScript support to generate a bitcoin address
-                alert(e);
-                console.log("error");
+            let x = document.getElementById(page);
+            x.classList.remove('hide');
+            if (!(recentPage == element)) {
+                x.classList.add('fade');
+                x.addEventListener('animationEnd', function () {
+                    x.classList.remove('fade');
+                });
+                x.addEventListener('webkitAnimationEnd', function () {
+                    x.classList.remove('fade');
+                });
+            }
+            recentPage = element;
+        }
+
+        let resizeComplete;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeComplete);
+            resizeComplete = setTimeout(() => {
+                setElements();
+            }, 200);
+        });
+
+        function setElements() {
+            let pageBtn = document.getElementById(recentPage),
+                indicator = document.getElementById('indicator'),
+                addNewAddress = document.getElementById('addNewAddress'),
+                scrollToTop = document.getElementById('scrollToTop');
+            if (window.innerWidth < 768) {
+                bottomNav.classList.remove('reveal');
+                document.getElementById('overlay2').classList.remove('show');
+                addNewAddress.setAttribute('style', `bottom: 54px; right: 0`);
+                scrollToTop.setAttribute('style', `bottom: 0; right: 0`);
+            } else {
+                let mainCard = document.getElementById('main-card').getBoundingClientRect(),
+                    bottom = ((window.innerHeight - mainCard.height) / 2) + 16,
+                    right = ((window.innerWidth - mainCard.width) / 2) + 16;
+                addNewAddress.setAttribute('style', `bottom: ${bottom}px; right: ${right}px`);
+                scrollToTop.setAttribute('style', `bottom: ${bottom}px; right: ${right}px`);
+                let topDistance = pageBtn.offsetTop - 16,
+                    height = pageBtn.getBoundingClientRect().height;
+                indicator.setAttribute('style', 'transform: translateY(' + (topDistance + (height / 2)) + 'px');
             }
         }
-    </script>
 
-    <script>
-        function GenNewAddr() {
-            try {
-                var key = new Bitcoin.ECKey(false);
-                key.setCompressed(true);
-                var bitcoinAddress = key.getBitcoinAddress();
-                var privateKeyWif = key.getBitcoinWalletImportFormat();
-                console.log(bitcoinAddress);
-                console.log(privateKeyWif);
-                alert("FLO Address \t: " + bitcoinAddress + "\nSecret Key \t: " + privateKeyWif);
-                var table = document.getElementById("addrDisp");
-                var row = table.insertRow(0);
-                var cell1 = row.insertCell(0);
-                var cell2 = row.insertCell(1);
-                cell1.innerHTML = bitcoinAddress;
-                cell2.innerHTML = privateKeyWif;
+        function showInnerPage(page) {
+            let allMainPages = document.querySelectorAll('.page'),
+                allInnerPages = document.querySelectorAll('.innerPage');
+            allMainPages.forEach(function (pages) {
+                pages.classList.add('hide');
+            });
+            allInnerPages.forEach(function (Ipage) {
+                Ipage.classList.add('hide');
+            });
+            bottomNav.classList.add('hide');
+            document.getElementById('header').classList.add('hide');
+            let x = document.getElementById(page);
+            x.classList.remove('hide');
+            x.classList.add('fade');
+            x.addEventListener('animationEnd', function () {
+                x.classList.remove('fade');
+            });
+            x.addEventListener('webkitAnimationEnd', function () {
+                x.classList.remove('fade');
+            });
+        }
+
+        function checkBalAddress(thisInput) {
+            let x = document.getElementById('getBal_btn');
+            if (floCrypto.validateAddr(thisInput.value))
+                x.disabled = false;
+            else {
+                x.disabled = true;
             }
-            catch (e) {
-                // browser does not have sufficient JavaScript support to generate a bitcoin address
-                alert(e);
-                console.log("error");
+        }
+
+        function showBalance() {
+            let loading = document.getElementById('spinner');
+            loading.classList.add('show', 'spin');
+            floWebWallet.getBalance(activeAddress.children[1].textContent).then((balance) => {
+                loading.classList.remove('show', 'spin');
+                document.getElementById('showBalance').textContent = `${balance} FLOs`;
+            }).catch((error) => {
+                loading.classList.remove('show', 'spin');
+                document.getElementById('showBalance').textContent = `Something went wrong!`;
+            })
+        }
+
+        function getBal() {
+            let x = document.getElementById("getBal_addr"),
+                loading = document.getElementById('loadBalance'),
+                intPartText = document.getElementById('dispBalInt'),
+                floatPartText = document.getElementById('dispBalFloat');
+            loading.classList.add('show', 'spin');
+            floWebWallet.getBalance(x.value).then((retrievedBal) => {
+                let parts = retrievedBal.toString().split("."),
+                    floatPart = parts[1],
+                    intPart = parts[0];
+                intPartText.textContent = intPart;
+                if (floatPart)
+                    floatPartText.textContent = `.${floatPart}`;
+                document.getElementById('sdright').setAttribute('style', 'pointer-events: all; opacity: 1')
+                loading.classList.remove('show', 'spin');
+            }).catch((error) => {
+                console.log(error);
+                loading.classList.remove('show', 'spin');
+            })
+        }
+
+        document.getElementById('GenNewAddrBtn').addEventListener('click', () => {
+            let x = floCrypto.generateNewID(),
+                par = document.getElementById('addrDisp'),
+                card = document.createElement('card');
+            card.classList.add('highlight');
+            card.innerHTML = `<div>
+                                <h5>New FLO Address</h5>
+                                <h4>${x.floID}</h4>
+                            <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                <title>Copy FLO address</title>
+                                <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
+                                C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
+                                c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z"/>
+                            </svg>
+                            </div>
+                            <div><h5>Private Key</h5>
+                                <h4>${x.privKey}</h4>
+                                <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                    <title>Copy private key</title>
+                                    <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
+                                    C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
+                                    c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z"/>
+                                </svg>
+                            </div>`;
+            par.insertBefore(card, par.firstChild);
+            card.addEventListener('animationEnd', function () {
+                card.classList.remove('highlight');
+            });
+            card.addEventListener('webkitAnimationEnd', function () {
+                card.classList.remove('highlight');
+            });
+        });
+
+        function checkPrivateKey(thisInput) {
+            if (thisInput.value === '' || thisInput.value.length < 52)
+                document.getElementById('ok').disabled = true;
+            else {
+                document.getElementById('ok').disabled = false;
             }
         }
 
         function RecoverAddr() {
-            try {
-                wif = prompt("Enter Secret (or) Private Key :");
-                if (wif.length < 1) {
-                    alert("Private Key cannot be empty");
-                    return;
-                }
-                var key = new Bitcoin.ECKey(wif);
-                if (key.priv == null) {
-                    alert("Invalid Private key");
-                    return;
-                }
-                key.setCompressed(true);
-                var bitcoinAddress = key.getBitcoinAddress();
-                var privateKeyWif = key.getBitcoinWalletImportFormat();
-                console.log(bitcoinAddress);
-                console.log(privateKeyWif);
-                alert("FLO Address \t: " + bitcoinAddress + "\nSecret Key \t: " + privateKeyWif);
-                var table = document.getElementById("addrDisp");
-                var row = table.insertRow(0);
-                var cell1 = row.insertCell(0);
-                var cell2 = row.insertCell(1);
-                cell1.innerHTML = bitcoinAddress;
-                cell2.innerHTML = privateKeyWif;
-            }
-            catch (e) {
-                // browser does not have sufficient JavaScript support to generate a bitcoin address
-                console.log(e);
-            }
+            let wif = document.getElementById('pop');
+            floWebWallet.recoverAddr(wif.value).then((recoverAddr) => {
+                let par = document.getElementById('addrDisp'),
+                    card = document.createElement('card');
+                card.classList.add('highlight');
+                card.innerHTML = `<div>
+                                            <h5>Recovered FLO Address</h5>
+                                            <h4>${recoverAddr.floID}</h4>
+                                            <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                                <title>Copy FLO address</title>
+                                                <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
+                                                C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
+                                                c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z"/>
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <h5>Private Key</h5>
+                                            <h4>${recoverAddr.privKey}</h4>
+                                            <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                            <title>Copy private key</title>
+                                            <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
+                                                C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
+                                                c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z"/>
+                                            </svg>
+                                        </div>`;
+                par.insertBefore(card, par.firstChild);
+                fadeout();
+            }).catch((error) => {
+                alert('invalid private key');
+                console.log(error);
+            })
         }
-    </script>
 
-    <script>
-        function getBalance() {
-            var addrs = document.getElementById("getBal_addr").value;
-            var dispBal = document.getElementById("dispBal");
-            if (addrs.length < 1) {
-                alert("Address field cannot be empty.");
-                return false;
+        function backToMonitoringPage() {
+            let parent = document.getElementById('transactions-container');
+            while (parent.lastChild) {
+                parent.removeChild(parent.lastChild);
             }
-            let addrList = addrs.split(',');
-            addrList = Array.from(new Set(addrList));
-            var result = "";
-            var totBal = 0.0;
-            var flag = 0;
-            addrList.forEach(function (addr) {
-                if (!validateAddr(addr)) {
-                    alert(`Invalid address : ${addr}`);
-                    return;
-                }
-                var response = ajax("GET", `api/addr/${addr}/balance`);
-                if (response) {
-                    result += `<label><input class="option-input radio" type="radio" name="sender" value=${addr} checked>${addr} ${response}</label>\n`;
-                    totBal += parseFloat(response);
-                    flag = 1;
-                } else {
-                    console.log("error : connection failed!");
-                    alert("error : connection failed!");
-                }
-
-            });
-            if (flag == 0) {
-                document.getElementById("sendBtn").disabled = true;
-                return;
-            }
-            dispBal.innerHTML = `${result}<label>Total Balance : ${totBal}</label>`;
-            document.getElementById("sendBtn").disabled = false;
+            showPage('getDataBtn', 'getData');
+            initial = 0, limit = 10;
+            document.getElementById('transactions-container').removeEventListener('scroll', scrollingEvent);
         }
-    </script>
-    <script>
-        function sendTransaction() {
-            var radioButtons = document.getElementsByName("sender");
-            var sender;
-            for (var x = 0; x < radioButtons.length; x++)
-                if (radioButtons[x].checked)
-                    sender = radioButtons[x].value;
 
-            var receiver = document.getElementById("sendReceiver").value;
-            if (!validateAddr(receiver)) {
-                alert(`Invalid address : ${receiver}`);
-                return;
-            }
-
-            var trx = bitjs.transaction();
-            var sendAmt = parseFloat(document.getElementById("sendAmt").value);
-            var utxoAmt = 0.0;
-            var x = sendAmt + fee;
-            var response = ajax("GET", `api/addr/${sender}/utxo`);
-            var utxos = JSON.parse(response);
-            for (var x = utxos.length - 1; (x >= 0) && (utxoAmt < sendAmt + fee); x--) {
-                if (utxos[x].confirmations) {
-                    trx.addinput(utxos[x].txid, utxos[x].vout, utxos[x].scriptPubKey)
-                    utxoAmt += utxos[x].amount;
-                } else
-                    break;
-            }
-            if (utxoAmt < sendAmt + fee) {
-                alert("Insufficient balance!");
-                return;
-            }
-
-            trx.addoutput(receiver, sendAmt);
-            console.log(receiver + ":" + sendAmt);
-
-            var change = utxoAmt - sendAmt - fee;
-            if (change > 0)
-                trx.addoutput(sender, change);
-            console.log(sender + ":" + change);
-
-            var sendFloData = document.getElementById("flotextdata").value;
-            trx.addflodata(sendFloData);
-            var wif = prompt("Enter private key");
-            if (wif.length < 1 || !verifyWIF(wif, sender)) {
-                alert("Invalid Private key!");
-                return;
-            }
-            var signedTxHash = trx.sign(wif, 1);
-            console.log(signedTxHash);
-            var result = broadcastTx(signedTxHash);
-            alert(result);
-        }
-    </script>
-    <script>
-        function broadcastTx(signedTxHash) {
-            var http = new XMLHttpRequest();
-            var url = `${server}/api/tx/send`;
-            if (signedTxHash.length < 1) {
-                alert("Empty Signature");
-                return false;
-            }
-
-            var params = `{"rawtx":"${signedTxHash}"}`;
-            var result;
-            http.open('POST', url, false);
-
-            //Send the proper header information along with the request
-            http.setRequestHeader('Content-type', 'application/json');
-
-            http.onreadystatechange = function () { //Call a function when the state changes.
-                if (http.readyState == 4 && http.status == 200) {
-                    console.log(http.response);
-                    var txid = JSON.parse(http.response).txid.result;
-                    result = "Transaction successful! txid : " + txid;
-                } else {
-                    console.log(http.responseText);
-                    result = http.response;
-
-                }
-            }
-            http.send(params);
-            return result;
-        }
-    </script>
-
-    <script>
-        //Converting old blocking waitForGlobal into non-blocking code
-        var waitForGlobal = function (param, callback) {
-            new Promise(callback);
-        };
-
-
-        /* var waitForGlobal = function(param, callback) {
-           if (!window[param]) {
-             callback();
-           } else {
-             setTimeout(function() {
-               waitForGlobal(param, callback);
-             }, 100);
-           }
-         };*/
-
-
-        function monitorData() {
-
-            var addrList = document.getElementById("getAddr").value;
-            addrList = addrList.split(',');
-            addrList = Array.from(new Set(addrList));
-
-            var dispData = document.getElementById("dispData");
-            window["refreshwait"] = addrList.length;
-
-            addrList.forEach(function (addr) {
-                if (!validateAddr(addr)) {
-                    alert(`Invalid address : ${addr}`);
-                    window["refreshwait"] -= 1;
-                    return;
-                }
-                var addrData = document.getElementById(addr);
-                if (addrData) {
-                    refreshdata(addrData);
-                    window["refreshwait"] -= 1;
-                    return;
-                }
-
-                waitForGlobal("loadwait", function () {
-                    window["loadwait"] = true;
-                    var idbtmp = indexedDB.open("FLO_webWallet_testnet");
-                    idbtmp.onerror = function (event) {
-                        console.log("Error in opening IndexedDB!");
-                        window["loadwait"] = false;
-                    };
-                    idbtmp.onupgradeneeded = function (event) {
-                        var objectStore = event.target.result.createObjectStore('Label');
-                        //objectStore.createIndex("label", "label", { unique: false });
-                    };
-                    idbtmp.onsuccess = function (event) {
-                        var db = event.target.result;
-
-                        if (!db.objectStoreNames.contains(addr)) {
-                            var newaddr = true;
-                            var version = db.version + 1;
+        function monitorData(address, label) {
+            let dispMsg = document.getElementById("dispMsg"),
+                tCont = document.getElementById('transactions-container');
+            tCont.innerHTML = `<loading>
+                                    <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+                                    <g>
+                                        <path class='p1' d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
+                                            S11.3,14,8,14z"/>
+                                        <path class='p2' d="M6.5,13.8c-2.2-0.5-3.9-2.3-4.4-4.5c-0.7-3.6,1.7-6.8,5-7.2C7.6,2,8,1.6,8,1.1v0c0-0.6-0.5-1.1-1.1-1
+                                            C2.5,0.7-0.8,4.9,0.2,9.6c0.6,3.1,2.9,5.5,6,6.2c4.8,1.1,9.1-2.2,9.8-6.7C16,8.5,15.5,8,14.9,8h0c-0.5,0-0.9,0.4-1,0.9
+                                            C13.5,12.2,10.2,14.7,6.5,13.8z"/>
+                                    </g>
+                                    </svg>
+                                </loading>`;
+            document.querySelector('loading').children[0].classList.add('spin');
+            document.getElementById('addressLabel').textContent = label;
+            document.getElementById('fullAddress').textContent = address;
+            floWebWallet.readTransactions(address).then((receivedData) => {
+                if (receivedData === undefined)
+                    tCont.innerHTML =
+                        `<div style='display:flex; align-content: center;width: 100%;height:100%'><h3 style='display:flexbox;align-self:center;text-align: center;width:100%'>Data is not synced yet, Try again after sometime.</h3></div>`;
+                else
+                    if (receivedData.length === 0) {
+                        tCont.innerHTML =
+                            `<div style='display:flex; align-content: center;width: 100%;height:100%'><h3 style='display:flexbox;align-self:center;text-align: center;width:100%'>There are no transactions to show.</h3></div>`;
+                    } else {
+                        receivedData.reverse();
+                        document.querySelector('loading').children[0].classList.remove('spin');
+                        tCont.innerHTML = '';
+                        if (receivedData.length < 10) {
+                            limit = receivedData.length;
+                            tCont.appendChild(createTransactionCard(address, receivedData))
                         } else {
-                            var newaddr = false;
-                            var version = db.version;
-                        }
-                        db.close();
-                        var idb = indexedDB.open("FLO_webWallet_testnet", version);
-                        idb.onerror = function (event) {
-                            console.log("Error in opening IndexedDB!");
-                        };
-                        idb.onupgradeneeded = function (event) {
-                            var objectStore = event.target.result.createObjectStore(addr, { keyPath: "tx", autoIncrement: true });
-                            objectStore.createIndex("time", "time", { unique: false });
-                            objectStore.createIndex("sender", "sender", { unique: false });
-                            objectStore.createIndex("receiver", "receiver", { unique: false });
-                            objectStore.createIndex("floData", "floData", { unique: false });
-                            objectStore.createIndex("txid", "txid", { unique: true });
-                        };
-                        idb.onsuccess = function (event) {
-                            //window["loadwait"] = false;
-                            var db = event.target.result;
-                            var obslabel = db.transaction('Label', "readwrite").objectStore('Label');
-                            if (newaddr)
-                                obslabel.add('', addr);
-
-                            var dispDataAddr = document.createElement('section');
-                            dispDataAddr.id = addr;
-                            dispDataAddr.setAttribute("class", "DataTable");
-                            dispDataAddr.innerHTML = `<h4>${addr}</h4>
-                    <nav class="btn-bar nav-light">
-                      <span class="addrLabelContainer">
-                        <label for="inp" class="inp addrLabel">
-                          <input type="text" placeholder="&nbsp;" disabled>
-                          <span class="label">Label</span>
-                          <span class="border"></span>
-                        </label>
-                      </span>
-                      <button class="btn btn-glass btn-yellow" onclick="editLabel(this.parentNode.parentNode)" style="display:block;">edit label</button>
-                      <button class="btn btn-glass btn-green" onclick="saveLabel(this.parentNode.parentNode)" style="display:none;">save label</button>
-                      <button class="btn btn-glass btn-blue" onclick="refreshdata(this.parentNode.parentNode)">refresh data</button>
-                      <button class="btn btn-glass btn-red" onclick="removedata(this.parentNode.parentNode)">remove view</button>
-                    </nav>
-                      <div class="tbl-header">
-                        <table cellpadding="0" cellspacing="0" border="0">
-                          <thead>
-                            <tr>
-                              <th>Sender</th>
-                              <th>Receiver</th>
-                              <th>Time</th>
-                              <th>floData</th>
-                            </tr>
-                          </thead>
-                        </table>
-                      </div>`;
-
-
-                            var labelRequest = obslabel.get(addr);
-                            labelRequest.onsuccess = function (event) {
-                                dispDataAddr.getElementsByTagName('input')[0].value = labelRequest.result;
-                            };
-                            var tableContentDiv = document.createElement('div');
-                            tableContentDiv.setAttribute("class", "tbl-content");
-                            var table = document.createElement('table');
-                            table.setAttribute("cellpadding", "0");
-                            table.setAttribute("cellspacing", "0");
-                            table.setAttribute("border", "0");
-                            tableContentDiv.appendChild(table);
-                            dispDataAddr.appendChild(tableContentDiv);
-                            dispData.appendChild(dispDataAddr);
-
-                            var obs = db.transaction(addr, "readwrite").objectStore(addr);
-                            var objreq = obs.getAll();
-                            objreq.onsuccess = function (event) {
-                                data = event.target.result;
-                                //  console.log(data);
-                                data.forEach(tx => {
-                                    var time = new Date(tx.time * 1000);
-                                    var row = table.insertRow(0);
-                                    row.insertCell(0).innerHTML = tx.sender;
-                                    row.insertCell(1).innerHTML = tx.receiver;
-                                    row.insertCell(2).innerHTML = time;
-                                    row.insertCell(3).innerHTML = tx.floData;
+                            let timeout;
+                            scrollingEvent = tCont.addEventListener('scroll', (event) => {
+                                clearTimeout(timeout)
+                                timeout = setTimeout(() => {
+                                    if (tCont.scrollTop > window.innerHeight)
+                                        document.getElementById('scrollToTop').classList.add(
+                                            'show');
+                                    else
+                                        document.getElementById('scrollToTop').classList.remove(
+                                            'show');
+                                }, 200);
+                            })
+                            tCont.appendChild(createTransactionCard(address, receivedData))
+                            const load = target => {
+                                const sm = new IntersectionObserver((entries, observer) => {
+                                    entries.forEach((entry) => {
+                                        if (entry.isIntersecting && entry.target == tCont
+                                            .lastElementChild && receivedData.length >= limit) {
+                                            tCont.appendChild(createTransactionCard(address,
+                                                receivedData))
+                                            document.querySelectorAll('transaction-card')
+                                                .forEach(load);
+                                            observer.disconnect();
+                                        }
+                                    })
                                 })
-                                refreshdata(dispDataAddr);
-
+                                sm.observe(target)
                             }
-                            db.close();
-                            window["refreshwait"] -= 1;
-                        };
-                        window["loadwait"] = false;
-                    };
-
-                });
-            });
-
+                            document.querySelectorAll('transaction-card').forEach(load);
+                        }
+                    }
+            }).catch((error) => {
+                console.log(error);
+                alert(error);
+            })
         }
+
+        function createTransactionCard(address, receivedData) {
+            let frag = document.createDocumentFragment(),
+                dbLabels = floWebWallet.getLabels();
+            for (initial; initial < limit; initial++) {
+                let date = new Date(receivedData[initial].time * 1000).toLocaleDateString(),
+                    time = new Date(receivedData[initial].time * 1000).toLocaleTimeString(),
+                    tCard = document.createElement('transaction-card');
+                if (receivedData[initial].sender === address) {
+                    tCard.innerHTML =
+                        `<div>
+                            <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+                                <path d="M14.7,0H3.9C3.2,0,2.6,0.6,2.6,1.3s0.6,1.3,1.3,1.3h7.5l-11,11c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.5,1.9,0
+                                    l11-11v7.5c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3V1.3C16,0.6,15.4,0,14.7,0z"/>
+                            </svg>
+                            ${receivedData[initial].receiver}</div><div> ${receivedData[initial].floData}</div><div>${time} ${date}</div>`;
+                } else {
+                    tCard.innerHTML =
+                        `<div>
+                                        <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+                                            <path d="M16,14.7V3.9c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3v7.5l-11-11c-0.5-0.5-1.4-0.5-1.9,0
+                                            c-0.5,0.5-0.5,1.4,0,1.9l11,11H3.9c-0.7,0-1.3,0.6-1.3,1.3S3.2,16,3.9,16h10.7C15.4,16,16,15.4,16,14.7z"/>
+                                        </svg>
+                                        ${receivedData[initial].sender}</div><div> ${receivedData[initial].floData}</div><div>  ${time} ${date}</div>`;
+                }
+                frag.appendChild(tCard);
+            }
+            limit += 10;
+            if ((receivedData.length - (receivedData.length % 10)) == limit)
+                limit += receivedData.length % 10;
+            return frag;
+        }
+
+        function refreshdata() {
+            initial = 0, limit = 10;
+            floWebWallet.syncTransactions(document.getElementById('fullAddress').textContent);
+            monitorData(document.getElementById('fullAddress').textContent, document.getElementById('addressLabel')
+                .textContent);
+        }
+
+        function createAddressCards(address, label) {
+            let parentConatainer = document.getElementById('monitor-list');
+            if (parentConatainer.innerHTML ===
+                `<h3 style="text-align: center;width: 100%;">Add a FLO address to start monitoring</h3>`)
+                parentConatainer.innerHTML = '';
+            let monitorCard = document.createElement('monitor');
+            monitorCard.id = address;
+            monitorCard.innerHTML = `<div>${label}</div>
+                                    <div>${address}</div>
+                                    <div onclick="clickedAddress(this.parentNode)"></div>
+                                    <svg class='edit-options' onclick="showEdit(this.parentNode)" viewBox="0 0 4 16" style="enable-background:new 0 0 4 16;" xml:space="preserve">
+                                        <title>Edit address card</title>
+                                        <g>
+                                            <circle cx="2" cy="2" r="2"/>
+                                            <circle cx="2" cy="14" r="2"/>
+                                            <circle cx="2" cy="8" r="2"/>
+                                        </g>
+                                    </svg>`;
+            parentConatainer.appendChild(monitorCard);
+        }
+
+        function showEdit(parent) {
+            activeAddress = parent;
+            newAddrLabel = document.getElementById('newAddrLabel');
+            document.getElementById('edit-container').classList.add('show');
+            let x = document.getElementById('edit');
+            x.classList.add('slide-up');
+            newAddrLabel.focus();
+            x.children[0].textContent = parent.children[1].textContent;
+            newAddrLabel.value = parent.children[0].textContent;
+            let y = document.addEventListener("click", function (event) {
+                if (event.target.closest('#edit') || event.target.closest('.edit-options')) return;
+                closeEdit();
+                document.removeEventListener('click', y);
+            });
+        }
+
+        function editdata() {
+            let x = document.getElementById('edit'),
+                label = newAddrLabel.value;
+            if (label == '')
+                label = 'Unknown';
+            compactIDB.writeData('labels', label, x.children[0].textContent).then((resolve) => {
+                activeAddress.children[0].textContent = label;
+                closeEdit()
+            }).catch((error) => {
+                console.log(error);
+            })
+        }
+
+        function removedata() {
+            if (confirm('Do you want to delete this address?')) {
+                activeAddress.remove();
+                compactIDB.removeData('labels', activeAddress.children[1].textContent);
+            }
+            closeEdit();
+        }
+
+        function closeEdit() {
+            document.getElementById('edit-container').classList.remove('show');
+            document.getElementById('edit').classList.remove('slide-up');
+            newAddrLabel.value = '';
+            document.getElementById('showBalance').textContent = ``;
+        }
+
+        function createAllCards() {
+            floWebWallet.getLabels().then((labelAddr) => {
+                if (Object.entries(labelAddr).length === 0)
+                    document.getElementById('monitor-list').innerHTML =
+                        `<h3 style="text-align: center;width: 100%;">Add a FLO address to start monitoring</h3>`;
+                else
+                    Object.keys(labelAddr).forEach((address) => {
+                        createAddressCards(address, labelAddr[address]);
+                        floWebWallet.syncTransactions(address).then((array) => {
+                            if (array.length > 0) {
+                                let badge = document.createElement('badge'),
+                                    notifications = array.length
+                                if (notifications > 99)
+                                    notifications = '99+'
+                                badge.textContent = notifications
+                                document.getElementById(address).appendChild(badge)
+                            }
+                        }).catch((error) => {
+                            console.log(error)
+                        })
+                    })
+            }).catch((error) => {
+                console.log(error);
+            })
+        }
+
+        function validateInfo(thisInput) {
+            if (floCrypto.validateAddr(thisInput.value))
+                document.getElementById('sendBtn').disabled = false;
+            else
+                document.getElementById('sendBtn').disabled = true;
+        }
+
+        function showPrivKeyPage() {
+            document.getElementById('privKey').focus();
+            showInnerPage('privKeyPage');
+        }
+
+        function sendMessage() {
+            let sender = document.getElementById('getBal_addr').value,
+                amount = parseFloat(document.getElementById('amount').value),
+                receiver = document.getElementById('receiver').value,
+                floData = document.getElementById('flotextdata').value,
+                privKey = document.getElementById('privKey').value;
+            floWebWallet.sendTransaction(sender, receiver, amount, floData, privKey).then((transactionid) => {
+                document.getElementById('transactionId').textContent = `transaction ID : ${transactionid}`;
+                showInnerPage('transaction-complete');
+                document.getElementById('sdright').querySelectorAll('input, textarea').forEach(field => field.value = '')
+            }).catch((error) => {
+                alert(error)
+            })
+        }
+
+        function deleteDB() {
+            compactIDB.deleteDB().then((message) => {
+                alert(message)
+                onLoadStartUp()
+            }).catch((error) => {
+                alert(error)
+            })
+        }
+
+        function copyToClipboard(parent, childIndex) {
+            let input = document.createElement('textarea'),
+                toast = document.getElementById('textCopied');
+            input.setAttribute('readonly', '');
+            input.setAttribute('style', 'position: absolute; left: -9999px');
+            document.body.appendChild(input);
+            input.value = parent.children[childIndex].textContent;
+            input.select();
+            document.execCommand('copy');
+            document.body.removeChild(input);
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 1000)
+        }
+
+        function backToTop() {
+            document.getElementById('transactions-container').scrollTop = 0;
+        }
+
         let showCharacterCount = document.getElementById('show_character_count') 
-        document.getElementById('flotextdata').addEventListener('input', function(e){
+        let isFloDataChanged = false
+        const fixFloDataButton = document.getElementById('fix_invalid_button')
+        const sendFloDataButton = document.getElementById('sendBtn')
+        const sentFloData = document.getElementById('flotextdata')
+        const floDataStaus = document.getElementById('flo_data_status')
+        sentFloData.addEventListener('keydown', function(e){
             if(this.value.length > 1040)
                 e.preventDefault()
+        })
+            
+        sentFloData.addEventListener('input', function(e){
+                isFloDataChanged = true
+            if(this.value.trim() !== ''){
+                sendFloDataButton.classList.add('hide-completely')
+                fixFloDataButton.classList.remove('hide-completely')
+            }
+            else{
+                sendFloDataButton.classList.remove('hide-completely')
+                fixFloDataButton.classList.add('hide-completely')
+            }
             if(1040 - this.value.length){
                 showCharacterCount.textContent = `${1040 - this.value.length}/1040` 
             }
             else
                 showCharacterCount.textContent = `You can only add FLO data upto 1040 characters.`
+            checkFloData()
         })
-    </script>
-    <script>
-        function refreshdata(param) {
-
-            var addr = param.id;
-            var table = param.getElementsByTagName('table')[1];
-            var row = table.insertRow(0);
-            var cell = row.insertCell(0);
-            cell.innerHTML = "<center>Refreshing...</center>";
-            cell.colSpan = 4;
-
-            waitForGlobal("refreshwait", function () {
-                var idb = indexedDB.open("FLO_webWallet_testnet");
-                idb.onerror = function (event) {
-                    console.log("Error in opening IndexedDB!");
-                };
-                idb.onsuccess = function (event) {
-                    var db = event.target.result;
-                    var obs = db.transaction(addr, "readwrite").objectStore(addr);
-                    var countRequest = obs.count();
-                    countRequest.onsuccess = function () {
-                        console.log(countRequest.result);
-                        var response = ajax("GET", `api/addrs/${addr}/txs`);
-                        var nRequired = JSON.parse(response).totalItems - countRequest.result;
-                        console.log(nRequired);
-
-                        while (true && nRequired) {
-                            var response = ajax("GET", `api/addrs/${addr}/txs?from=0&to=${nRequired}`);
-                            response = JSON.parse(response);
-                            if (nRequired + countRequest.result != response.totalItems) {
-                                nRequired = response.totalItems - countRequest.result;
-                                continue;
-                            }
-                            response.items.reverse().forEach(function (tx) {
-                                if (tx.isCoinBase) {
-                                    //console.log(tx.vin[0].coinbase)
-                                    obs.put({ time: tx.time, txid: tx.txid, sender: '(mined) ' + tx.vin[0].coinbase, receiver: addr, floData: tx.floData });
-                                    var time = new Date(tx.time * 1000);
-                                    var row = table.insertRow(1);
-                                    row.insertCell(0).innerHTML = '(mined) ' + tx.vin[0].coinbase;
-                                    row.insertCell(1).innerHTML = addr;
-                                    row.insertCell(2).innerHTML = time;
-                                    row.insertCell(3).innerHTML = tx.floData;
-                                } else {
-                                    obs.put({ time: tx.time, txid: tx.txid, sender: tx.vin[0].addr, receiver: tx.vout[0].scriptPubKey.addresses[0], floData: tx.floData });
-                                    var time = new Date(tx.time * 1000);
-                                    var row = table.insertRow(1);
-                                    row.insertCell(0).innerHTML = tx.vin[0].addr;
-                                    row.insertCell(1).innerHTML = tx.vout[0].scriptPubKey.addresses[0];
-                                    row.insertCell(2).innerHTML = time;
-                                    row.insertCell(3).innerHTML = tx.floData;
-                                }
-                            });
-                            break;
-                        }
-                        table.deleteRow(0);
-                    };
-                    db.close();
-                };
-            });
-        }
-
-        function removedata(param) {
-            param.parentNode.removeChild(param);
-        }
-
-        function editLabel(param) {
-            param.getElementsByTagName('input')[0].disabled = false;
-            param.getElementsByTagName('button')[0].style.display = "none";
-            param.getElementsByTagName('button')[1].style.display = "block";
-        }
-        function saveLabel(param) {
-            label = param.getElementsByTagName('input')[0];
-            label.disabled = true;
-            label = label.value;
-            param.getElementsByTagName('button')[0].style.display = "block";
-            param.getElementsByTagName('button')[1].style.display = "none";
-            var idb = indexedDB.open("FLO_webWallet_testnet");
-            idb.onerror = function (event) {
-                console.log("Error in opening IndexedDB!");
-            };
-            idb.onsuccess = function (event) {
-                var db = event.target.result;
-                var obslabel = db.transaction('Label', "readwrite").objectStore('Label');
-                obslabel.put(label, param.id);
-                db.close();
+        function checkFloData(){
+            isFloDataChanged = false
+            const floDataText = sentFloData.value.trim()
+            let isValid = true
+            for(char of floDataText){
+                // if(/^[a-z0-9\s!"#$%&'()*+,.\/:;<=>?@\[\]^_`{|}~-]*$/i.test(char)){
+                if(!/^[\x20-\x7E\s]+/.test(char)){
+                    isValid = false
+                    break;
+                }
+            }
+            if(isValid){
+                sendFloDataButton.classList.remove('hide-completely')
+                fixFloDataButton.classList.add('hide-completely')
+                floDataStaus.textContent = ''
+            }
+            else{
+                floDataStaus.textContent = 'FLO data contains invalid characters. Use "Fix" to remove invalid characters.'
             }
         }
+        function removeInvalid(){
+            const floDataText = sentFloData.value.trim()
+            sentFloData.value = floDataText.replace(/[^\x20-\x7E]*/gm, '')
+            checkFloData()
+        }
     </script>
 
     <script>
+        //All util libraries required for Standard operations (DO NOT EDIT ANY)
+
         /*!
         * Crypto-JS v2.5.4  Crypto.js
         * http://code.google.com/p/crypto-js/
@@ -4735,7 +6426,6 @@
                     var shType = sigHashType || 1;
                     for (var i = 0; i < this.inputs.length; i++) {
                         this.signinput(i, wif, shType);
-                        console.log(i);
                     }
                     return this.serialize();
                 }
@@ -5006,9 +6696,9 @@
         );
         //https://raw.github.com/bitcoinjs/bitcoinjs-lib/09e8c6e184d6501a0c2c59d73ca64db5c0d3eb95/src/address.js
         Bitcoin.Address = function (bytes) {
-            if (crypto == "FLO")
+            if (floGlobals.blockchain == "FLO")
                 this.version = 0x23; // FLO mainnet public address
-            else if (crypto == "FLO_TEST")
+            else if (floGlobals.blockchain == "FLO_TEST")
                 this.version = 0x73; // FLO testnet public address
             if ("string" == typeof bytes) {
                 bytes = Bitcoin.Address.decodeString(bytes, this.version);
@@ -5444,8 +7134,8 @@
                     try {
 
                         // This part is edited for FLO. FLO WIF are always compressed WIF. FLO WIF (private key) starts with R for mainnet and c for testnet.
-                        if (((crypto == "FLO") && /^R[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(input)) ||
-                            ((crypto == "FLO_TEST") && /^c[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(input))) {
+                        if (((floGlobals.blockchain == "FLO") && /^R[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(input)) ||
+                            ((floGlobals.blockchain == "FLO_TEST") && /^c[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(input))) {
                             bytes = ECKey.decodeCompressedWalletImportFormat(input);
                             this.compressed = true;
                         } else if (ECKey.isHexFormat(input)) {
@@ -5499,9 +7189,9 @@
                 }
             };
 
-            if (crypto == "FLO")
+            if (floGlobals.blockchain == "FLO")
                 ECKey.privateKeyPrefix = 0xA3; //(Bitcoin mainnet 0x80    testnet 0xEF) (FLO mainnet 0xA3 163 D)
-            else if (crypto == "FLO_TEST")
+            else if (floGlobals.blockchain == "FLO_TEST")
                 ECKey.privateKeyPrefix = 0xEF; //FLO testnet
 
             /**
@@ -5854,7 +7544,1509 @@
                 return true;
             }
         };
+
+        // secrets.js - by Alexander Stetsyuk - released under MIT License
+        (function (exports, global) {
+            var defaults = {
+                bits: 8, // default number of bits
+                radix: 16, // work with HEX by default
+                minBits: 3,
+                maxBits: 20, // this permits 1,048,575 shares, though going this high is NOT recommended in JS!
+
+                bytesPerChar: 2,
+                maxBytesPerChar: 6, // Math.pow(256,7) > Math.pow(2,53)
+
+                // Primitive polynomials (in decimal form) for Galois Fields GF(2^n), for 2 <= n <= 30
+                // The index of each term in the array corresponds to the n for that polynomial
+                // i.e. to get the polynomial for n=16, use primitivePolynomials[16]
+                primitivePolynomials: [null, null, 1, 3, 3, 5, 3, 3, 29, 17, 9, 5, 83, 27, 43, 3, 45, 9, 39, 39,
+                    9, 5, 3, 33, 27, 9, 71, 39, 9, 5, 83
+                ],
+
+                // warning for insecure PRNG
+                warning: 'WARNING:\nA secure random number generator was not found.\nUsing Math.random(), which is NOT cryptographically strong!'
+            };
+
+            // Protected settings object
+            var config = {};
+
+            /** @expose **/
+            exports.getConfig = function () {
+                return {
+                    'bits': config.bits,
+                    'unsafePRNG': config.unsafePRNG
+                };
+            };
+
+            function init(bits) {
+                if (bits && (typeof bits !== 'number' || bits % 1 !== 0 || bits < defaults.minBits || bits >
+                    defaults.maxBits)) {
+                    throw new Error('Number of bits must be an integer between ' + defaults.minBits + ' and ' +
+                        defaults.maxBits + ', inclusive.')
+                }
+
+                config.radix = defaults.radix;
+                config.bits = bits || defaults.bits;
+                config.size = Math.pow(2, config.bits);
+                config.max = config.size - 1;
+
+                // Construct the exp and log tables for multiplication.
+                var logs = [],
+                    exps = [],
+                    x = 1,
+                    primitive = defaults.primitivePolynomials[config.bits];
+                for (var i = 0; i < config.size; i++) {
+                    exps[i] = x;
+                    logs[x] = i;
+                    x <<= 1;
+                    if (x >= config.size) {
+                        x ^= primitive;
+                        x &= config.max;
+                    }
+                }
+
+                config.logs = logs;
+                config.exps = exps;
+            };
+
+            /** @expose **/
+            exports.init = init;
+
+            function isInited() {
+                if (!config.bits || !config.size || !config.max || !config.logs || !config.exps || config.logs.length !==
+                    config.size || config.exps.length !== config.size) {
+                    return false;
+                }
+                return true;
+            };
+
+            // Returns a pseudo-random number generator of the form function(bits){}
+            // which should output a random string of 1's and 0's of length `bits`
+            function getRNG() {
+                var randomBits, crypto;
+
+                function construct(bits, arr, radix, size) {
+                    var str = '',
+                        i = 0,
+                        len = arr.length - 1;
+                    while (i < len || (str.length < bits)) {
+                        str += padLeft(parseInt(arr[i], radix).toString(2), size);
+                        i++;
+                    }
+                    str = str.substr(-bits);
+                    if ((str.match(/0/g) || []).length === str.length) { // all zeros?
+                        return null;
+                    } else {
+                        return str;
+                    }
+                }
+
+                // node.js crypto.randomBytes()
+                if (typeof require === 'function' && (crypto = require('crypto')) && (randomBits = crypto[
+                    'randomBytes'])) {
+                    return function (bits) {
+                        var bytes = Math.ceil(bits / 8),
+                            str = null;
+
+                        while (str === null) {
+                            str = construct(bits, randomBits(bytes).toString('hex'), 16, 4);
+                        }
+                        return str;
+                    }
+                }
+
+                // browsers with window.crypto.getRandomValues()
+                if (global['crypto'] && typeof global['crypto']['getRandomValues'] === 'function' && typeof global[
+                    'Uint32Array'] === 'function') {
+                    crypto = global['crypto'];
+                    return function (bits) {
+                        var elems = Math.ceil(bits / 32),
+                            str = null,
+                            arr = new global['Uint32Array'](elems);
+
+                        while (str === null) {
+                            crypto['getRandomValues'](arr);
+                            str = construct(bits, arr, 10, 32);
+                        }
+
+                        return str;
+                    }
+                }
+
+                // A totally insecure RNG!!! (except in Safari)
+                // Will produce a warning every time it is called.
+                config.unsafePRNG = true;
+                warn();
+
+                var bitsPerNum = 32;
+                var max = Math.pow(2, bitsPerNum) - 1;
+                return function (bits) {
+                    var elems = Math.ceil(bits / bitsPerNum);
+                    var arr = [],
+                        str = null;
+                    while (str === null) {
+                        for (var i = 0; i < elems; i++) {
+                            arr[i] = Math.floor(Math.random() * max + 1);
+                        }
+                        str = construct(bits, arr, 10, bitsPerNum);
+                    }
+                    return str;
+                };
+            };
+
+            // Warn about using insecure rng.
+            // Called when Math.random() is being used.
+            function warn() {
+                global['console']['warn'](defaults.warning);
+                if (typeof global['alert'] === 'function' && config.alert) {
+                    global['alert'](defaults.warning);
+                }
+            }
+
+            // Set the PRNG to use. If no RNG function is supplied, pick a default using getRNG()
+            /** @expose **/
+            exports.setRNG = function (rng, alert) {
+                if (!isInited()) {
+                    this.init();
+                }
+                config.unsafePRNG = false;
+                rng = rng || getRNG();
+
+                // test the RNG (5 times)
+                if (typeof rng !== 'function' || typeof rng(config.bits) !== 'string' || !parseInt(rng(config.bits),
+                    2) || rng(config.bits).length > config.bits || rng(config.bits).length < config.bits) {
+                    throw new Error(
+                        "Random number generator is invalid. Supply an RNG of the form function(bits){} that returns a string containing 'bits' number of random 1's and 0's."
+                    )
+                } else {
+                    config.rng = rng;
+                }
+                config.alert = !!alert;
+
+                return !!config.unsafePRNG;
+            };
+
+            function isSetRNG() {
+                return typeof config.rng === 'function';
+            };
+
+            // Generates a random bits-length number string using the PRNG
+            /** @expose **/
+            exports.random = function (bits) {
+                if (!isSetRNG()) {
+                    this.setRNG();
+                }
+
+                if (typeof bits !== 'number' || bits % 1 !== 0 || bits < 2) {
+                    throw new Error('Number of bits must be an integer greater than 1.')
+                }
+
+                if (config.unsafePRNG) {
+                    warn();
+                }
+                return bin2hex(config.rng(bits));
+            }
+
+            // Divides a `secret` number String str expressed in radix `inputRadix` (optional, default 16)
+            // into `numShares` shares, each expressed in radix `outputRadix` (optional, default to `inputRadix`),
+            // requiring `threshold` number of shares to reconstruct the secret.
+            // Optionally, zero-pads the secret to a length that is a multiple of padLength before sharing.
+            /** @expose **/
+            exports.share = function (secret, numShares, threshold, padLength, withoutPrefix) {
+                if (!isInited()) {
+                    this.init();
+                }
+                if (!isSetRNG()) {
+                    this.setRNG();
+                }
+
+                padLength = padLength || 0;
+
+                if (typeof secret !== 'string') {
+                    throw new Error('Secret must be a string.');
+                }
+                if (typeof numShares !== 'number' || numShares % 1 !== 0 || numShares < 2) {
+                    throw new Error('Number of shares must be an integer between 2 and 2^bits-1 (' + config.max +
+                        '), inclusive.')
+                }
+                if (numShares > config.max) {
+                    var neededBits = Math.ceil(Math.log(numShares + 1) / Math.LN2);
+                    throw new Error('Number of shares must be an integer between 2 and 2^bits-1 (' + config.max +
+                        '), inclusive. To create ' + numShares + ' shares, use at least ' + neededBits +
+                        ' bits.')
+                }
+                if (typeof threshold !== 'number' || threshold % 1 !== 0 || threshold < 2) {
+                    throw new Error('Threshold number of shares must be an integer between 2 and 2^bits-1 (' +
+                        config.max + '), inclusive.');
+                }
+                if (threshold > config.max) {
+                    var neededBits = Math.ceil(Math.log(threshold + 1) / Math.LN2);
+                    throw new Error('Threshold number of shares must be an integer between 2 and 2^bits-1 (' +
+                        config.max + '), inclusive.  To use a threshold of ' + threshold +
+                        ', use at least ' + neededBits + ' bits.');
+                }
+                if (typeof padLength !== 'number' || padLength % 1 !== 0) {
+                    throw new Error('Zero-pad length must be an integer greater than 1.');
+                }
+
+                if (config.unsafePRNG) {
+                    warn();
+                }
+
+                secret = '1' + hex2bin(secret); // append a 1 so that we can preserve the correct number of leading zeros in our secret
+                secret = split(secret, padLength);
+                var x = new Array(numShares),
+                    y = new Array(numShares);
+                for (var i = 0, len = secret.length; i < len; i++) {
+                    var subShares = this._getShares(secret[i], numShares, threshold);
+                    for (var j = 0; j < numShares; j++) {
+                        x[j] = x[j] || subShares[j].x.toString(config.radix);
+                        y[j] = padLeft(subShares[j].y.toString(2)) + (y[j] ? y[j] : '');
+                    }
+                }
+                var padding = config.max.toString(config.radix).length;
+                if (withoutPrefix) {
+                    for (var i = 0; i < numShares; i++) {
+                        x[i] = bin2hex(y[i]);
+                    }
+                } else {
+                    for (var i = 0; i < numShares; i++) {
+                        x[i] = config.bits.toString(36).toUpperCase() + padLeft(x[i], padding) + bin2hex(y[i]);
+                    }
+                }
+
+                return x;
+            };
+
+            // This is the basic polynomial generation and evaluation function
+            // for a `config.bits`-length secret (NOT an arbitrary length)
+            // Note: no error-checking at this stage! If `secrets` is NOT
+            // a NUMBER less than 2^bits-1, the output will be incorrect!
+            /** @expose **/
+            exports._getShares = function (secret, numShares, threshold) {
+                var shares = [];
+                var coeffs = [secret];
+
+                for (var i = 1; i < threshold; i++) {
+                    coeffs[i] = parseInt(config.rng(config.bits), 2);
+                }
+                for (var i = 1, len = numShares + 1; i < len; i++) {
+                    shares[i - 1] = {
+                        x: i,
+                        y: horner(i, coeffs)
+                    }
+                }
+                return shares;
+            };
+
+            // Polynomial evaluation at `x` using Horner's Method
+            // TODO: this can possibly be sped up using other methods
+            // NOTE: fx=fx * x + coeff[i] ->  exp(log(fx) + log(x)) + coeff[i],
+            //       so if fx===0, just set fx to coeff[i] because
+            //       using the exp/log form will result in incorrect value
+            function horner(x, coeffs) {
+                var logx = config.logs[x];
+                var fx = 0;
+                for (var i = coeffs.length - 1; i >= 0; i--) {
+                    if (fx === 0) {
+                        fx = coeffs[i];
+                        continue;
+                    }
+                    fx = config.exps[(logx + config.logs[fx]) % config.max] ^ coeffs[i];
+                }
+                return fx;
+            };
+
+            function inArray(arr, val) {
+                for (var i = 0, len = arr.length; i < len; i++) {
+                    if (arr[i] === val) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+
+            function processShare(share) {
+
+                var bits = parseInt(share[0], 36);
+                if (bits && (typeof bits !== 'number' || bits % 1 !== 0 || bits < defaults.minBits || bits >
+                    defaults.maxBits)) {
+                    throw new Error('Number of bits must be an integer between ' + defaults.minBits + ' and ' +
+                        defaults.maxBits + ', inclusive.')
+                }
+
+                var max = Math.pow(2, bits) - 1;
+                var idLength = max.toString(config.radix).length;
+
+                var id = parseInt(share.substr(1, idLength), config.radix);
+                if (typeof id !== 'number' || id % 1 !== 0 || id < 1 || id > max) {
+                    throw new Error('Share id must be an integer between 1 and ' + config.max + ', inclusive.');
+                }
+                share = share.substr(idLength + 1);
+                if (!share.length) {
+                    throw new Error('Invalid share: zero-length share.')
+                }
+                return {
+                    'bits': bits,
+                    'id': id,
+                    'value': share
+                };
+            };
+
+            /** @expose **/
+            exports._processShare = processShare;
+
+            // Protected method that evaluates the Lagrange interpolation
+            // polynomial at x=`at` for individual config.bits-length
+            // segments of each share in the `shares` Array.
+            // Each share is expressed in base `inputRadix`. The output
+            // is expressed in base `outputRadix'
+            function combine(at, shares) {
+                var setBits, share, x = [],
+                    y = [],
+                    result = '',
+                    idx;
+
+                for (var i = 0, len = shares.length; i < len; i++) {
+                    share = processShare(shares[i]);
+                    if (typeof setBits === 'undefined') {
+                        setBits = share['bits'];
+                    } else if (share['bits'] !== setBits) {
+                        throw new Error('Mismatched shares: Different bit settings.')
+                    }
+
+                    if (config.bits !== setBits) {
+                        init(setBits);
+                    }
+
+                    if (inArray(x, share['id'])) { // repeated x value?
+                        continue;
+                    }
+
+                    idx = x.push(share['id']) - 1;
+                    share = split(hex2bin(share['value']));
+                    for (var j = 0, len2 = share.length; j < len2; j++) {
+                        y[j] = y[j] || [];
+                        y[j][idx] = share[j];
+                    }
+                }
+
+                for (var i = 0, len = y.length; i < len; i++) {
+                    result = padLeft(lagrange(at, x, y[i]).toString(2)) + result;
+                }
+
+                if (at === 0) { // reconstructing the secret
+                    var idx = result.indexOf('1'); //find the first 1
+                    return bin2hex(result.slice(idx + 1));
+                } else { // generating a new share
+                    return bin2hex(result);
+                }
+            };
+
+            // Combine `shares` Array into the original secret
+            /** @expose **/
+            exports.combine = function (shares) {
+                return combine(0, shares);
+            };
+
+            // Generate a new share with id `id` (a number between 1 and 2^bits-1)
+            // `id` can be a Number or a String in the default radix (16)
+            /** @expose **/
+            exports.newShare = function (id, shares) {
+                if (typeof id === 'string') {
+                    id = parseInt(id, config.radix);
+                }
+
+                var share = processShare(shares[0]);
+                var max = Math.pow(2, share['bits']) - 1;
+
+                if (typeof id !== 'number' || id % 1 !== 0 || id < 1 || id > max) {
+                    throw new Error('Share id must be an integer between 1 and ' + config.max + ', inclusive.');
+                }
+
+                var padding = max.toString(config.radix).length;
+                return config.bits.toString(36).toUpperCase() + padLeft(id.toString(config.radix), padding) +
+                    combine(id, shares);
+            };
+
+            // Evaluate the Lagrange interpolation polynomial at x = `at`
+            // using x and y Arrays that are of the same length, with
+            // corresponding elements constituting points on the polynomial.
+            function lagrange(at, x, y) {
+                var sum = 0,
+                    product,
+                    i, j;
+
+                for (var i = 0, len = x.length; i < len; i++) {
+                    if (!y[i]) {
+                        continue;
+                    }
+
+                    product = config.logs[y[i]];
+                    for (var j = 0; j < len; j++) {
+                        if (i === j) {
+                            continue;
+                        }
+                        if (at === x[j]) { // happens when computing a share that is in the list of shares used to compute it
+                            product = -1; // fix for a zero product term, after which the sum should be sum^0 = sum, not sum^1
+                            break;
+                        }
+                        product = (product + config.logs[at ^ x[j]] - config.logs[x[i] ^ x[j]] + config.max /* to make sure it's not negative */) %
+                            config.max;
+                    }
+
+                    sum = product === -1 ? sum : sum ^ config.exps[product]; // though exps[-1]= undefined and undefined ^ anything = anything in chrome, this behavior may not hold everywhere, so do the check
+                }
+                return sum;
+            };
+
+            /** @expose **/
+            exports._lagrange = lagrange;
+
+            // Splits a number string `bits`-length segments, after first
+            // optionally zero-padding it to a length that is a multiple of `padLength.
+            // Returns array of integers (each less than 2^bits-1), with each element
+            // representing a `bits`-length segment of the input string from right to left,
+            // i.e. parts[0] represents the right-most `bits`-length segment of the input string.
+            function split(str, padLength) {
+                if (padLength) {
+                    str = padLeft(str, padLength)
+                }
+                var parts = [];
+                for (var i = str.length; i > config.bits; i -= config.bits) {
+                    parts.push(parseInt(str.slice(i - config.bits, i), 2));
+                }
+                parts.push(parseInt(str.slice(0, i), 2));
+                return parts;
+            };
+
+            // Pads a string `str` with zeros on the left so that its length is a multiple of `bits`
+            function padLeft(str, bits) {
+                bits = bits || config.bits
+                var missing = str.length % bits;
+                return (missing ? new Array(bits - missing + 1).join('0') : '') + str;
+            };
+
+            function hex2bin(str) {
+                var bin = '',
+                    num;
+                for (var i = str.length - 1; i >= 0; i--) {
+                    num = parseInt(str[i], 16)
+                    if (isNaN(num)) {
+                        throw new Error('Invalid hex character.')
+                    }
+                    bin = padLeft(num.toString(2), 4) + bin;
+                }
+                return bin;
+            }
+
+            function bin2hex(str) {
+                var hex = '',
+                    num;
+                str = padLeft(str, 4);
+                for (var i = str.length; i >= 4; i -= 4) {
+                    num = parseInt(str.slice(i - 4, i), 2);
+                    if (isNaN(num)) {
+                        throw new Error('Invalid binary character.')
+                    }
+                    hex = num.toString(16) + hex;
+                }
+                return hex;
+            }
+
+            // Converts a given UTF16 character string to the HEX representation.
+            // Each character of the input string is represented by
+            // `bytesPerChar` bytes in the output string.
+            /** @expose **/
+            exports.str2hex = function (str, bytesPerChar) {
+                if (typeof str !== 'string') {
+                    throw new Error('Input must be a character string.');
+                }
+                bytesPerChar = bytesPerChar || defaults.bytesPerChar;
+
+                if (typeof bytesPerChar !== 'number' || bytesPerChar % 1 !== 0 || bytesPerChar < 1 ||
+                    bytesPerChar > defaults.maxBytesPerChar) {
+                    throw new Error('Bytes per character must be an integer between 1 and ' + defaults.maxBytesPerChar +
+                        ', inclusive.')
+                }
+
+                var hexChars = 2 * bytesPerChar;
+                var max = Math.pow(16, hexChars) - 1;
+                var out = '',
+                    num;
+                for (var i = 0, len = str.length; i < len; i++) {
+                    num = str[i].charCodeAt();
+                    if (isNaN(num)) {
+                        throw new Error('Invalid character: ' + str[i]);
+                    } else if (num > max) {
+                        var neededBytes = Math.ceil(Math.log(num + 1) / Math.log(256));
+                        throw new Error('Invalid character code (' + num +
+                            '). Maximum allowable is 256^bytes-1 (' + max +
+                            '). To convert this character, use at least ' + neededBytes + ' bytes.')
+                    } else {
+                        out = padLeft(num.toString(16), hexChars) + out;
+                    }
+                }
+                return out;
+            };
+
+            // Converts a given HEX number string to a UTF16 character string.
+            /** @expose **/
+            exports.hex2str = function (str, bytesPerChar) {
+                if (typeof str !== 'string') {
+                    throw new Error('Input must be a hexadecimal string.');
+                }
+                bytesPerChar = bytesPerChar || defaults.bytesPerChar;
+
+                if (typeof bytesPerChar !== 'number' || bytesPerChar % 1 !== 0 || bytesPerChar < 1 ||
+                    bytesPerChar > defaults.maxBytesPerChar) {
+                    throw new Error('Bytes per character must be an integer between 1 and ' + defaults.maxBytesPerChar +
+                        ', inclusive.')
+                }
+
+                var hexChars = 2 * bytesPerChar;
+                var out = '';
+                str = padLeft(str, hexChars);
+                for (var i = 0, len = str.length; i < len; i += hexChars) {
+                    out = String.fromCharCode(parseInt(str.slice(i, i + hexChars), 16)) + out;
+                }
+                return out;
+            };
+
+            // by default, initialize without an RNG
+            exports.init();
+        })(typeof module !== 'undefined' && module['exports'] ? module['exports'] : (window['shamirSecretShare'] = {}),
+            typeof global !== 'undefined' ? global : window);
+    </script>
+
+    <script>
+        /* FLO Crypto Operators*/
+        const floCrypto = {
+
+            p: BigInteger("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFC2F", 16),
+
+            ecparams: EllipticCurve.getSECCurveByName("secp256k1"),
+
+            exponent1: function () {
+                return this.p.add(BigInteger.ONE).divide(BigInteger("4"))
+            },
+
+            calculateY: function (x) {
+                let p = this.p;
+                let exp = this.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)
+            },
+
+            //generate a random Interger within range
+            randInt: function (min, max) {
+                min = Math.ceil(min);
+                max = Math.floor(max);
+                return Math.floor(Math.random() * (max - min + 1)) + min;
+            },
+
+            //generate a random String within length (options : alphaNumeric chars only)
+            randString: function (length, alphaNumeric = false) {
+                var result = '';
+                if (alphaNumeric)
+                    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+                else
+                    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_+-./*?@#&$<>=[]{}():';
+                for (var i = 0; i < length; i++)
+                    result += characters.charAt(Math.floor(Math.random() * characters.length));
+                return result;
+            },
+
+            getUncompressedPublicKey: function (compressedPublicKey) {
+
+                const p = this.p;
+
+                // 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 = this.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
+                };
+            },
+
+            getSenderPublicKeyString: function () {
+                privateKey = ellipticCurveEncryption.senderRandom();
+                senderPublicKeyString = ellipticCurveEncryption.senderPublicString(privateKey);
+                return {
+                    privateKey: privateKey,
+                    senderPublicKeyString: senderPublicKeyString
+                }
+            },
+
+            deriveSharedKeySender: function (receiverCompressedPublicKey, senderPrivateKey) {
+                try {
+                    let receiverPublicKeyString = this.getUncompressedPublicKey(receiverCompressedPublicKey);
+                    var senderDerivedKey = ellipticCurveEncryption.senderSharedKeyDerivation(
+                        receiverPublicKeyString.x, receiverPublicKeyString.y, senderPrivateKey);
+                    return senderDerivedKey;
+                } catch (error) {
+                    return new Error(error);
+                }
+            },
+
+            deriveReceiverSharedKey: function (senderPublicKeyString, receiverPrivateKey) {
+                return ellipticCurveEncryption.receiverSharedKeyDerivation(
+                    senderPublicKeyString.XValuePublicString, senderPublicKeyString.YValuePublicString,
+                    receiverPrivateKey);
+            },
+
+            getReceiverPublicKeyString: function (privateKey) {
+                return ellipticCurveEncryption.receiverPublicString(privateKey);
+            },
+
+            deriveSharedKeyReceiver: function (senderPublicKeyString, receiverPrivateKey) {
+                try {
+                    return ellipticCurveEncryption.receiverSharedKeyDerivation(senderPublicKeyString.XValuePublicString,
+                        senderPublicKeyString.YValuePublicString, receiverPrivateKey);
+
+                } catch (error) {
+                    return new Error(error);
+                }
+            },
+
+            wifToDecimal: function (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)
+                privateKeyDecimal = BigInteger(pk).toString()
+                privateKeyHex = Crypto.util.bytesToHex(pk)
+                return {
+                    privateKeyDecimal: privateKeyDecimal,
+                    privateKeyHex: privateKeyHex
+                }
+            },
+
+            //Encrypt Data using public-key
+            encryptData: function (data, receiverCompressedPublicKey) {
+                var senderECKeyData = this.getSenderPublicKeyString();
+                var senderDerivedKey = this.deriveSharedKeySender(receiverCompressedPublicKey, 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
+            decryptData: function (data, myPrivateKey) {
+                var receiverECKeyData = {};
+                if (typeof myPrivateKey !== "string") throw new Error("No private key found.");
+
+                let privateKey = this.wifToDecimal(myPrivateKey, true);
+                if (typeof privateKey.privateKeyDecimal !== "string") throw new Error(
+                    "Failed to detremine your private key.");
+                receiverECKeyData.privateKey = privateKey.privateKeyDecimal;
+
+                var receiverDerivedKey = this.deriveReceiverSharedKey(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
+            signData: function (data, privateKeyHex) {
+                var key = new Bitcoin.ECKey(privateKeyHex);
+                key.setCompressed(true);
+
+                var privateKeyArr = key.getBitcoinPrivateKeyByteArray();
+                privateKey = BigInteger.fromByteArrayUnsigned(privateKeyArr);
+                var messageHash = Crypto.SHA256(data);
+
+                var messageHashBigInteger = new BigInteger(messageHash);
+                var messageSign = Bitcoin.ECDSA.sign(messageHashBigInteger, key.priv);
+
+                var sighex = Crypto.util.bytesToHex(messageSign);
+                return sighex;
+            },
+
+            //Verify signatue of the data using public-key
+            verifySign: function (data, signatureHex, publicKeyHex) {
+                var msgHash = Crypto.SHA256(data);
+                var messageHashBigInteger = new BigInteger(msgHash);
+
+                var sigBytes = Crypto.util.hexToBytes(signatureHex);
+                var signature = Bitcoin.ECDSA.parseSig(sigBytes);
+
+                var publicKeyPoint = this.ecparams.getCurve().decodePointHex(publicKeyHex);
+
+                var verify = Bitcoin.ECDSA.verifyRaw(messageHashBigInteger, signature.r, signature.s,
+                    publicKeyPoint);
+                return verify;
+            },
+
+            //Generates a new flo ID and returns private-key, public-key and floID
+            generateNewID: function () {
+                try {
+                    var key = new Bitcoin.ECKey(false);
+                    key.setCompressed(true);
+                    return {
+                        floID: key.getBitcoinAddress(),
+                        pubKey: key.getPubKeyHex(),
+                        privKey: key.getBitcoinWalletImportFormat()
+                    }
+                } catch (e) {
+                    console.log(e);
+                }
+            },
+
+            //Returns public-key from private-key
+            getPubKeyHex: function (privateKeyHex) {
+                var key = new Bitcoin.ECKey(privateKeyHex);
+                if (key.priv == null) {
+                    alert("Invalid Private key");
+                    return;
+                }
+                key.setCompressed(true);
+                var pubkeyHex = key.getPubKeyHex();
+                return pubkeyHex;
+            },
+
+            //Returns flo-ID from public-key
+            getFloIDfromPubkeyHex: function (pubkeyHex) {
+                var key = new Bitcoin.ECKey().setPub(pubkeyHex);
+                var floID = key.getBitcoinAddress();
+                return floID;
+            },
+
+            //Verify the private-key for the given public-key or flo-ID
+            verifyPrivKey: function (privateKeyHex, pubKey_floID, isfloID = true) {
+                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 (e) {
+                    console.log(e);
+                }
+            },
+
+            //Check if the given Address is valid or not
+            validateAddr: function (inpAddr) {
+                try {
+                    var addr = new Bitcoin.Address(inpAddr);
+                    return true;
+                } catch {
+                    return false;
+                }
+            },
+
+            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
+                }
+            },
+
+            verifyShamirsSecret: function (sharesArray, str) {
+                return (str && this.retrieveShamirSecret(sharesArray) === str)
+            },
+
+            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
+                }
+            }
+        }
+    </script>
+    <script>
+        /* FLO Blockchain Operator to send/receive data from blockchain using API calls*/
+        const floBlockchainAPI = {
+
+            util: {
+                serverList: floGlobals.apiURL[floGlobals.blockchain].slice(0),
+                curPos: floCrypto.randInt(0, floGlobals.apiURL[floGlobals.blockchain].length - 1),
+                fetch_retry: function (apicall) {
+                    return new Promise((resolve, reject) => {
+                        this.serverList.splice(this.curPos, 1);
+                        this.curPos = floCrypto.randInt(0, this.serverList.length - 1)
+                        this.fetch_api(apicall)
+                            .then(result => resolve(result))
+                            .catch(error => reject(error));
+                    })
+                },
+                fetch_api: function (apicall) {
+                    return new Promise((resolve, reject) => {
+                        if (this.serverList.length === 0)
+                            reject("No floSight server working")
+                        else {
+                            fetch(this.serverList[this.curPos] + apicall).then(response => {
+                                if (response.ok)
+                                    response.json().then(data => resolve(data));
+                                else {
+                                    this.fetch_retry(apicall)
+                                        .then(result => resolve(result))
+                                        .catch(error => reject(error));
+                                }
+                            }).catch(error => {
+                                this.fetch_retry(apicall)
+                                    .then(result => resolve(result))
+                                    .catch(error => reject(error));
+                            })
+                        }
+                    })
+                }
+            },
+
+            //Promised function to get data from API
+            promisedAPI: function (apicall) {
+                return new Promise((resolve, reject) => {
+                    console.log(apicall)
+                    this.util.fetch_api(apicall)
+                        .then(result => resolve(result))
+                        .catch(error => reject(error));
+                });
+            },
+
+            //Get balance for the given Address
+            getBalance: function (addr) {
+                return new Promise((resolve, reject) => {
+                    this.promisedAPI(`api/addr/${addr}/balance`)
+                        .then(balance => resolve(parseFloat(balance)))
+                        .catch(error => reject(error));
+                });
+            },
+
+            //Write Data into blockchain
+            writeData: function (senderAddr, data, privKey, receiverAddr) {
+                return new Promise((resolve, reject) => {
+                    this.sendTx(senderAddr, receiverAddr, floGlobals.sendAmt, privKey, data)
+                        .then(txid => resolve(txid))
+                        .catch(error => reject(error))
+                });
+            },
+
+            //Send Tx to blockchain 
+            sendTx: function (senderAddr, receiverAddr, sendAmt, privKey, floData = '') {
+                return new Promise((resolve, reject) => {
+                    if (!floCrypto.validateAddr(senderAddr))
+                        reject(`Invalid address : ${senderAddr}`);
+                    else if (!floCrypto.validateAddr(receiverAddr))
+                        reject(`Invalid address : ${receiverAddr}`);
+                    if (privKey.length < 1 || !floCrypto.verifyPrivKey(privKey, senderAddr))
+                        reject("Invalid Private key!");
+                    else if (typeof sendAmt !== 'number' || sendAmt <= 0)
+                        reject(`Invalid sendAmt : ${sendAmt}`);
+                    else {
+                        var trx = bitjs.transaction();
+                        var utxoAmt = 0.0;
+                        var fee = floGlobals.fee;
+                        this.promisedAPI(`api/addr/${senderAddr}/utxo`).then(utxos => {
+                            for (var i = utxos.length - 1;
+                                (i >= 0) && (utxoAmt < sendAmt + fee); i--) {
+                                if (utxos[i].confirmations) {
+                                    trx.addinput(utxos[i].txid, utxos[i].vout, utxos[i].scriptPubKey)
+                                    utxoAmt += utxos[i].amount;
+                                } else break;
+                            }
+                            if (utxoAmt < sendAmt + fee)
+                                reject("Insufficient balance!");
+                            else {
+                                trx.addoutput(receiverAddr, sendAmt);
+                                var change = utxoAmt - sendAmt - fee;
+                                if (change > 0)
+                                    trx.addoutput(senderAddr, change);
+                                trx.addflodata(floData.replace(/\n/g, ' '));
+                                var signedTxHash = trx.sign(privKey, 1);
+                                this.broadcastTx(signedTxHash)
+                                    .then(txid => resolve(txid))
+                                    .catch(error => reject(error))
+                            }
+                        }).catch(error => reject(error))
+                    }
+                });
+            },
+
+
+            //merge all UTXOs of a given floID into a single UTXO
+            mergeUTXOs: function (floID, privKey, floData = '') {
+                return new Promise((resolve, reject) => {
+                    if (!floCrypto.validateAddr(floID))
+                        return reject(`Invalid floID`);
+                    if (!floCrypto.verifyPrivKey(privKey, floID))
+                        return reject("Invalid Private Key")
+
+                    var trx = bitjs.transaction();
+                    var utxoAmt = 0.0;
+                    var fee = floGlobals.fee;
+                    this.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);
+                        this.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  {float} sendAmt (optional) amount to be sent to receivers (default value: floGlobals.sendAmt)
+             * @return {Promise}
+             */
+            writeDataMultiple: function (senderPrivKeys, data, receivers, 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 = (floGlobals.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 = floGlobals.sendAmt;
+                        receivers.forEach(floID => tmp[floID] = amount);
+                        receivers = tmp
+                    }
+                    if (typeof data != "string")
+                        data = JSON.stringify(data);
+                    this.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}
+             */
+            sendTxMultiple: function (senderPrivKeys, receivers, floData = '') {
+                return new Promise((resolve, reject) => {
+
+                    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.getFloIDfromPubkeyHex(floCrypto.getPubKeyHex(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.getFloIDfromPubkeyHex(floCrypto.getPubKeyHex(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.validateAddr(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(this.getBalance(floID))
+                    Promise.all(promises).then(results => {
+                        let totalBalance = 0,
+                            totalFee = floGlobals.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 (floID in receivers)
+                            totalSendAmt += receivers[floID];
+                        if (totalBalance < totalSendAmt)
+                            return reject("Insufficient total Balance")
+                        //Get the UTXOs of the senders
+                        let promises = []
+                        for (floID in senders)
+                            promises.push(this.promisedAPI(`api/addr/${floID}/utxo`))
+                        Promise.all(promises).then(results => {
+                            let wifSeq = [];
+                            var trx = bitjs.transaction();
+                            for (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 (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();
+                            this.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
+            broadcastTx: function (signedTxHash) {
+                return new Promise((resolve, reject) => {
+                    var request = new XMLHttpRequest();
+                    var url = this.util.serverList[this.util.curPos] + 'api/tx/send';
+                    console.log(url)
+                    if (signedTxHash.length < 1)
+                        reject("Empty Signature");
+                    else {
+                        var params = `{"rawtx":"${signedTxHash}"}`;
+                        request.open('POST', url, true);
+                        //Send the proper header information along with the request
+                        request.setRequestHeader('Content-type', 'application/json');
+                        request.onload = function () {
+                            if (request.readyState == 4 && request.status == 200) {
+                                console.log(request.response);
+                                resolve(JSON.parse(request.response).txid.result);
+                            } else
+                                reject(request.responseText);
+                        }
+                        request.send(params);
+                    }
+                })
+            },
+
+            //Get new Tx in blockchain since last sync using API
+            getNewTxs: function (addr, ignoreOld) {
+                return new Promise((resolve, reject) => {
+                    this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=1`).then(response => {
+                        var newItems = response.totalItems - ignoreOld;
+                        if (newItems) {
+                            this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=${newItems * 2}`).then(response => {
+                                var filteredData = [];
+                                for (i = response.totalItems - ignoreOld - 1; i >= 0; i--) {
+                                    if (response.items[i].isCoinBase) {
+                                        var item = {
+                                            time: response.items[i].time,
+                                            txid: response.items[i].txid,
+                                            sender: '(mined)' + response.items[i].vin[0].coinbase,
+                                            receiver: addr,
+                                            floData: response.items[i].floData
+                                        }
+                                    } else {
+                                        var item = {
+                                            time: response.items[i].time,
+                                            txid: response.items[i].txid,
+                                            sender: response.items[i].vin[0].addr,
+                                            receiver: response.items[i].vout[0].scriptPubKey.addresses[0],
+                                            floData: response.items[i].floData
+                                        }
+                                    }
+                                    filteredData.push(item);
+                                }
+                                resolve({ totalItems: response.totalItems, items: filteredData });
+                            }).catch(error => {
+                                reject(error);
+                            });
+                        } else
+                            resolve({ totalItems: response.totalItems, items: [] })
+                    }).catch(error => {
+                        reject(error);
+                    });
+                });
+            }
+        }
+    </script>
+    <script>
+        /* Compact IndexedDB operations */
+
+        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+        window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+        window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+
+        if (!window.indexedDB)
+            window.alert("Your browser doesn't support a stable version of IndexedDB.")
+
+        const compactIDB = {
+
+            setDefaultDB: function (dbName) {
+                this.dbName = dbName;
+            },
+
+            initDB: function (dbName, objectStores = {}) {
+                return new Promise((resolve, reject) => {
+                    this.dbName = this.dbName || dbName;
+                    var idb = indexedDB.open(dbName);
+                    idb.onerror = (event) => {
+                        reject("Error in opening IndexedDB!");
+                    };
+                    idb.onupgradeneeded = (event) => {
+                        var db = event.target.result;
+                        for (obs in objectStores) {
+                            var objectStore = db.createObjectStore(obs, objectStores[obs].options || {});
+                            if (objectStores[obs].indexes && typeof objectStores[obs].indexes === 'object')
+                                for (i in objectStores[obs].indexes)
+                                    objectStore.createIndex(i, i, objectStores[obs].indexes[i] || {});
+                        }
+                    }
+                    idb.onsuccess = (event) => {
+                        var db = event.target.result;
+                        if (JSON.stringify(Object.values(db.objectStoreNames).sort()) === JSON.stringify(Object.keys(
+                            objectStores).sort()))
+                            resolve("Initiated IndexedDB");
+                        else
+                            reject("IndexedDB already exist with different ObjectStores!");
+                        db.close();
+                    }
+                });
+            },
+
+            openDB: function (dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    var idb = indexedDB.open(dbName);
+                    idb.onerror = (event) => reject("Error in opening IndexedDB!");
+                    idb.onsuccess = (event) => resolve(event.target.result);
+                });
+            },
+
+            deleteDB: function (dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    var deleteReq = indexedDB.deleteDatabase(dbName);;
+                    deleteReq.onerror = (event) => reject("Error deleting database!");
+                    deleteReq.onsuccess = (event) => resolve("Database deleted successfully");
+                });
+            },
+
+            writeData: function (obsName, data, key = false, dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    this.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));
+                });
+            },
+
+            addData: function (obsName, data, key = false, dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    this.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));
+                });
+            },
+
+            removeData: function (obsName, key, dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    this.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));
+                });
+            },
+
+            readData: function (obsName, key, dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    this.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));
+                });
+            },
+
+            readAllData: function (obsName, dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    this.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));
+                });
+            },
+
+            searchData: function (obsName, patternEval, dbName = this.dbName) {
+                return new Promise((resolve, reject) => {
+                    this.openDB(dbName).then(db => {
+                        var obs = db.transaction(obsName, "readonly").objectStore(obsName);
+                        var filteredResult = {}
+                        let curReq = obs.openCursor();
+                        curReq.onsuccess = (evt) => {
+                            var cursor = evt.target.result;
+                            if (cursor) {
+                                if (patternEval(cursor.primaryKey, cursor.value))
+                                    filteredResult[cursor.primaryKey] = cursor.value;
+                                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));
+                });
+            }
+        }
+    </script>
+    <script>
+        /*FLO Web Wallet operations*/
+        floWebWallet = {
+
+            //generate a new Address triplet : resolves Object(floID,pubKey,privKey)
+            generateNewAddr: function () {
+                return new Promise((resolve, reject) => {
+                    try {
+                        var triplet = floCrypto.generateNewID();
+                        resolve(triplet);
+                    } catch (error) {
+                        reject(error);
+                    }
+                })
+            },
+
+            //recover triplet from given privKey : resolves Object(floID,pubKey,privKey)
+            recoverAddr: function (privKey) {
+                return new Promise((resolve, reject) => {
+                    try {
+                        var triplet = {}
+                        triplet.privKey = privKey;
+                        triplet.pubKey = floCrypto.getPubKeyHex(triplet.privKey);
+                        triplet.floID = floCrypto.getFloIDfromPubkeyHex(triplet.pubKey);
+                        resolve(triplet);
+                    } catch (error) {
+                        reject(error);
+                    }
+                })
+            },
+
+            //get balance of addr using API : resolves (balance)
+            getBalance: function (addr) {
+                return new Promise((resolve, reject) => {
+                    floBlockchainAPI.getBalance(addr)
+                        .then(txid => resolve(txid))
+                        .catch(error => reject(error))
+                })
+            },
+
+            //send transaction to the blockchain using API : resolves (txid)
+            sendTransaction: function (sender, receiver, amount, floData, privKey) {
+                return new Promise((resolve, reject) => {
+                    floBlockchainAPI.sendTx(sender, receiver, amount, privKey, floData)
+                        .then(txid => resolve(txid))
+                        .catch(error => reject(error))
+                })
+            },
+
+            //sync new transactions from blockchain using API and stores in IDB : resolves Array(newItems)
+            syncTransactions: function (addr) {
+                return new Promise((resolve, reject) => {
+                    compactIDB.readData('lastSync', addr).then(lastSync => {
+                        lastSync = lastSync | 0;
+                        floBlockchainAPI.getNewTxs(addr, lastSync).then(APIresult => {
+                            compactIDB.readData('transactions', addr).then(IDBresult => {
+                                if (IDBresult === undefined)
+                                    var promise1 = compactIDB.addData('transactions', APIresult.items, addr)
+                                else
+                                    var promise1 = compactIDB.writeData('transactions', IDBresult.concat(APIresult.items), addr)
+                                var promise2 = compactIDB.writeData('lastSync', APIresult.totalItems, addr)
+                                Promise.all([promise1, promise2]).then(values => resolve(APIresult.items))
+                            })
+                        })
+                    }).catch(error => reject(error))
+                })
+            },
+
+            //read transactions stored in IDB : resolves Array(storedItems)
+            readTransactions: function (addr) {
+                return new Promise((resolve, reject) => {
+                    compactIDB.readData('transactions', addr)
+                        .then(IDBresult => resolve(IDBresult))
+                        .catch(error => reject(error))
+                })
+            },
+
+            //get address-label pairs from IDB : resolves Object(addr:label)
+            getLabels: function () {
+                return new Promise((resolve, reject) => {
+                    compactIDB.readAllData('labels')
+                        .then(IDBresult => resolve(IDBresult))
+                        .catch(error => reject(error))
+                })
+            }
+        }
+
+        function onLoadStartUp() {
+            var IDBObjects = {
+                lastSync: {},
+                labels: {},
+                transactions: {}
+            }
+            compactIDB.initDB("FLOwebWallet", IDBObjects)
+                .then(result => console.log(result))
+                .catch(error => console.log(error))
+
+            createAllCards();
+            setElements();
+        }
     </script>
 </body>
-
-</html>
\ No newline at end of file
