From 1c1e3dcd7ef5b189de366b192d87329a4d1ba53f Mon Sep 17 00:00:00 2001
From: Abhishek Sinha <avishkarabhishek786@gmail.com>
Date: Thu, 16 Apr 2020 19:30:46 +0530
Subject: [PATCH] added initial new ui

---
 index.html | 3534 ++++++++++++++++++++++++++++++++++------------------
 1 file changed, 2293 insertions(+), 1241 deletions(-)
diff --git a/index.html b/index.html
index a3b536e..d239388 100644
--- a/index.html
+++ b/index.html
@@ -1,477 +1,1077 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>P2P CRYPTO TRADING SOFTWARE</title>
-    <link
-      href="https://fonts.googleapis.com/css?family=Montserrat"
-      rel="stylesheet"
-    />
-    <style>
-      html,
-      body {
-        height: 100%;
-        width: 100%;
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Local Bitcoin++</title>
+    <style>@import url("https://fonts.googleapis.com/css?family=Barlow:400,500,600,700&display=swap");
+      * {
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+        padding: 0;
         margin: 0;
-        color: #ffffff;
-        font-family: "Montserrat", sans-serif;
+        font-family: 'Barlow', sans-serif;
       }
-
-      input[type="text"] {
-        border: 1px solid #f4f4f4;
-        border-radius: 3px;
-        display: block;
-        width: 100%;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        padding: 15px;
+      
+      :root {
+        --primary-color: #03A9F4;
+        --text: 17, 17, 17;
+        --text-light: 85, 85, 85;
+        --foreground: 255, 255, 255;
+        --background: #eaeaea;
       }
-
-      h1 {
-        font-size: 5.9vw;
+      
+      body {
+        background: var(--background);
+        color: rgba(var(--text), 1);
+        font-size: 16px;
+        margin: 1rem;
       }
-      h2 {
-        font-size: 4vh;
-      }
-      h3 {
-        font-size: 3vh;
-      }
-      h4 {
-        font-size: 5vh;
-      }
-      h5 {
-        font-size: 1vh;
-      }
-      p {
-        font-size: 4vmin;
-      }
-
-      p,
-      span,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5 {
-        white-space: pre-line;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-      }
-
-      ul,
-      li {
-        list-style: none;
-      }
-      a,
-      u {
+      
+      a {
+        font-weight: 600;
         text-decoration: none;
+        color: var(--primary-color);
       }
-      a:hover {
-        text-decoration: none;
-        cursor: pointer;
+      
+      .dark-text {
+        color: #111;
       }
-
-      /*change the thinkness of the scrollbar here*/
-      ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
-        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
-        -webkit-border-radius: 10px;
-        border-radius: 10px;
+      
+      h1, h2, h3, h4, h5 {
+        font-weight: 600;
       }
-      /*add a shadow to the scrollbar here*/
-      ::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
-        -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
-        -webkit-border-radius: 10px;
-        border-radius: 10px;
-      }
-      /*this is the little scrolly dealio in the bar*/
-      ::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background: #d5d5d5;
-        height: 3px;
-      }
-      /*nobody needs this little scrollbar corner, I mean really, get rid of it haha*/
-      ::-webkit-scrollbar-corner {
-        display: none;
-        height: 0px;
-        width: 0px;
-      }
-
-      .flex {
-        display: flex;
-        flex: 1;
-        flex-wrap: wrap;
-      }
-
-      .box {
-        min-height: 100%;
-        min-width: 100%;
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-      }
-
-      .center-div {
-        display: block;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-      }
-
-      .custom-select {
-        width: 100%;
-        height: auto;
-        display: flex;
-        flex-wrap: wrap;
-        flex: 1;
-      }
-
-      select {
-        display: flex;
-        flex: 1;
-        margin: 20px 20px;
-        width: auto;
-        padding: 10px 10px 10px 10px;
-        font-size: 16px;
-        height: 47px;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-color: rgba(0, 0, 0, 0.1); /*#1f8ffc*/
-        color: #ffffff;
-        font-family: "Montserrat";
-        border-radius: 2px;
-        border: none;
-      }
-
-      /* CAUTION: IE hackery ahead */
-      select::-ms-expand {
-        display: none; /* remove default arrow in IE 10 and 11 */
-      }
-
-      option {
-        color: #6b8e23;
-        padding: 8px 16px;
-        border: 1px solid transparent;
-        cursor: pointer;
-        user-select: none;
-        white-space: pre;
-        background-color: transparent;
-      }
-
-      /* target Internet Explorer 9 to undo the custom arrow */
-      @media screen and (min-width: 0\0) {
-        select {
-          background: none\9;
-          padding: 5px\9;
-        }
-      }
-
-      .button {
-        width: 220px;
-        border: none;
-        color: white;
-        padding: 15px 32px;
-        justify-content: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        border-radius: 2px;
-        -webkit-transition-duration: 0.4s; /* Safari */
-        transition-duration: 0.4s;
-        text-align: center;
-        flex-grow: inherit;
-      }
-
-      .button:hover {
-        background-color: #4caf50; /* Green */
-        color: white;
-      }
-
-      .bg-green {
-        background-color: #4caf50;
-      } /* Green */
-      .bg-blue {
-        background-color: #008cba;
-      } /* Blue */
-      .bg-lightblue {
-        background-color: #7acfd6;
-      }
-      .bg-lightblue2 {
-        background-color: #93b7ec;
-      }
-      .bg-red {
-        background-color: #f44336;
-      } /* Red */
-      .bg-grey {
-        background-color: #e7e7e7;
-        color: black;
-      } /* Gray */
-      .bg-black {
-        background-color: #101010;
-      }
-      .bg-white {
-        background-color: #ffffff;
-      }
-      .bg-purple {
-        background-color: #9f93ec;
-      }
-      .bg-olive {
-        background-color: olivedrab;
-      }
-      .bg-pink {
-        background-color: #e0474c;
-      }
-      .bg-lightpink {
-        background-color: #ec93d3;
-      }
-      .bg-gold {
-        background-color: #dcae1d;
-      }
-      .bg-darkred {
-        background-color: #b11a21;
-      }
-      .bg-transparent {
-        background-color: rgba(0, 0, 0, 0.1);
-      }
-      .bg-yellow {
-        background-color: #e2ec93;
-      }
-
-      .fs-10 {
-        font-size: 10px;
-      }
-      .fs-12 {
-        font-size: 12px;
-      }
-      .fs-16 {
-        font-size: 16px;
-      }
-      .fs-20 {
-        font-size: 20px;
-      }
-      .fs-24 {
-        font-size: 24px;
-      }
-
-      .pd1 {
-        padding: 10px 24px;
-      }
-      .pd2 {
-        padding: 12px 28px;
-      }
-      .pd3 {
-        padding: 14px 40px;
-      }
-      .pd4 {
-        padding: 32px 16px;
-      }
-      .pd5 {
-        padding: 16px;
-      }
-
-      .mg-top-5 {
-        margin-top: 5rem;
-      }
-      .mg-5 {
-        margin: 5px 5px;
-      }
-
-      .center {
-        text-align: center;
-        margin: 2rem 3rem;
-      }
-      .ptext {
-        color: #ffffff;
-        font-weight: 700;
-        font-size: 5.4vw;
-      }
-
-      .h1text {
-        color: #ffffff; /*008CBA*/
-        font-weight: bolder;
-        font-size: 3rem;
-      }
-
-      .circles {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-      .circle-with-text {
-        justify-content: center;
-        align-items: center;
-        border-radius: 100%;
-        text-align: center;
-        margin: 5px 20px;
-        font-size: 16px;
-        font-weight: 900;
-        padding: 15px;
-        display: flex;
-        height: 125px;
-        width: 125px;
-        color: #9f93ec;
-      }
-      .multi-line-text {
-        font-size: 20px;
-      }
-      .center {
-        text-align: center;
-      }
-
-      #talkbubble {
-        width: 75%;
-        height: 75%;
-        background: #ec9393;
+      
+      button {
         position: relative;
-        -moz-border-radius: 10px;
-        -webkit-border-radius: 10px;
-        border-radius: 10px;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        padding: 0.4em 0.6em;
+        font-weight: 600;
+        cursor: pointer;
+        border-radius: 0.2em;
+        color: rgba(var(--text), 1);
+        -webkit-transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+        transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+        transition: transform 0.3s, clip-path 0.3s;
+        transition: transform 0.3s, clip-path 0.3s, -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+        border: none;
+        -webkit-clip-path: circle(100%);
+                clip-path: circle(100%);
+        background: rgba(var(--text-light), 0.1);
+        -webkit-tap-highlight-color: transparent;
       }
-      #talkbubble:before {
-        content: "";
+      
+      button::after {
+        content: '';
         position: absolute;
-        right: 100%;
-        top: 26px;
-        width: 0;
-        height: 0;
-        border-top: 13px solid transparent;
-        border-right: 26px solid #ec9393;
-        border-bottom: 13px solid transparent;
-      }
-      .push-left {
-        float: left;
-      }
-      .push-right {
-        float: right;
-      }
-
-      #talkbubble {
-        width: 80%;
-        height: 75%;
-        position: relative;
-        -moz-border-radius: 10px;
-        -webkit-border-radius: 10px;
-        border-radius: 10px;
-      }
-      #talkbubble:before {
-        content: "";
-        position: absolute;
-        right: 100%;
-        top: 26px;
-        width: 0;
-        height: 0;
-        border-top: 13px solid transparent;
-        border-right: 26px solid #ec9293;
-        border-bottom: 13px solid transparent;
-      }
-
-      .action-keys-right,
-      .action-keys-left {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        flex-wrap: wrap;
+        width: 100%;
         height: 100%;
-        margin: 10px 10px;
+        background: rgba(var(--text-light), 0.16);
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        -webkit-clip-path: circle(0%);
+                clip-path: circle(0%);
+        -webkit-transition: 0.3s;
+        transition: 0.3s;
       }
-
-      .flo_gen_keys_div,
-      .messages_div {
-        word-break: break-word;
-        min-height: 400px;
-        width: auto;
-        background-color: rgb(199, 219, 226);
-        color: #555555;
-        padding: 20px 20px;
-        border-radius: 5px;
+      
+      button:hover::after {
+        -webkit-clip-path: circle(100%);
+                clip-path: circle(100%);
       }
-
-      .action-keys-left {
-        flex-basis: 350px;
+      
+      button:focus {
+        outline: thin solid rgba(var(--text-light), 0.4);
       }
-      .action-keys-right {
-        flex-basis: 500px;
+      
+      button:disabled {
+        cursor: default;
+        background: rgba(var(--text-light), 0.4);
       }
-
-      .send_crypto_form {
-        text-align: center;
+      
+      button:disabled ~ .loader {
+        opacity: 0;
+      }
+      
+      button:disabled::after {
+        -webkit-clip-path: none;
+                clip-path: none;
+      }
+      
+      input[type=number]::-webkit-inner-spin-button,
+      input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+      
+      input:invalid {
+        outline: none;
+        -webkit-box-shadow: none;
+                box-shadow: none;
+      }
+      
+      ::-moz-focus-inner {
+        border: none;
+      }
+      
+      .bottom-padding {
+        padding-bottom: 1em;
+      }
+      
+      .top-padding {
+        padding-top: 1em;
+      }
+      
+      .bottom-margin {
+        margin-bottom: 1em;
+      }
+      
+      .top-margin {
+        margin-top: 1em;
+      }
+      
+      .flex {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
-        flex-wrap: wrap;
-        flex: 1;
-        margin: 20px 20px;
-        justify-content: center;
-        max-width: 500px;
       }
-
-      @media only screen and (max-width: 600px) {
-        .center-div {
-          width: 100%;
-        }
-        .flo_gen_keys_div,
-        .messages_div {
-          margin: 0 0;
-        }
-        .button {
-          width: 100%;
+      
+      .grid {
+        display: -ms-grid;
+        display: grid;
+      }
+      
+      .grid-2 {
+        -ms-grid-columns: auto auto;
+            grid-template-columns: auto auto;
+        gap: 1em;
+      }
+      
+      .light-text {
+        color: rgba(var(--text), 0.7);
+      }
+      
+      .hide {
+        opacity: 0;
+        pointer-events: none;
+      }
+      
+      .hide-completely {
+        display: none !important;
+      }
+      
+      .breakable {
+        word-break: break-all;
+      }
+      
+      .separator {
+        padding: .1em;
+      }
+      
+      .no-transformations {
+        -webkit-transform: none !important;
+                transform: none !important;
+      }
+      
+      .hoverable {
+        position: relative;
+      }
+      
+      .hoverable::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(var(--text-light), 0.1);
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1;
+        -webkit-clip-path: circle(0%);
+                clip-path: circle(0%);
+        -webkit-transition: 0.3s;
+        transition: 0.3s;
+      }
+      
+      .hoverable:hover::after {
+        -webkit-clip-path: circle(100%);
+                clip-path: circle(100%);
+      }
+      
+      .loader {
+        fill: none;
+        stroke-width: 6;
+        stroke: var(--primary-color);
+        height: 2rem;
+        width: 2rem;
+        overflow: visible;
+        stroke-dashoffset: 210;
+        stroke-dasharray: 210;
+        padding: 2px;
+        -ms-grid-column-align: center;
+            justify-self: center;
+      }
+      
+      @-webkit-keyframes rotate {
+        100% {
+          -webkit-transform: rotate(360deg);
+                  transform: rotate(360deg);
         }
       }
-
-      .hidden {
+      
+      @keyframes rotate {
+        100% {
+          -webkit-transform: rotate(360deg);
+                  transform: rotate(360deg);
+        }
+      }
+      
+      @-webkit-keyframes load {
+        50% {
+          stroke-dashoffset: 0;
+        }
+        100% {
+          stroke-dashoffset: -210;
+        }
+      }
+      
+      @keyframes load {
+        50% {
+          stroke-dashoffset: 0;
+        }
+        100% {
+          stroke-dashoffset: -210;
+        }
+      }
+      
+      .action {
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        cursor: pointer;
+      }
+      
+      .action:hover button::after {
+        -webkit-clip-path: circle(100%);
+                clip-path: circle(100%);
+      }
+      
+      .action .btn {
+        z-index: 2;
+      }
+      
+      .action .loader {
+        position: absolute;
+        z-index: 1;
+        padding: 0.4em;
+      }
+      
+      .clip {
+        -webkit-clip-path: circle(0) !important;
+                clip-path: circle(0) !important;
+      }
+      
+      .animate-loader {
+        -webkit-animation: load 2.6s infinite, rotate 1s infinite linear;
+                animation: load 2.6s infinite, rotate 1s infinite linear;
+      }
+      
+      .expand {
+        width: 100%;
+      }
+      
+      @-webkit-keyframes fade {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      
+      @keyframes fade {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      
+      .input {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        width: 100%;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        position: relative;
+        padding: 0.8em;
+        margin-bottom: 1.5em;
+        border-radius: 0.2em;
+        -webkit-transition: opacity 0.3s;
+        transition: opacity 0.3s;
+        background: rgba(var(--text-light), 0.1);
+        -webkit-animation: fade 0.3s;
+                animation: fade 0.3s;
+      }
+      
+      .input:last-of-type {
+        margin-bottom: 0;
+      }
+      
+      .input input:focus {
+        caret-color: var(--primary-color);
+      }
+      
+      .input .label {
+        opacity: .7;
+        font-weight: 500;
+        font-size: 1em;
+        position: absolute;
+        -webkit-transition: -webkit-transform 0.3s ease;
+        transition: -webkit-transform 0.3s ease;
+        transition: transform 0.3s ease;
+        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+        -webkit-transform-origin: left;
+                transform-origin: left;
+        pointer-events: none;
+        will-change: contents;
+      }
+      
+      .input input {
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+        font-size: 1rem;
+        border: none;
+        background: transparent;
+        outline: none;
+        color: rgba(var(--text), 1);
+      }
+      
+      .animate-label input {
+        -webkit-transform: translateY(0.5em);
+                transform: translateY(0.5em);
+      }
+      
+      .animate-label .label {
+        -webkit-transform: translateY(-60%) scale(0.7);
+                transform: translateY(-60%) scale(0.7);
+        opacity: 1;
+        color: var(--primary-color);
+      }
+      
+      .container-header {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        width: 100%;
+        padding: 0 1rem;
+      }
+      
+      .container-header h3 {
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+        font-weight: 500;
+      }
+      
+      .container-header span {
+        color: var(--accent-color);
+        border-radius: 0.2rem;
+        margin-right: 0.2rem;
+        padding: 0.5rem 1rem;
+        font-weight: 500;
+      }
+      
+      .btn {
+        background: var(--primary-color);
+        color: rgba(var(--foreground), 1);
+        padding: 0.4em 1em;
+      }
+      
+      .back-arrow {
+        stroke: rgba(var(--text), 1);
+        stroke-width: 6;
+        fill: none;
+        height: 2rem;
+        padding: 0.5rem 0.5rem 0.5rem 0;
+        cursor: pointer;
+      }
+      
+      .card {
+        border-radius: 0.6rem;
+        padding: 1.5em;
+        background: rgba(var(--foreground), 1);
+      }
+      
+      .solid-background {
+        background: var(--background) !important;
+      }
+      
+      .popup-container {
+        display: -ms-grid;
+        display: grid;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        place-items: center;
+        background: rgba(0, 0, 0, 0.24);
+        z-index: 10;
+        -webkit-transition: opacity 0.3s ease;
+        transition: opacity 0.3s ease;
+      }
+      
+      .popup-container .popup {
+        -ms-flex-item-align: end;
+            align-self: flex-end;
+        -webkit-box-align: start;
+            -ms-flex-align: start;
+                align-items: flex-start;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+        width: 100%;
+        border-radius: 0.5rem 0.5rem 0 0;
+        padding: 1.5rem;
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        background: rgba(var(--foreground), 1);
+        -webkit-transform: translateY(1rem);
+                transform: translateY(1rem);
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+        -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+                box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+        overflow-y: auto;
+      }
+      
+      .popup-container .popup h5 {
+        margin: 0.5rem 0;
+      }
+      
+      .popup-container .popup button:first-of-type {
+        margin-left: auto;
+      }
+      
+      .popup-container .popup .container-header {
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        padding: 0;
+        margin-bottom: 1.5em;
+      }
+      
+      .popup-container .popup .container-header .btn {
+        padding: 0.6em 1.2em;
+      }
+      
+      .popup-container .popup #upiToAddress {
+        padding: 1em 0;
+      }
+      
+      .crypto-selector {
+        margin: 0.4em 0 1.5em 0;
+      }
+      
+      .icon {
+        -webkit-transition: 0.3s;
+        transition: 0.3s;
+        border-radius: 4em;
+        padding: 0.4em;
+        height: 2.4em;
+        width: 2.4em;
+        overflow: visible;
+        fill: rgba(var(--text), 1);
+      }
+      
+      .btc {
+        fill: #FF9900;
+      }
+      
+      .flo {
+        fill: #2080a2;
+      }
+      
+      .inr {
+        padding: 0.45em;
+      }
+      
+      .select-crypto {
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        margin-right: 1em;
+        cursor: pointer;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        -webkit-tap-highlight-color: transparent;
+      }
+      
+      .select-crypto input {
         display: none;
       }
-
-      /* The Modal (background) */
-      .modal {
-        display: none; /* Hidden by default */
-        position: fixed; /* Stay in place */
-        z-index: 2; /* Sit on top */
+      
+      .select-crypto input:checked ~ .icon {
+        -webkit-box-shadow: 0 0 0 2px #00C853 inset;
+                box-shadow: 0 0 0 2px #00C853 inset;
+      }
+      
+      .select-crypto input:checked ~ .selected {
+        -webkit-transform: none;
+                transform: none;
+      }
+      
+      .select-crypto .selected {
+        position: absolute;
+        right: 0;
+        height: 1em;
+        -webkit-transform: scale(0);
+                transform: scale(0);
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+      }
+      
+      .select-crypto .selected circle {
+        fill: #00C853;
+        stroke: none;
+      }
+      
+      .select-crypto .selected polyline {
+        fill: none;
+        stroke: rgba(var(--foreground), 1);
+        stroke-width: 6;
+      }
+      
+      #show_message {
+        -webkit-transform: translate(0, -0.4rem);
+                transform: translate(0, -0.4rem);
+        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+        transition: opacity 0.3s, -webkit-transform 0.3s;
+        transition: transform 0.3s, opacity 0.3s;
+        transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+        -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+                box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        color: rgba(var(--text), 1);
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 100%;
+        max-width: 100%;
+        z-index: 11;
+        background: rgba(var(--foreground), 1);
+      }
+      
+      #show_message #error_icon {
+        fill: #E53935;
+      }
+      
+      #show_message #done_icon {
+        fill: #00C853;
+      }
+      
+      #show_message .notification-icon {
+        height: 2em;
+        width: 2em;
+        margin: 1em 0 1em 1em;
+        fill: rgba(var(--text), 1);
+      }
+      
+      #show_message div {
+        padding: 1em;
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+      }
+      
+      #show_message div h5 {
+        opacity: 0.8;
+      }
+      
+      #show_message span {
+        font-weight: 500;
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+      }
+      
+      #show_message button {
+        padding: 1rem;
+        margin: 0 1em 0 0;
+        border: none;
+        background: none;
+      }
+      
+      #show_message button svg {
+        height: 1em;
+        width: 1em;
+        stroke: rgba(var(--text), 1);
+        stroke-width: 6;
+      }
+      
+      #confirmation {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        padding: 1rem;
+      }
+      
+      #confirmation p {
+        margin: 1rem;
+        font-size: 1rem;
+        font-weight: 500;
+        color: rgba(var(--rgb-bw), 1) !important;
+      }
+      
+      #confirmation div {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        padding: 1em;
+        -webkit-box-pack: right;
+            -ms-flex-pack: right;
+                justify-content: right;
+        width: 100%;
+      }
+      
+      #confirmation div button {
+        background: none;
+      }
+      
+      #confirmation div button:first-of-type {
+        margin-right: 0.6em;
+      }
+      
+      #background {
+        position: fixed;
+        z-index: -1;
         left: 0;
         top: 0;
-        width: 100%; /* Full width */
-        height: 100%; /* Full height */
-        overflow: auto; /* Enable scroll if needed */
-        background-color: rgb(0, 0, 0); /* Fallback color */
-        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+        width: 100vw;
+        height: 100vh;
       }
-
-      /* Modal Content/Box */
-      .modal-content {
-        background-color: #fefefe;
-        margin: 15% auto; /* 15% from the top and centered */
-        padding: 20px;
-        border: 1px solid #888;
-        width: 80%; /* Could be more or less, depending on screen size */
+      
+      #main_header {
+        padding: 1em 0;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        text-align: center;
       }
-
-      #modal_msg {
-        color: #888;
+      
+      #user {
+        -ms-grid-columns: auto 1fr;
+            grid-template-columns: auto 1fr;
       }
-
-      /* The Close Button */
-      .close {
-        color: #aaa;
-        float: right;
-        font-size: 28px;
-        font-weight: bold;
+      
+      #profile_pic {
+        padding: 1em;
+        overflow: visible;
+        fill: none;
+        stroke: rgba(var(--text-light), 1);
+        stroke-width: 4;
+        background: var(--background);
+        border-radius: 4em;
+        width: 4em;
+        height: 4em;
+        stroke-linecap: round;
       }
-
-      .close:hover,
-      .close:focus {
-        color: black;
-        text-decoration: none;
+      
+      #switcher_header {
+        list-style: none;
+        padding: 0;
+        margin-bottom: 2em;
+        -ms-grid-columns: (max-content)[3];
+            grid-template-columns: repeat(3, -webkit-max-content);
+            grid-template-columns: repeat(3, max-content);
+        gap: 2em;
+        border-bottom: 1px solid rgba(var(--text), 0.2);
+      }
+      
+      #switcher_header li {
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        font-size: 1.2em;
+        font-weight: 600;
+        opacity: 0.6;
+        padding: 0.4em 0;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+      }
+      
+      #switcher_header li:hover {
+        opacity: 1;
         cursor: pointer;
       }
-
-      /* Server logs */
-      pre {
+      
+      #switcher_header li:focus {
+        outline: none;
+      }
+      
+      #switcher_header .active {
+        opacity: 1;
+        border-bottom: 0.1em solid var(--primary-color);
+      }
+      
+      .exchange-section {
+        gap: 2em;
+        -ms-grid-columns: (max-content)[3];
+            grid-template-columns: repeat(3, -webkit-max-content);
+            grid-template-columns: repeat(3, max-content);
+      }
+      
+      .exchange-option {
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        border-radius: 0.5em;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        cursor: pointer;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+        -webkit-tap-highlight-color: transparent;
+      }
+      
+      .exchange-option:active {
+        -webkit-transform: scale(0.9);
+                transform: scale(0.9);
+      }
+      
+      .exchange-option svg {
+        padding: 0.8em;
+        height: 4em;
+        width: 4em;
+        fill: none;
+        border-radius: 0.5em;
+        margin-bottom: 0.4em;
+        background: var(--background);
+        stroke: rgba(var(--text), 1);
+        stroke-width: 3;
+      }
+      
+      .exchange-option svg rect {
+        visibility: hidden;
+      }
+      
+      .order {
+        -ms-grid-columns: 1fr auto;
+            grid-template-columns: 1fr auto;
+        margin-bottom: 2em;
+        -webkit-box-align: start;
+            -ms-flex-align: start;
+                align-items: flex-start;
+      }
+      
+      .order:last-of-type {
+        margin-bottom: 0;
+      }
+      
+      .order .details {
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+      }
+      
+      .order .details h3 {
+        margin-bottom: 0.2em;
+      }
+      
+      .order .details h5 {
+        margin-top: 0.6em;
+        color: rgba(var(--text-light), 1);
+      }
+      
+      .refresh {
+        margin-top: 0.6em;
+        margin-bottom: 1em;
+      }
+      
+      #sign_in_popup {
+        -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+        border-radius: 0.5em;
+        width: calc(100vw - 2em);
+      }
+      
+      #sign_in_popup h1 {
+        margin-top: 3em;
+      }
+      
+      #sign_in_popup p:first-of-type {
+        margin-bottom: 4em;
+      }
+      
+      #sign_in_popup .action {
+        margin-top: 1em;
+      }
+      
+      #sign_in_popup p:nth-of-type(2) {
+        margin-top: 2em;
+        margin-bottom: 1em;
+      }
+      
+      #sign_in_popup #sign_in_illustration {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        left: 0;
+        z-index: -1;
+      }
+      
+      .primary-btn {
+        background: var(--primary-color);
+        padding: 1em 1.2em;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        color: black;
+      }
+      
+      .primary-btn::after {
+        background: rgba(var(--foreground), 0.1);
+      }
+      
+      .crypto-price {
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -ms-grid-columns: auto 1fr auto;
+            grid-template-columns: auto 1fr auto;
+      }
+      
+      .crypto-price:first-of-type {
+        margin-bottom: 1em;
+      }
+      
+      .crypto-price h3 {
+        margin-left: 1em;
+      }
+      
+      .crypto-price h5 {
+        opacity: 0.8;
+        font-weight: 500;
+      }
+      
+      #market_price_display .flex {
+        margin-bottom: 1.5em;
+      }
+      
+      #market_price_display .light-text {
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+      }
+      
+      #market_price_display svg {
+        margin-left: -0.4em;
+        margin-right: 0.5em;
+      }
+      
+      @media only screen and (min-width: 640px) {
+        body {
+          margin: 1rem 6vw;
+        }
+        .popup-container .popup {
+          width: auto;
+          -ms-flex-item-align: center;
+              -ms-grid-row-align: center;
+              align-self: center;
+          border-radius: 0.2rem;
+          height: auto;
+        }
+        main {
+          display: -ms-grid;
+          display: grid;
+          -ms-grid-columns: 1.5fr 1fr;
+              grid-template-columns: 1.5fr 1fr;
+          gap: 2em;
+          padding: 2em 0 0 0;
+          -webkit-box-align: start;
+              -ms-flex-align: start;
+                  align-items: flex-start;
+        }
+        #main_header {
+          text-align: left;
+        }
+        #show_message {
+          -webkit-transform: translate(0.4rem, 0);
+                  transform: translate(0.4rem, 0);
+          margin: 1rem;
+          max-width: 60vw;
+          width: -webkit-max-content;
+          width: -moz-max-content;
+          width: max-content;
+          border-radius: 0.2rem;
+        }
+        #confirmation {
+          padding: 1rem;
+          width: 24rem;
+        }
+        #confirmation button {
+          margin-left: 0.5rem;
+        }
+        #confirmation button:first-of-type {
+          margin-left: auto;
+        }
+        #confirmation p {
+          margin: 1rem;
+          margin-bottom: 2rem;
+        }
+        #sign_in_popup,
+        #buy_crypto_popup, #sell_crypto_popup,
+        #send_crypto_popup, #deposit_crypto_popup, #withdraw_crypto_popup,
+        #deposit_cash_popup, #withdraw_cash_popup {
+          width: 24rem;
+        }
+      }
+      
+      @media only screen and (min-width: 1280px) {
+        body {
+          margin: 1rem 16vw;
+        }
+        main {
+          -ms-grid-columns: 2fr 1fr;
+              grid-template-columns: 2fr 1fr;
+        }
+      }
+      
+      @media only screen and (min-width: 1920px) {
+        body {
+          font-size: 24px;
+          margin: 2rem 24vw;
+        }
+      }
+      
+      @media only screen and (min-width: 2048px) {
+        body {
+          font-size: 24px;
+          margin: 2rem 32vw;
+        }
+      }
+      
+      @media only screen and (max-width: 320px) {
+        body {
+          font-size: 14px;
+        }
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --text: 238, 238, 238;
+          --text-light: 170, 170, 170;
+          --foreground: 26, 26, 26;
+          --background: #111;
+        }
+      }
+      
+      @media (prefers-color-scheme: light) {
+        :root {
+          --text: 17, 17, 17;
+          --text-light: 85, 85, 85;
+          --foreground: 255, 255, 255;
+          --background: #eaeaea;
+        }
+      }
+      
+      @media (prefers-color-scheme: no-preference) {
+        :root {
+          --text: 17, 17, 17;
+          --text-light: 85, 85, 85;
+          --foreground: 255, 255, 255;
+          --background: #eaeaea;
+        }
+      }
+      
+      @media (any-hover: hover) {
+        .cancel-order {
+          opacity: 0;
+          -webkit-transition: opacity 0.3s;
+          transition: opacity 0.3s;
+        }
+        .order:hover .cancel-order {
+          opacity: 1;
+        }
+      }
+      /*# sourceMappingURL=main.css.map */</style>
+    <style>
+            /* Server logs */
+            pre {
         max-height: 20em;
         font-family: monospace;
         font-size: 1em;
@@ -533,150 +1133,949 @@
         background: #eee;
         overflow-x: hidden;
       }
-
-      #trading_prices_div {
-        display: flex;
-        /* align-items: flex-end; */
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        position: fixed;
-        top: 0px;
-        /* left: 25px;
-        right: 25px; */
-        width: 90%;
-        z-index: 1;
-        /* max-height: 5em; */
-        font-family: monospace;
-        font-size: 1em;
-        padding: 2px 5px;
-        color: #ffffff;
-        margin: 0 25px 0 25px;
-        white-space: pre-line;
-      }
-    </style>
-  </head>
-
-  <body>
+    </style>  
+</head>
+<body>
     <div class="sidenav">
-      <div class="w3-sidebar w3-bar-block" style="display:none" id="mySidebar">
-        <div
-          onclick="closeMessage()"
-          class="w3-bar-item w3-button w3-large bg-black"
-        >
-          Close
+        <div class="w3-sidebar w3-bar-block" style="display:none" id="mySidebar">
+          <div
+            onclick="closeMessage()"
+            class="w3-bar-item w3-button w3-large bg-black"
+          >
+            Close
+          </div>
+          <pre id="log">
+                  Event information log
+                  =====================
+          </pre>
+        </div>
+        <div class="w3-button w3-teal w3-xlarge" onclick="displayMessages()">
+            &#8801;
         </div>
-        <pre id="log">
-                Event information log
-                =====================
-        </pre>
-      </div>
-      <div class="w3-button w3-teal w3-xlarge" onclick="displayMessages()">
-        0
       </div>
+  <audio id="notification_sound">
+    <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/mpeg">
+    <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/ogg">
+  </audio>
+
+  <div class="popup-container hide">
+    <div id="confirmation" class="popup">
+        <p></p>
+        <div>
+            <button class="hover" onclick="hidePopup(this)">Cancel</button>
+            <button class="hover">Ok</button>
+        </div>
     </div>
-
-    <div id="trading_prices_div">Loading live trading prices...</div>
-
-    <div class="box bg-purple">
-      <div class="center-div">
-        <em>
-          <h1 class="h1text">Local Bitcoin Plus Plus P2P EXCHANGE</h1>
-        </em>
-
-        <div class="circles">
-          <a href="#deposit_withdraw_div">
-            <div class="circle-with-text bg-white">
-              DEPOSIT WITHDRAW SECTION
+</div>
+<div id="show_message" class="hide">
+  <svg id="error_icon" class="notification-icon hide-completely" viewBox="0 0 100 100">
+    <title>Error icon</title>
+    <path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM46,27.18A.79.79,0,0,1,46.6,27h7.72a.79.79,0,0,1,.79.79l-1,28.76a.79.79,0,0,
+    1-.79.79H47.46a.77.77,0,0,1-.56-.23.73.73,0,0,1-.23-.56l-.86-28.76A.77.77,0,0,1,46,27.18Zm7.68,44.39A4.91,4.91,0,0,1,50,73.05a5.08,5.08,
+    0,0,1-5.21-5.21A5,5,0,0,1,50,62.63a5,5,0,0,1,3.73,1.45,5.18,5.18,0,0,1,1.42,3.76A5.11,5.11,0,0,1,53.72,71.57Z"/>
+  </svg>
+  <svg id="done_icon" class="notification-icon" viewBox="0 0 100 100">
+    <title>Done icon</title>
+    <path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM80.85,32.37,40.3,72.92a1.24,1.24,0,0,1-1.75,0l-19.4-19.4a1.23,1.23,0,0,1,0-1.75l3.54-3.54a1.23,
+    1.23,0,0,1,1.74,0L38.55,62.35a1.24,1.24,0,0,0,1.75,0L75.57,27.08a1.23,1.23,0,0,1,1.74,0l3.54,3.54A1.23,1.23,0,0,1,80.85,32.37Z"/>
+  </svg>
+  <div>
+    <h5>Notification</h5>
+    <span id="notification_text">Message</span>
+  </div>
+    <button id="hide_banner_btn">
+    <svg viewBox="0 0 50 50">
+        <title>Close this notification</title>
+        <line x1="50" y1="0" x2="0" y2="50"/>
+        <line x1="0" y1="0" x2="50" y2="50"/>
+    </svg>
+    </button>
+</div>
+<!--<svg id="background" viewBox="0 0 2064.612 1967.514">
+    <defs>
+      <filter id="Rectangle_12" x="0" y="0" width="1502.184" height="1449.184" filterUnits="userSpaceOnUse">
+        <feComposite in="SourceGraphic"/>
+      </filter>
+    </defs>
+    <rect id="Rectangle_4" data-name="Rectangle 4" width="1387" height="637" rx="60" transform="translate(71 1517.087) rotate(-45)" fill="#17bf65"/>
+    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_12)">
+      <rect id="Rectangle_12-2" data-name="Rectangle 12" width="1387" height="637" rx="60" transform="translate(521.43 6) rotate(45)" fill="#6decb9"/>
+    </g>
+    <circle id="Ellipse_3" data-name="Ellipse 3" cx="34.5" cy="34.5" r="34.5" transform="translate(1502.612 769.248)" fill="#b2ffe8"/>
+    <circle id="Ellipse_2" data-name="Ellipse 2" cx="98" cy="98" r="98" transform="translate(1868.612 1036.248)" fill="#b2b2ff"/>
+  </svg>-->
+ 
+           <!--Sign in popup-->
+           <div class="popup-container solid-background">
+            <div id="sign_in_popup" class="popup">
+                <div class="container-header">
+                    <h1>Sign In</h1>
+                </div>
+                <p class="expand light-text">Welcome to RanchiMall Crypto exchange <b>Local Bitcoin++</b></p>
+                <label class="input">
+                    <input id="get_priv_key_field" type="password" required>
+                    <div class="label">Private Key</div>
+                  </label>
+                <div class="action expand" onclick="signIn(this)">
+                  <button class="primary-btn expand" type="submit" disabled>
+                      Sign In
+                  </button>
+                  <svg viewBox="0 0 73 73" class="loader">
+                      <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                  </svg>
+                </div>
+                <p class="light-text">
+                    Don't have private key, get it from <a href="https://flo-webwallet.duckdns.org/" target="_blank">here</a>.
+                </p>
+                <svg id="sign_in_illustration" viewBox="0 0 612 276.03">
+                  <defs><style>.a{fill:#ee2a7b;}.b{fill:#9e1f63;}.c{fill:#da1c5c;}</style></defs>
+                  <title>Untitled-1</title>
+                  <polygon class="a" points="0 0 0 276.03 195.07 207.16 233.66 0 0 0"/>
+                  <polygon class="b" points="114.09 0 117.19 27.93 356.1 132.63 536.42 0 114.09 0"/>
+                  <polygon class="c" points="480.49 0 538.11 99.8 612 99.8 612 0 480.49 0"/>
+                </svg>
+            </div>
+          </div> 
+
+<header id="main_header" class="flex">
+  <span class="expand">
+    <small>RanchiMall</small>
+    <h2>Local Bitcoin++</h2>
+  </span>
+</header>
+<main class="">
+    <div id="left" class="bottom-margin grid">
+        <div id="exchange" class="card">
+            <ul id="switcher_header" class="grid">
+                <li tabindex="0" onclick="showSection(this, 'asset_section')" class="active exchange-btn" title="Buy or sell crypto assets">Trade</li>
+                <li tabindex="0" onclick="showSection(this, 'crypto_section')" class="exchange-btn" title="Deposit or withdraw crypto assets">Crypto</li>
+                <li tabindex="0" onclick="showSection(this, 'cash_section')" class="exchange-btn" title="Deposit or withdraw cash">Cash</li>
+            </ul>
+            <div id="switcher_body">
+                <div id="asset_section" class="exchange-section grid">
+                    <span id="buy_crypto_btn" class="exchange-option">
+                      <svg viewBox="0 0 74.98 73.5">
+                        <title>Buy icon</title>
+                        <path d="M68.62,32.25H79.73a3.26,3.26,0,0,1,3.44,3v48a3.25,3.25,0,0,1-3.44,3H16.45a3.25,3.25,0,0,1-3.44-3v-48a3.26,3.26,0,0,1,3.44-3h11.1" transform="translate(-12.51 -13.25)"/>
+                        <rect x="45.48" y="37.5" width="29" height="17" rx="3.72"/>
+                        <path d="M83.27,51.25a3.22,3.22,0,0,1,3.21,3.22V64a3.21,3.21,0,0,1-3.21,3.21H61.7A3.22,3.22,0,0,1,58.48,64V54.47a3.23,3.23,0,0,1,3.22-3.22H83.27m0-1H61.7a4.22,4.22,0,0,0-4.22,4.22V64a4.21,4.21,0,0,0,4.22,4.21H83.27A4.2,4.2,0,0,0,87.48,64V54.47a4.21,4.21,0,0,0-4.21-4.22Z" transform="translate(-12.51 -13.25)"/>
+                        <circle cx="53.23" cy="46" r="4"/><path d="M65.73,55.75a3.5,3.5,0,1,1-3.5,3.5,3.51,3.51,0,0,1,3.5-3.5m0-1a4.5,4.5,0,1,0,4.5,4.5,4.51,4.51,0,0,0-4.5-4.5Z" transform="translate(-12.51 -13.25)"/>
+                        <line x1="35.49" x2="35.49" y2="37.58"/>
+                        <polyline points="23.39 25.79 35.49 37.89 47.6 25.79"/>
+                      </svg>                                               
+                        <h5>Buy</h5>
+                    </span>
+                    <span id="sell_crypto_btn" class="exchange-option">
+                      <svg viewBox="0 0 74.98 73.5">
+                        <title>Sell icon</title>
+                        <path d="M68.62,32.25H79.73a3.26,3.26,0,0,1,3.44,3v48a3.25,3.25,0,0,1-3.44,3H16.45a3.25,3.25,0,0,1-3.44-3v-48a3.26,3.26,0,0,1,3.44-3h11.1" transform="translate(-12.51 -13.25)"/>
+                        <rect class="b" x="45.48" y="37.5" width="29" height="17" rx="3.72"/>
+                        <path d="M83.27,51.25a3.22,3.22,0,0,1,3.21,3.22V64a3.21,3.21,0,0,1-3.21,3.21H61.7A3.22,3.22,0,0,1,58.48,64V54.47a3.23,3.23,0,0,1,3.22-3.22H83.27m0-1H61.7a4.22,4.22,0,0,0-4.22,4.22V64a4.21,4.21,0,0,0,4.22,4.21H83.27A4.2,4.2,0,0,0,87.48,64V54.47a4.21,4.21,0,0,0-4.21-4.22Z" transform="translate(-12.51 -13.25)"/>
+                        <circle  cx="53.23" cy="46" r="4"/>
+                        <path d="M65.73,55.75a3.5,3.5,0,1,1-3.5,3.5,3.51,3.51,0,0,1,3.5-3.5m0-1a4.5,4.5,0,1,0,4.5,4.5,4.51,4.51,0,0,0-4.5-4.5Z" transform="translate(-12.51 -13.25)"/>
+                        <line x1="35.49" y1="38.6" x2="35.49" y2="1.02"/>
+                        <polyline points="47.6 12.81 35.49 0.71 23.39 12.81"/>
+                      </svg>                     
+                        <h5>Sell</h5>
+                    </span>
+                </div>
+                <div id="crypto_section" class="exchange-section grid hide-completely">
+                    <span id="send_crypto_btn" class="exchange-option">
+                        <svg viewBox="0 0 73 73">
+                            <line x1="22.13" y1="50.87" x2="50.48" y2="22.52"/>
+                            <polyline points="30.71,22.24 50.76,22.24 50.76,42.29 "/>
+                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
+                        </svg>                                                 
+                        <h5>Send</h5>
+                    </span>
+                    <span id="deposit_crypto_btn" class="exchange-option">
+                        <svg viewBox="0 0 73 73">
+                            <line x1="33.78" y1="22.72" x2="33.78" y2="62.81"/>
+                            <polyline class="st0" points="47.96,49.03 33.78,63.2 19.61,49.03 "/>
+                            <line x1="47.15" y1="23.09" x2="47.15" y2="9.73"/>
+                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
+                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
+                        </svg>                       
+                        <h5>Deposit</h5>
+                    </span>
+                    <span id="withdraw_crypto_btn" class="exchange-option">
+                        <svg viewBox="0 0 73 73">
+                            <line x1="33.78" y1="63.73" x2="33.78" y2="23.63"/>
+                            <polyline points="19.61,37.42 33.78,23.24 47.96,37.42 "/>
+                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
+                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
+                        </svg>
+                        <h5>Withdraw</h5>
+                    </span>
+                </div>
+                <div id="cash_section" class="exchange-section grid hide-completely">
+                    <span id="deposit_cash_btn" class="exchange-option">
+                        <svg viewBox="0 0 73 73">
+                            <line x1="33.78" y1="22.72" x2="33.78" y2="62.81"/>
+                            <polyline class="st0" points="47.96,49.03 33.78,63.2 19.61,49.03 "/>
+                            <line x1="47.15" y1="23.09" x2="47.15" y2="9.73"/>
+                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
+                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
+                        </svg>                               
+                        <h5>Deposit</h5>
+                    </span>
+                    <span id="withdraw_cash_btn" class="exchange-option">
+                        <svg viewBox="0 0 73 73">
+                            <line x1="33.78" y1="63.73" x2="33.78" y2="23.63"/>
+                            <polyline points="19.61,37.42 33.78,23.24 47.96,37.42 "/>
+                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
+                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
+                        </svg>
+                        <h5>Withdraw</h5>
+                    </span>
+                </div>
             </div>
-          </a>
-          <a href="#buy_sell_div">
-            <div class="circle-with-text bg-white">TRADE ASSETS SECTION</div>
-          </a>
-          <a href="#manage_keys_div">
-            <div class="circle-with-text bg-white">MANAGE ACTIONS SECTION</div>
-          </a>
         </div>
-
-        <h3 class="mg-top-5">FLO ID: <span id="localbitcoinuserdiv"></span></h3>
-        <strong class="center" id="balances_div"></strong>
-      </div>
-      <div class="center-div">
-        <span>
-          
-        </span>
-      </div>
-    </div>
-
-    <div class="box bg-olive" id="deposit_withdraw_div">
-      <div class="center-div">
-        <div class="center">
-          <span class="ptext">DEPOSIT WITHDRAW CRYPTO</span>
+        <div id="orders_panel" class="top-padding top-margin card">
+            <h3 class="light-text bottom-padding bottom-margin">
+                My Orders
+            </h3>
+            <div id="orders_container">
+                <!-- Container for trade orders-->
+            </div>
         </div>
-
-        <div class="custom-select" id="asset_box"></div>
-        <div class="center" id="asset_button_box"></div>
-      </div>
     </div>
-
-    <div class="box bg-lightblue" id="deposit_withdraw_fiat_div">
-      <div class="center-div">
-        <div class="center">
-          <span class="ptext">DEPOSIT WITHDRAW CASH</span>
-        </div>
-
-        <div class="custom-select" id="asset_fiat_box"></div>
-        <div class="center" id="asset_fiat_button_box"></div>
-      </div>
+    <div id="right">
+            <div id="user" class="grid grid-2 bottom-margin card">
+              <svg id="profile_pic" viewBox="0 0 49.54 61.12">
+                <title>User icon</title>
+                <path d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14" transform="translate(-25.23 -20)"/>
+                <path d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06" transform="translate(-25.23 -19.44)"/>
+              </svg>
+                <div>
+                    <h5 class="light-text">FLO ID</h5>
+                    <h4 class="breakable">FFS5hFXG7DBtdgzrLwixZLpenAmsCKRddm</h4>
+                    <button onclick="signOut()" class="top-margin">Sign Out</button>
+                </div>
+            </div>
+            <div id="market_price_display" class="card bottom-margin">
+              <div class="flex">
+                <h3 class="light-text">
+                  Market price
+                </h3>
+                <div id="refresh_market_price" class="action">
+                  <button type="submit">
+                      refresh
+                  </button>
+                  <svg viewBox="0 0 73 73" class="loader">
+                      <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                  </svg>
+                </div>
+              </div>
+              <span class="crypto-price grid">
+                <svg viewBox="0 0 30.61 40.52" class="icon btc">
+                  <title>Bitcoin icon</title>
+                    <path d="M30.53,16.29c0.64-4.26-2.61-6.55-7.04-8.07l1.44-5.77l-3.51-0.88l-1.4,5.62c-0.92-0.23-1.87-0.45-2.81-0.66
+                    l1.41-5.65L15.11,0l-1.44,5.77c-0.76-0.17-1.51-0.35-2.24-0.53l0-0.02L6.59,4.01L5.66,7.76c0,0,2.61,0.6,2.55,0.63
+                    c1.42,0.36,1.68,1.3,1.64,2.04l-1.64,6.57c0.1,0.02,0.23,0.06,0.36,0.12c-0.12-0.03-0.24-0.06-0.37-0.09l-2.3,9.2
+                    c-0.17,0.43-0.61,1.08-1.61,0.83c0.04,0.05-2.55-0.64-2.55-0.64L0,30.45l4.57,1.14c0.85,0.21,1.68,0.44,2.5,0.65l-1.45,5.83
+                    l3.51,0.88l1.44-5.77c0.96,0.26,1.89,0.5,2.8,0.73l-1.43,5.74l3.51,0.88l1.45-5.82c5.99,1.13,10.49,0.68,12.38-4.74
+                    c1.53-4.36-0.08-6.88-3.23-8.52C28.34,20.92,30.07,19.41,30.53,16.29L30.53,16.29z M22.51,27.54c-1.08,4.36-8.43,2-10.81,1.41
+                    l1.93-7.73C16.01,21.82,23.65,22.99,22.51,27.54L22.51,27.54z M23.6,16.23c-0.99,3.97-7.1,1.95-9.08,1.46l1.75-7.01
+                    C18.25,11.17,24.63,12.09,23.6,16.23z"/>
+                </svg>
+                <span>
+                  <h4 class="expand">Bitcoin</h4>
+                  <h5>BTC</h5>
+                </span>
+                <h3 id="btc_market_price">₹480,600</h3>
+              </span>
+              <span class="crypto-price grid">
+                <svg class="icon flo" viewBox="0 0 45.6 47.07">
+                  <title>FLO coin icon</title>
+                  <path d="M61.4,58.86A12.31,12.31,0,0,0,68.81,55a15.45,15.45,0,0,0,4-8.52c-11-.63-12.36,1-13.71,1.68-1.19.61-5.33,4.56-5.33,
+                    4.56s3.07-3.14,3.2-9.94a19.94,19.94,0,0,0-2.72-10.65A23.86,23.86,0,0,0,50,26.46a24.09,24.09,0,0,0-4.23,5.67A19.94,19.94,0,0,0,43,42.78c.13,6.8,3.2,9.94,
+                    3.2,9.94s-4.14-3.95-5.33-4.56c-1.35-.69-2.67-2.31-13.71-1.68a15.45,15.45,0,0,0,4,8.52,12.31,12.31,0,0,0,7.41,3.86s-5.05-2-7.15-9.45c0,0,5.76-.69,9.63,1.87,
+                    2.53,1.67,4.86,4.26,6.79,6a17.72,17.72,0,0,0-6.81,1.88,7.85,7.85,0,0,0-4.44,4.38,5.65,5.65,0,0,0-.19,2.27,33.8,33.8,0,0,0,5.94,0,5.87,5.87,0,0,0,3.42-2.16,
+                    12.72,12.72,0,0,1-3.95.77c-2.06,0-2.67-.66-2.67-.66,1-3.64,8.68-5.19,8.68-5.19a16.13,16.13,0,0,0-1.42,6.5A12.76,12.76,0,0,0,50,73.53a12.76,12.76,0,0,0,
+                    3.57-8.45,16.13,16.13,0,0,0-1.42-6.5s7.71,1.55,8.68,5.19c0,0-.61.66-2.67.66a12.72,12.72,0,0,1-3.95-.77,5.87,5.87,0,0,0,3.42,2.16,33.8,33.8,0,0,0,5.94,0,
+                    5.65,5.65,0,0,0-.19-2.27,7.85,7.85,0,0,0-4.44-4.38,17.72,17.72,0,0,0-6.81-1.88c1.93-1.75,4.26-4.34,6.79-6,3.87-2.56,9.63-1.87,9.63-1.87C66.45,56.84,61.4,
+                    58.86,61.4,58.86ZM50,69.52a6.1,6.1,0,0,1-1.47-4.26A10.74,10.74,0,0,1,50,60.12a10.74,10.74,0,0,1,1.47,5.14A6.1,6.1,0,0,1,50,69.52Zm0-15.23a17.26,17.26,0,0,
+                    1-4.35-11c0-9,4.35-11.84,4.35-11.84s4.35,2.84,4.35,11.84A17.26,17.26,0,0,1,50,54.29Z" transform="translate(-27.2 -26.46)"/>
+                </svg>
+                <span>
+                  <h4 class="expand">FLO</h4>
+                  <h5>FLO</h5>
+                </span>
+                <h3 id="flo_market_price">₹1.30</h3>
+              </span>
+            </div>
+            <div id="balance_panel" class="top-padding card">
+                <h3 class="light-text bottom-padding">
+                    Balance
+                </h3>
+                <div class="balance-display">
+                    <h5 class="light-text">Cash</h5>
+                    <h2 id="user_cash_bal">
+                        ₹50000
+                    </h2>
+                    <div id="refresh_cash_bal" class="action refresh">
+                      <button type="submit">
+                          refresh
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                    </div>
+                </div>
+                <div class="grid grid-2 top-margin">
+                    <div class="balance-display">
+                        <h5 class="light-text">Bitcoin</h5>
+                        <h2 id="user_btc_bal">
+                            600
+                        </h2>
+                        <div id="refresh_btc_bal" class="action refresh">
+                          <button type="submit">
+                              refresh
+                          </button>
+                          <svg viewBox="0 0 73 73" class="loader">
+                              <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                          </svg>
+                        </div>
+                    </div>
+                    <div class="balance-display">
+                        <h5 class="light-text">FLO</h5>
+                        <h2 id="user_flo_bal">
+                            1200
+                        </h2>
+                        <div id="refresh_flo_bal" class="action refresh">
+                          <button type="submit">
+                              refresh
+                          </button>
+                          <svg viewBox="0 0 73 73" class="loader">
+                              <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                          </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
     </div>
-    <div class="box bg-pink" id="buy_sell_div">
-      <div class="center-div" id="tradebox">
-        <div style="text-align:center; margin-bottom: 3rem">
-          <span class="ptext">BUY SELL ASSET</span>
+    <div id="popup-parent">
+      <!--Asset section-->
+      <div class="popup-container hide">
+        <div id="buy_crypto_popup" class="popup">
+            <div class="container-header bottom-margin">
+                <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                    <title>Close this popup</title>
+                    <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                </svg>
+                <h3>Buy Crypto</h3>
+                <div class="action" id="trade_buy_button">
+                    <button class="btn" type="submit" disabled>
+                        Buy
+                    </button>
+                    <svg viewBox="0 0 73 73" class="loader">
+                        <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                    </svg>
+                </div>
+            </div>
+            <h5>Select Crypto</h5>
+            <div class="crypto-selector flex expand" id="selectListCryptoBuy"></div>
+            <h5>Select Currency</h5>
+            <div class="crypto-selector flex expand" id="selectListFiatBuy"></div>
+            <h5>Select Amount</h5>
+            <div class="crypto-selector flex expand" id="selectListTradingAmountBuy"></div>
+            
+            <label class="input">
+                <input type="number" inputmode="numeric" required>
+                <div class="label">Buy worth of</div>
+              </label>
         </div>
       </div>
+      <div class="popup-container hide">
+          <div id="sell_crypto_popup" class="popup">
+              <div class="container-header bottom-margin">
+                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                      <title>Close this popup</title>
+                      <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                  </svg>
+                  <h3>Sell Crypto</h3>
+                  <div class="action" id="trade_sell_button">
+                      <button class="btn" type="submit" disabled>
+                          Sell
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                  </div>
+              </div>
+              <h5>Select Crypto</h5>
+              <div class="crypto-selector flex expand" id="selectListCryptoSell"></div>
+              <h5>Select Currency</h5>
+              <div class="crypto-selector flex expand" id="selectListFiatSell"></div>
+              <h5>Select Amount</h5>
+              <div class="crypto-selector flex expand" id="selectListTradingAmountSell"></div>
+              <label class="input">
+                  <input type="number" inputmode="numeric" required>
+                  <div class="label">Sell worth of</div>
+              </label>
+          </div>
+      </div>
+      <!-- Crypto section-->
+      <div class="popup-container hide">
+          <div id="send_crypto_popup" class="popup">
+              <div class="container-header bottom-margin">
+                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                      <title>Close this popup</title>
+                      <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                  </svg>
+                  <h3>Send Crypto</h3>
+                  <div class="action" onclick="sendCrypto(this)">
+                      <button class="btn" type="submit" disabled>
+                          Send
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                  </div>
+              </div>
+              <h5>Select Crypto</h5>
+              <div class="crypto-selector flex expand" id="send_crypto_select_div"></div>
+              <label class="input">
+                  <input name="senderFloId" type="text" required>
+                  <div class="label">Sender's FLO ID</div>
+              </label>
+              <label class="input">
+                  <input name="senderPrivateKey" type="password" required>
+                  <div class="label">Sender's Private Key</div>
+              </label>
+              <label class="input">
+                  <input name="recieverFloId" type="text" required>
+                  <div class="label">Reciever's FLO ID</div>
+              </label>
+              <label class="input">
+                  <input name="amount" type="number" inputmode="numeric" required>
+                  <div class="label">Amount</div>
+              </label>
+          </div>
+      </div>
+      <div class="popup-container hide">
+          <div id="deposit_crypto_popup" class="popup">
+              <div class="container-header bottom-margin">
+                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                      <title>Close this popup</title>
+                      <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                  </svg>
+                  <h3>Deposit Crypto</h3>
+                  <div class="action" id="depositAssetButton">
+                      <button class="btn" type="submit" disabled>
+                          Deposit
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                  </div>
+              </div>
+              <h5>Select Crypto</h5>
+              <div class="crypto-selector flex expand" id="deposit_crypto_div"></div>
+              <label class="input">
+                  <input id="trade_amount_select" type="number" inputmode="numeric" required>
+                  <div class="label">Amount</div>
+              </label>
+              <h5>Click After Sending Crypto To Exchange</h5>
+              <div class="flex expand"  id="cnf_crypto_deposit"></div>
+              <label class="input">
+                    <input type="button">
+                    <div class="label">Confirm Deposit</div>
+                </label>
+            </div>
+      </div>
+      <div class="popup-container hide">
+          <div id="withdraw_crypto_popup" class="popup">
+              <div class="container-header bottom-margin">
+                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                      <title>Close this popup</title>
+                      <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                  </svg>
+                  <h3>Withdraw Crypto</h3>
+                  <div class="action" id="withdrawAssetButton">
+                      <button class="btn" type="submit" disabled>
+                          withdraw
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                  </div>
+              </div>
+              <h5>Select Crypto</h5>
+              <div class="crypto-selector flex expand" id="withdraw_crypto_div"></div>
+              <label class="input">
+                  <input id="withdraw_recving_addr" type="text" required>
+                  <div class="label">Recieving crypto Address</div>
+              </label>
+              <label class="input">
+                  <input id="crypto_withdraw_amount" type="number" inputmode="numeric" required>
+                  <div class="label">Amount</div>
+              </label>
+          </div>
+      </div>
+      <!-- Cash section-->
+      <div class="popup-container hide">
+          <div id="deposit_cash_popup" class="popup">
+              <div class="container-header bottom-margin">
+                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                      <title>Close this popup</title>
+                      <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                  </svg>
+                  <h3>Deposit Cash</h3>
+                  <div class="action" id="depositAssetButton">
+                      <button class="btn" type="submit" disabled>
+                          Deposit
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                  </div>
+              </div>
+              <label class="input">
+                  <input name="upiAddr" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" type="text" required>
+                  <div class="label">Depositer's UPI address</div>
+              </label>
+              <label class="input">
+                  <input name="amount" type="number" inputmode="numeric" required>
+                  <div class="label">Amount</div>
+              </label>
+              <h3 id="upiToAddress" class="hide-completely"></h3>
+          </div>
+      </div>
+      <div class="popup-container hide">
+          <div id="withdraw_cash_popup" class="popup">
+              <div class="container-header bottom-margin">
+                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                      <title>Close this popup</title>
+                      <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
+                  </svg>
+                  <h3>Withdraw Cash</h3>
+                  <div class="action" id="withdrawAssetButton">
+                      <button class="btn" type="submit" disabled>
+                          withdraw
+                      </button>
+                      <svg viewBox="0 0 73 73" class="loader">
+                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+                      </svg>
+                  </div>
+              </div>
+              <label class="input">
+                  <input name="upiAddr" pattern="^[a-zA-z0-9]+@[a-zA-z0-9]+" type="text" required>
+                  <div class="label">Recieving UPI address</div>
+              </label>
+              <label class="input">
+                  <input name="amount" type="number" name="hi" inputmode="numeric" required>
+                  <div class="label">Amount</div>
+              </label>
+          </div>
+      </div>
     </div>
-    <div class="box bg-grey">
-      <div class="center-div" id="my_trades_div"></div>
-      <div class="center-div" id="withdraw_deposit_table"></div>
-    </div>
-    <div class="box bg-lightblue">
-      <div class="center-div">
-        <div style="text-align:center; margin-bottom: 3rem">
-          <span class="ptext">SEND CRYPTO</span>
-        </div>
 
-        <div class="custom-select" id="send_crypto_select_div"></div>
+    </main>
+    <script id="ui_functions">
+        let frag = document.createDocumentFragment(),
+            currentTimeout,
+            notificationSound = document.getElementById('notification_sound');
+        const render = {
+        // returns an order element;
+            order: function(tradeId, type, product, price, currency){
+                let card = document.createElement('div'), currencySymbol;
+                card.classList.add('order', 'grid', 'grid-2')
+                currency === 'INR' ? currencySymbol = '₹' : currencySymbol = '$'; 
+                card.innerHTML = `<div class="details">
+                            <h3>${type}</h3>
+                            ${product} worth ${currencySymbol}${price}
+                            <h5>Trade Id</h5>
+                            <span class="breakable">${tradeId}</span>
+                        </div>
+                        <button id="${tradeId}" class="cancel-order">Cancel</button>`;
+                return card;
+            }
+        }
 
-        <div class="send_crypto_form" id="send_crypto_form_ui"></div>
-      </div>
-    </div>
-    <div class="box bg-lightblue2" id="manage_keys_div">
-      <div class="push-right action-keys-right">
-        <div class="flex messages_div">
-          <ul id="new_flo_keys_ul"></ul>
-        </div>
-        <div class="flex" id="flo_keys_div">
-          <input
-            type="button"
-            class="button bg-purple mg-5"
-            id="new_flo_keys"
-            value="Generate FLO Keys"
-          />
-        </div>
-      </div>
+        //Checks for internet connection status
+            if(!navigator.onLine) 
+                notify('error', 'There seems to be a problem connecting to the internet.', 'fixed')
+            window.addEventListener('offline', () =>{
+                notify('error', 'There seems to be a problem connecting to the internet.', 'fixed')
+            })
+            window.addEventListener('online', () =>{
+                notify('', 'We are back online.')
+            }) 
+            // function required for popups or modals to appear
+            function showPopup(popup, permission){ 
+                let thisPopup = document.getElementById(popup);
+                thisPopup.parentNode.classList.remove('hide');    
+                thisPopup.classList.add('no-transformations');    
+                window.onmousedown = function(event) {
+                    if (event.target == thisPopup.parentNode && permission !== 'no')
+                        hidePopup(popup, permission);
+                }
+            }
 
-      <div class="push-left action-keys-left">
-        <div class="flex flo_gen_keys_div" id="output_div"></div>
-        <div id="d3div" class="flex"></div>
-      </div>
-    </div>
-    <div id="myModal" class="modal">
-      <!-- Modal content -->
-      <div class="modal-content">
-        <span class="close">&times;</span>
-        <div id="modal_msg"></div>
-      </div>
-    </div>
+            // hides the popup or modal 
+            function hidePopup(pop, permission){
+                let popup;
+                typeof pop === 'string' ? popup = document.getElementById(pop) : popup = pop.closest('.popup');
+                if(permission === 'no') return;
+                popup.closest('.popup-container').classList.add('hide');    
+                popup.closest('.popup').classList.remove('no-transformations'); 
+                setTimeout(() => {
+                    clearAllInputs(popup) 
+                    if(popup.querySelector('.btn')){
+                        popup.querySelector('.btn').classList.remove('clip')
+                        popup.querySelector('.loader').classList.remove('animate-loader')
+                        popup.querySelector("button[type='submit']").disabled = true;
+                    }
+                }, 400)
+            if(popup.id === 'deposit_cash_popup'){
+                popup.querySelector('#upiToAddress').classList.add('hide-completely')
+                popup.querySelectorAll('.input').forEach((input) => {
+                input.classList.remove('hide-completely')
+                })
+            }
+            }
+
+            function setAttributes(el, attrs) {
+                for(var key in attrs) {
+                    el.setAttribute(key, attrs[key]);
+                }
+            }
+
+            function clearAllInputs(parent){
+                parent.querySelectorAll("input").forEach((field) => {
+                if(field.getAttribute('type') !== 'radio'){
+                    field.value = '';
+                    if(field.closest('.input'))
+                    {
+                        field.closest('.input').classList.remove('animate-label')
+                    }
+                }
+                else
+                    field.checked = false
+                })
+            }
+
+            //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+            function notify(mode, message, behavior){
+                let banner = document.getElementById('show_message'),
+                    back;
+                if(mode === 'error'){
+                banner.querySelector('#error_icon').classList.remove('hide-completely')
+                banner.querySelector('#done_icon').classList.add('hide-completely')
+                } 
+                else{
+                banner.querySelector('#error_icon').classList.add('hide-completely')
+                banner.querySelector('#done_icon').classList.remove('hide-completely')
+                }
+                    
+                banner.style.background = back;
+                banner.classList.add('no-transformations')
+                banner.classList.remove('hide')
+                banner.querySelector('#notification_text').textContent = message.charAt(0).toUpperCase() + message.slice(1);
+                if(navigator.onLine)
+                notificationSound.play();
+                banner.querySelector('#hide_banner_btn').onclick = function() {
+                    banner.classList.add('hide')
+                    banner.classList.remove('no-transformations')
+                }
+                clearTimeout(currentTimeout)
+                if(behavior === 'fixed') return;
+                currentTimeout = setTimeout(()=>{
+                    banner.classList.add('hide')
+                    banner.classList.remove('no-transformations')
+                }, 4000)
+            }
+            // displays a popup for asking permission. Use this instead of JS confirm
+            let askConfirmation = function(message){
+                return new Promise((resolve, reject) => {
+                    let popup = document.getElementById('confirmation');
+                    showPopup('confirmation')
+                    popup.children[0].textContent = message;
+                    popup.children[1].firstElementChild.onclick = function() {
+                        hidePopup('confirmation')
+                        resolve(false)
+                    }
+                    popup.children[1].children[1].onclick = function() {
+                        hidePopup('confirmation')
+                        resolve(true);
+                    }
+                })
+            }
+            function enableBtn(btn){
+                if(typeof btn === 'string')
+                    btn = document.getElementById(btn);
+                if(btn.disabled)
+                    btn.disabled = false;
+            }
+
+            function disableBtn(btn){
+                if(typeof btn === 'string')
+                    btn = document.getElementById(btn);
+                if(!btn.disabled)
+                    btn.disabled = true;
+            }
+            function btnLoading(btn, option){
+            if(typeof btn === 'string')
+                btn = document.getElementById(btn);
+            if(option === 'start'){
+                btn.children[0].classList.add('clip')
+                btn.children[1].classList.add('animate-loader')
+            }
+            else{
+                btn.children[0].classList.remove('clip')
+                btn.children[1].classList.remove('animate-loader')
+            }
+        }
+
+        // prevents non numerical input on firefox 
+        function preventNonNumericalInput(e) {
+            e = e || window.event;
+            let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which,
+                charStr = String.fromCharCode(charCode);
+
+            if (!charStr.match(/^\d+$/))
+                e.preventDefault();
+        }
+
+        function areInputsEmpty(parent){
+        let allInputs = parent.querySelectorAll(".input input"),
+            allRadios = parent.querySelectorAll("input[type='radio']"),
+            radioStatus, inputStatus, counter = 0;
+        inputStatus = [...allInputs].every(input => input.checkValidity())
+        
+        allRadios.forEach(radio => {
+            if(radio.checked)
+            counter++;
+        })
+        if(counter == allRadios.length/2)
+            radioStatus = true;
+        if(inputStatus && radioStatus)
+            return true
+        else false
+        }
+
+        function formValidation(formElement, e){ 
+        if(formElement.getAttribute('type') === 'number')
+            preventNonNumericalInput(e);
+        let parent = formElement.closest('.popup'), 
+        submitBtn = parent.querySelector("button[type = 'submit']");
+        if(areInputsEmpty(parent))
+            submitBtn.disabled = false;
+        else
+            submitBtn.disabled = true;
+        }
+
+        let allExchangeSections = document.querySelectorAll('.exchange-section'),
+            allExchangeBtns = document.querySelectorAll('.exchange-btn');
+        function showSection(thisBtn, elem){
+            let element = document.getElementById(elem)
+            allExchangeSections.forEach((section) => {
+                section.classList.add('hide-completely')
+            })
+            allExchangeBtns.forEach((btn) => {
+                btn.classList.remove('active')
+            })
+            element.classList.remove('hide-completely')
+            thisBtn.classList.add('active')
+        }
+        // Event delegation when clicked on exchage options
+        window.addEventListener('load', ()=> {
+            document.getElementById('switcher_body').addEventListener('click', (e) => {
+                if(e.target.closest('#buy_crypto_btn'))
+                    showPopup('buy_crypto_popup')
+                if(e.target.closest('#sell_crypto_btn'))
+                    showPopup('sell_crypto_popup')
+                if(e.target.closest('#send_crypto_btn'))
+                    showPopup('send_crypto_popup')
+                if(e.target.closest('#deposit_crypto_btn'))
+                    showPopup('deposit_crypto_popup')
+                if(e.target.closest('#withdraw_crypto_btn'))
+                    showPopup('withdraw_crypto_popup')
+                if(e.target.closest('#deposit_cash_btn'))
+                    showPopup('deposit_cash_popup')
+                if(e.target.closest('#withdraw_cash_btn'))
+                    showPopup('withdraw_cash_popup')
+            })
+            document.getElementById('popup-parent').addEventListener('keyup', (e) => {
+            if(e.target.closest('.input')){
+                let parent = e.target.closest('.input');
+                if(parent.firstElementChild.value !== '')
+                parent.classList.add('animate-label')
+                else 
+                parent.classList.remove('animate-label')
+                formValidation(parent.firstElementChild, e)
+                if(e.key === 'Enter')
+                parent.closest('.popup').querySelector("button[type='submit']").click();
+            }
+            })
+
+            //Sign in behaviour
+            document.getElementById('sign_in_popup').addEventListener('keyup', (e) => {
+            if(e.target.closest('.input')){
+                let parent = e.target.closest('.input');
+                if(parent.firstElementChild.value !== '')
+                parent.classList.add('animate-label')
+                else 
+                parent.classList.remove('animate-label')
+                formValidation(parent.firstElementChild, e)
+                if(e.key === 'Enter')
+                parent.closest('.popup').querySelector("button[type='submit']").click();
+            }
+            })
+
+            document.getElementById('refresh_market_price').addEventListener('click', () => {
+            //Fetch new prices
+            let newBtcPrice, newFloPrice;
+            btnLoading(document.getElementById('refresh_market_price'), 'start')
+            setTimeout(() => {
+                btnLoading(document.getElementById('refresh_market_price'), 'stop')
+                document.getElementById('btc_market_price').textContent = '₹'+ newBtcPrice;
+                document.getElementById('flo_market_price').textContent = '₹'+ newFloPrice;
+            }, 1000)
+            })
+
+            document.getElementById('balance_panel').addEventListener('click', (e) => {
+            if(e.target.closest('#refresh_cash_bal')){
+                refreshBalance('cashInr', e.target.closest('#refresh_cash_bal'))
+            }
+            if(e.target.closest('#refresh_btc_bal')){
+                refreshBalance('cryptoBtc', e.target.closest('#refresh_btc_bal'))
+            }
+            if(e.target.closest('#refresh_flo_bal')){
+                refreshBalance('cryptoFlo', e.target.closest('#refresh_flo_bal'))
+            }
+            })
+            
+        })
+        
+        function sendCrypto(btn){
+        let parentPopup = btn.closest('.popup'),
+            send_crypto_type = document.querySelector("input[name='crypto']:checked").value,
+            utxo_addr_input = parentPopup.querySelector("input[name='senderFloId']").value,
+            utxo_addr_wif_input = parentPopup.querySelector("input[name='senderPrivateKey']").value,
+            receiver_address_input = parentPopup.querySelector("input[name='recieverFloId']").value,
+            receiving_crypto_amount_input = parentPopup.querySelector("input[name='amount']").value;
+        
+        btnLoading(btn, 'start')  
+        
+        if (utxo_addr_input.length < 1) {
+            err_msg = "Empty UTXO Address.";
+            notify(err_msg);
+            throw new Error(err_msg);
+        }
+        if (utxo_addr_wif_input.length < 1) {
+            err_msg = "Empty Private Key.";
+            notify(err_msg);
+            throw new Error(err_msg);
+        }
+        if (receiver_address_input.length < 1) {
+            err_msg = "Empty Receiving Address.";
+            notify(err_msg);
+            throw new Error(err_msg);
+        }
+        if (receiving_crypto_amount_input <= 0) {
+            err_msg = "Empty Sending Amount.";
+            notify(err_msg);
+            throw new Error(err_msg);
+        }
+
+        const RM_TRADE = new localbitcoinplusplus.trade();
+        RM_TRADE.sendTransaction(
+            send_crypto_type,
+            utxo_addr_input,
+            utxo_addr_wif_input,
+            receiver_address_input,
+            receiving_crypto_amount_input,
+            utxo_addr_input,
+            async function(res) {
+            console.log(res);
+            if (typeof res == "object") {
+                try {
+                let resp_obj = JSON.parse(res.txid);
+                let resp_txid = resp_obj.txid.result || resp_obj.txid;
+                let msg = `Transaction Id for your deposited crypto asset: ${resp_txid}`;
+                notify(msg);
+
+                msg = `Signed Raw Tx for your deposited crypto asset: ${res.signedTxHash}`;
+                notify(msg);
+                return true;
+                } catch (error) {
+                console.warn(error);
+                notify(error);
+                }
+            }
+            }
+        );
+
+        setTimeout(() => {
+            btnLoading(btn, 'stop')
+            hidePopup(parentPopup)
+            notify('', 'Crypto sent')
+        }, 1000)
+        }
+
+        function signIn(btn){
+        let parentPopup = btn.closest('.popup');
+        btnLoading(btn, 'start')  
+        
+        //if operation completes{
+            setTimeout(() => {
+            btnLoading(btn, 'stop')
+            hidePopup(parentPopup)
+            notify('', 'Signed In')
+            document.querySelector('main').classList.remove('hide-completely')
+            }, 1000)
+        //}
+        }
+
+        function refreshBalance(type, btn){ 
+        let newBalance ;
+        switch (type){
+            case 'cashInr':
+            //retrive new balance
+            btnLoading(btn, 'start')
+            setTimeout(()=> {
+            btnLoading(btn, 'stop')
+            newBalance = 600000;
+            document.getElementById('user_cash_bal').textContent = '₹'+newBalance;
+            notify('', 'Cash balance updated')
+            },1000)
+            break;
+            case 'cryptoBtc':
+            //retrive new balance
+            btnLoading(btn, 'start')
+            setTimeout(()=> {
+            btnLoading(btn, 'stop')
+            newBalance = 700;
+            document.getElementById('user_btc_bal').textContent = newBalance;
+            notify('', 'Bitcoin balance updated')
+            },1000)
+            break;
+            case 'cryptoFlo':
+            //retrive new balance
+            btnLoading(btn, 'start')
+            setTimeout(()=> {
+            btnLoading(btn, 'stop')
+            newBalance = 1500;
+            document.getElementById('user_flo_bal').textContent = newBalance;
+            notify('', 'FLO balance updated')
+            },1000)
+            break;
+        }
+        }
+
+        function signOut(){
+            askConfirmation('Do you want to sign out?').then((result) => {
+                if(result){
+                    notify('', 'Signed out')
+                    document.querySelector('main').classList.add('hide-completely')
+                    showPopup('sign_in_popup')
+                }
+            })
+        }
+    </script>
 
     <script type="text/javascript">
       //crypto-sha256-hmac.js
@@ -14938,48 +16337,48 @@
         return Math.floor(Math.random(a, b) * multiple);
       }
 
-        function quarantineCoronaElements(str = '') {
-            try {
-                patt = /^[ A-Za-z0-9_@#!./{}\[\]""`',:+-\\]*$/
-                let no_unwanted_chars = patt.test(str);
-                let hasHtml = hasHTMLTags(str);
-                let has_text_script = str.search('script');
-                let has_text_eval = str.search('eval');
-                let has_text_alert = str.search('alert');
+      function quarantineCoronaElements(str = '') {
+        try {
+            patt = /^[ A-Za-z0-9_@#!./{}\[\]""`',:+-\\]*$/
+            let no_unwanted_chars = patt.test(str);
+            let hasHtml = hasHTMLTags(str);
+            let has_text_script = str.search('script');
+            let has_text_eval = str.search('eval');
+            let has_text_alert = str.search('alert');
 
-                if (no_unwanted_chars === true
-                    && hasHtml === -1
-                    && has_text_script === -1
-                    && has_text_eval === -1
-                    && has_text_alert === -1) {
-                    // secure request
-                    str = DOMPurify.sanitize(str);
-                    var sanitized_str = cloneForSanitization(str);
-                    return sanitized_str;
-                } else return true;
+            if (no_unwanted_chars === true
+                && hasHtml === -1
+                && has_text_script === -1
+                && has_text_eval === -1
+                && has_text_alert === -1) {
+                // secure request
+                str = DOMPurify.sanitize(str);
+                var sanitized_str = cloneForSanitization(str);
+                return sanitized_str;
+            } else return true;
 
-            } catch (error) {
-                throw new Error(error)
-            }
+        } catch (error) {
+            throw new Error(error)
         }
+    }
     
-        function hasHTMLTags(str) {
-            if ((str === null) || (str === ''))
-                return false;
-            else
-                str = str.toString();
-            return str.search(/(<([^>]+)>)/ig, '');
-        }
+    function hasHTMLTags(str) {
+        if ((str === null) || (str === ''))
+            return false;
+        else
+            str = str.toString();
+        return str.search(/(<([^>]+)>)/ig, '');
+    }
 
-        // https://www.tutorialspoint.com/how-to-remove-html-tags-from-a-string-in-javascript
-        function replaceHTMLTags(str) {
-            if ((str === null) || (str === ''))
-                return false;
-            else
-                str = str.toString();
-            return str.replace(/(<([^>]+)>)/ig, '');
-        }
-                    
+    // https://www.tutorialspoint.com/how-to-remove-html-tags-from-a-string-in-javascript
+    function replaceHTMLTags(str) {
+        if ((str === null) || (str === ''))
+            return false;
+        else
+            str = str.toString();
+        return str.replace(/(<([^>]+)>)/ig, '');
+    }
+                
       /*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze*/
       function deepFreeze(object) {
         // Retrieve the property names defined on object
@@ -15014,100 +16413,6 @@
           return acc;
         }, []);
       }
-
-      /* Function to load files to db */
-      function readBlob(file_name) {
-        var files = document.getElementById("upload_file_db").files;
-
-        if (!files.length) return "Please select a file!";
-
-        if (typeof file_name !== "string") {
-          let err_msg = "Please provide a valid file name.";
-          showMessage(err_msg);
-          throw new Error(err_msg);
-        }
-
-        var file = files[0];
-        var start = 0;
-        var stop = file.size - 1;
-
-        var reader = new FileReader();
-
-        // If we use onloadend, we need to check the readyState.
-        reader.onloadend = function(evt) {
-          if (evt.target.readyState == FileReader.DONE) {
-            // DONE == 2
-            let data = evt.target.result;
-            let hash = Crypto.SHA256(data);
-            updateinDB("external_files", {
-              filename: file_name,
-              filehash: hash,
-              content: data
-            });
-          }
-        };
-
-        var blob = file.slice(start, stop + 1);
-        reader.readAsBinaryString(blob);
-      }
-
-      function uploadFileToDB() {
-        const d3div = document.getElementById("d3div");
-        const fileUploadDiv = document.createElement("div");
-        const dbFileLabel = document.createElement("label");
-        const dbFileDivText = document.createTextNode("Choose File");
-        dbFileLabel.appendChild(dbFileDivText);
-        dbFileLabel.className += ` button bg-purple mg-5 `;
-        const dbFile = document.createElement("input");
-        dbFile.className += ` hidden `;
-        dbFile.setAttribute("type", "file");
-        dbFile.setAttribute("id", "upload_file_db");
-        const readBytesButtons = document.createElement("input");
-        readBytesButtons.type = "button";
-        readBytesButtons.className += ` button bg-purple mg-5 `;
-        readBytesButtons.setAttribute("id", "uploadFileButton");
-        readBytesButtons.value = "Upload File";
-
-        dbFileLabel.appendChild(dbFile);
-        d3div.appendChild(dbFileLabel);
-        d3div.appendChild(readBytesButtons);
-        d3div.appendChild(fileUploadDiv);
-
-        document.querySelector("#uploadFileButton").addEventListener(
-          "click",
-          function(evt) {
-            if (evt.target.tagName.toLowerCase() == "button") {
-              let fname = prompt("Enter name of this file.");
-              readBlob(fname);
-            }
-          },
-          false
-        );
-      }
-
-      function modalWindow(message) {
-        var modal = document.getElementById("myModal");
-
-        var msg = document.getElementById("modal_msg");
-        msg.innerHTML = message;
-
-        // Get the <span> element that closes the modal
-        var span = document.getElementsByClassName("close")[0];
-
-        // When the user clicks on <span> (x), close the modal
-        span.onclick = function() {
-          modal.style.display = "none";
-        };
-
-        // When the user clicks anywhere outside of the modal, close it
-        window.onclick = function(event) {
-          if (event.target == modal) {
-            modal.style.display = "none";
-          }
-        };
-
-        modal.style.display = "block";
-      }
     </script>
 
     <!-- Wallet Operations (Generate, Sign and Verify) -->
@@ -22416,7 +23721,13 @@
                           let counterTraderAccountAddress = `Please pay the amount to following address: 
                                                     ${resp.msg}`;
                           showMessage(counterTraderAccountAddress);
-                          modalWindow(counterTraderAccountAddress);                          
+                          const withdrawCashButton = document.getElementById('withdrawAssetButton')
+                            let messageShow = withdrawCashButton.querySelector('#upiToAddress')
+                            messageShow.textContent = counterTraderAccountAddress;
+                            messageShow.classList.remove('hide-completely')
+                            withdrawCashButton.querySelectorAll('.input').forEach((input) => {
+                                input.classList.add('hide-completely')
+                            })                          
                         }
                       });
                     }
@@ -22449,10 +23760,16 @@
                           typeof user == "object" &&
                           user.myLocalFLOAddress == resp.data.trader_flo_address
                         ) {
-                          let counterTraderAccountAddress = `Please pay ${resp.data.currency} ${resp.data.depositing_amount} to following UPI ID: 
+                            let counterTraderAccountAddress = `Please pay ${resp.data.currency} ${resp.data.depositing_amount} to following UPI ID: 
                                                     ${resp.msg}`;
-                          showMessage(counterTraderAccountAddress);
-                          modalWindow(counterTraderAccountAddress);
+                            //showMessage(counterTraderAccountAddress);
+                            const depositAssetButton = document.getElementById('depositAssetButton')
+                            let messageShow = depositAssetButton.querySelector('#upiToAddress')
+                            messageShow.textContent = counterTraderAccountAddress;
+                            messageShow.classList.remove('hide-completely')
+                            depositAssetButton.querySelectorAll('.input').forEach((input) => {
+                                input.classList.add('hide-completely')
+                            })
                         }
                       });
                     }
@@ -23541,16 +24858,14 @@
                         if(typeof res_obj.params[0]=="object") {
                             const server_live_trading_prices = res_obj.params[0];
                             if(server_live_trading_prices.receiver_flo_address===localbitcoinplusplus.wallets.my_local_flo_address) {
-                                console.log(server_live_trading_prices);
-
-                                const trading_prices_div = document.getElementById('trading_prices_div')
-                                let t = ``;
-                                
+                                console.log(server_live_trading_prices);            
                                 for(commodity of Object.values(server_live_trading_prices.live_trading_prices)) {
-                                    t += `<div> 1 ${commodity.crypto_code}<=>${commodity.currency_code} ${commodity.rate} &nbsp  </div>`;
+                                    if(commodity.crypto_code==="BTC") {
+                                        document.getElementById('btc_market_price').innerText = `${commodity.currency_code} ${commodity.rate} &nbsp`;
+                                    } else if(commodity.crypto_code==="FLO") {
+                                        document.getElementById('flo_market_price').innerText = `${commodity.currency_code} ${commodity.rate} &nbsp`;
+                                    }
                                 }
-
-                                trading_prices_div.innerHTML = t;
                             }
                         } else {
                             showMessage('Failed to fetch live trading prices.')
@@ -24008,7 +25323,13 @@
                           let counterTraderAccountAddress = `<p><strong>Please pay the amount to following address:</strong></p>
                                                     <p>${resp.msg}</p>`;
                           showMessage(counterTraderAccountAddress);
-                          modalWindow(counterTraderAccountAddress);
+                          const withdrawCashButton = document.getElementById('withdrawAssetButton')
+                            let messageShow = withdrawCashButton.querySelector('#upiToAddress')
+                            messageShow.textContent = counterTraderAccountAddress;
+                            messageShow.classList.remove('hide-completely')
+                            withdrawCashButton.querySelectorAll('.input').forEach((input) => {
+                                input.classList.add('hide-completely')
+                            })
                         }
                       });
                     }
@@ -24037,18 +25358,24 @@
                       )
                     ) {
 
-                      readDB("localbitcoinUser", "00-01").then(function(user) {
+                    readDB("localbitcoinUser", "00-01").then(function(user) {
                         if (
                           typeof user == "object" &&
                           (user.myLocalFLOAddress == resp.data.trader_flo_address 
                           || user.myLocalFLOAddress == resp.receiver_flo_address)
                         ) {
                             let counterTraderAccountAddress = `Please pay ${resp.data.currency} ${resp.data.depositing_amount} to following UPI ID: 
-                                                    ${resp.msg}`;
-                          showMessage(counterTraderAccountAddress);
-                          modalWindow(counterTraderAccountAddress);
+                                ${resp.msg}`;
+                            const depositAssetButton = document.getElementById('depositAssetButton');
+                            let messageShow = depositAssetButton.querySelector('#upiToAddress');
+                            messageShow.textContent = counterTraderAccountAddress;
+                            messageShow.classList.remove('hide-completely')
+                            depositAssetButton.querySelectorAll('.input').forEach((input) => {
+                                input.classList.add('hide-completely')
+                            });
                         }
-                      });
+                    });  
+
                     }
                   }
                   break;
@@ -25524,20 +26851,6 @@
                               false
                             );
                           }
-                          backup_server_db_instance
-                            .backup_readDB("localbitcoinUser", "00-01")
-                            .then(function(user) {
-                              if (
-                                typeof user == "object" &&
-                                user.myLocalFLOAddress ==
-                                  resp.data.trader_flo_address
-                              ) {
-                                let counterTraderAccountAddress = `<p><strong>Please pay the amount to following address:</strong></p>
-                                                        <p>${resp.msg}</p>`;
-                                showMessage(counterTraderAccountAddress);
-                                modalWindow(counterTraderAccountAddress);
-                              }
-                            });
                         }
                       }
                     }
@@ -29168,9 +30481,6 @@
             // Send Tx UI
             buildBroadcastTxUI();
 
-            // Upload files to DB
-            uploadFileToDB();
-
             if (
               localbitcoinplusplus.master_configurations.supernodesPubKeys.includes(
                 MY_LOCAL_FLO_PUBLIC_KEY
@@ -29248,10 +30558,11 @@
           typeof sellOrders == "object"
             ? Promise.resolve(sellOrders)
             : readDBbyIndex("sellOrders", "trader_flo_address", myFloId);
-        let my_trades_div = document.getElementById("my_trades_div");
+        let my_trades_div = document.getElementById("orders_container");
+        my_trades_div.innerHTML = '';
         const RM_TRADE = new localbitcoinplusplus.trade();
-        let t = `<span class='ptext'>Your Trade Orders: </span>`;
-        t += `<ul>`;
+        let frag = document.createDocumentFragment();
+        let t = ``;
         Promise.all([myBuyOrders, mySellOrders]).then(myOrders => {
           myOrders[0].concat(myOrders[1]).map(myOrdersData => {
             const trade_id = myOrdersData.id;
@@ -29261,28 +30572,36 @@
             const product = myOrdersData.product;
             const RM_TRADE = new localbitcoinplusplus.trade();
 
-            t += `<li>Trade Id: ${trade_id}</li>
-                        <li>Type Of Order: ${order_type}</li>
-                        <li>Product: ${product}</li>
-                        <li>Price: ${price}</li>
-                        <li>Currency: ${currency}</li>
-                        <li><button class='button bg-red fs-16 mg-5 CANCEL_TRADE' 
-                        id='${trade_id}-${flo_id}-${order_type}'> Cancel Order</button></li>
-                        <li><hr></li>
-                    `;
+            frag.append(render.order(trade_id, order_type, product, price, currency))
           });
-          t += `</ul>`;
           my_trades_div.innerHTML = t;
 
+          if(frag.children.length === 0)
+                my_trades_div.innerHTML = '<h4>No trade orders yet.</h4>'
+                my_trades_div.append(frag);
+
           var delclassname = document.getElementsByClassName("CANCEL_TRADE");
 
           Array.from(delclassname).forEach(function(element) {
-            element.addEventListener("click", function() {
-              let cancel_td = this.id;
-              let trade_opts = cancel_td.split("-");
-              RM_TRADE.cancelTrade(trade_opts[0], trade_opts[1], trade_opts[2]);
+            element.addEventListener("click", function(e) {
+                let container = document.getElementById('orders_container');
+                if(e.target.closest('.cancel-order'))
+                    askConfirmation('Are you sure to cancel this trade order?').then((result) => {
+                        if(result){
+                            let cancel_td = this.id;
+                            let trade_opts = cancel_td.split("-");
+                            RM_TRADE.cancelTrade(trade_opts[0], trade_opts[1], trade_opts[2]);  
+  
+                            let tradeId = e.target.closest('.cancel-order').id;
+                            e.target.closest('.order').remove();
+                            notify('', `Order id: ${tradeId} cancelled.`)
+                            if(container.children.length === 0)
+                                container.innerHTML = '<h4>No trade orders yet.</h4>'
+                        }
+                    })  
             });
           });
+
         });
       };
     </script>
@@ -29334,131 +30653,71 @@
         const RM_RPC = new localbitcoinplusplus.rpc();
         const RM_TRADE = new localbitcoinplusplus.trade();
 
-        // RESET KEYS
-        const reset_flo_keys_div = document.getElementById("flo_keys_div");
-        const reset_flo_keys_btn = document.createElement("button");
-        reset_flo_keys_btn.className += ` button bg-purple mg-5 `;
-        const reset_flo_keys_btn_text = document.createTextNode(
-          `Reset FLO Keys`
-        );
-        reset_flo_keys_btn.appendChild(reset_flo_keys_btn_text);
-        reset_flo_keys_div.appendChild(reset_flo_keys_btn);
+        const selectListCryptoBuy = document.getElementById('selectListCryptoBuy');
+        get_crypto_svg_selection_html('buy_assets_type', selectListCryptoBuy);
 
-        reset_flo_keys_btn.onclick = function() {
-          if (
-            confirm(
-              `This will reset your old keys along with data associated with it. Are you sure you want to continue?`
-            )
-          ) {
-            localbitcoinplusplus.actions
-              .reset_flo_keys()
-              .then(reset_success => {
-                if (reset_success) {
-                  showMessage("INFO: FLO keys have been reset successfully.");
-                } else {
-                  showMessage(`INFO: Failed to reset FLO keys.`);
-                }
-              });
-          }
-        };
+        const selectListCryptoSell = document.getElementById('selectListCryptoSell');
+        get_crypto_svg_selection_html('sell_assets_type', selectListCryptoSell);
 
-        //localbitcoinuserdiv
-        document.getElementById(
-          "localbitcoinuserdiv"
-        ).innerHTML = `${idbData.myLocalFLOAddress}`;
+        const selectListFiatBuy = document.getElementById('selectListFiatBuy');
+        get_fiat_svg_selection_html('select_fiat_buy', selectListFiatBuy);
 
-        // TRADE BOX
-        const tradebox = document.getElementById("tradebox");
-        const trade_select_div = document.createElement("div");
-        trade_select_div.className += ` custom-select `;
-        const trade_buttons_div = document.createElement("div");
-        trade_buttons_div.className += ` center `;
+        const selectListFiatSell = document.getElementById('selectListFiatSell');
+        get_fiat_svg_selection_html('select_fiat_buy', selectListFiatSell);
 
-        const selectListCrypto = document.createElement("select");
-        selectListCrypto.id = "selectListCrypto";
-        trade_select_div.appendChild(selectListCrypto);
-
-        const selectListFiat = document.createElement("select");
-        selectListFiat.id = "selectListFiat";
-        trade_select_div.appendChild(selectListFiat);
-
-        const selectListAmount = document.createElement("select");
-        selectListAmount.id = "selectListAmount";
-        trade_select_div.appendChild(selectListAmount);
-
-        const trade_buy_button = document.createElement("button");
-        trade_buy_button.className += ` button bg-transparent fs-16 mg-5`;
-        const trade_buy_button_text = document.createTextNode("BUY");
-        trade_buy_button.appendChild(trade_buy_button_text);
-
-        const trade_sell_button = document.createElement("button");
-        trade_sell_button.className += ` button bg-transparent fs-16 mg-5`;
-        const trade_sell_button_text = document.createTextNode("SELL");
-        trade_sell_button.appendChild(trade_sell_button_text);
-
-        trade_buttons_div.appendChild(trade_buy_button);
-        trade_buttons_div.appendChild(trade_sell_button);
-        tradebox.appendChild(trade_select_div);
-        tradebox.appendChild(trade_buttons_div);
-
-        localbitcoinplusplus.master_configurations.tradableAsset1.map(
-          cryptos => {
-            let option = document.createElement("option");
-            option.value = cryptos;
-            option.text = cryptos;
-            selectListCrypto.appendChild(option);
-          }
-        );
-        localbitcoinplusplus.master_configurations.tradableAsset2.map(fiat => {
-          let option = document.createElement("option");
-          option.value = fiat;
-          option.text = fiat;
-          selectListFiat.appendChild(option);
-        });
-        localbitcoinplusplus.master_configurations.validTradingAmount.map(
-          amount => {
-            let option = document.createElement("option");
-            option.value = amount;
-            option.text = amount;
-            selectListAmount.appendChild(option);
-          }
-        );
+        const selectTradingAmountBuy = document.getElementById('selectListTradingAmountBuy');
+        get_trading_amount_html('trading_amount_buy', selectTradingAmountBuy);
 
+        const selectTradingAmountSell = document.getElementById('selectListTradingAmountSell');
+        get_trading_amount_html('trading_amount_buy', selectTradingAmountSell);
+        
+        const trade_buy_button = document.getElementById('trade_buy_button')
+        const trade_sell_button = document.getElementById('trade_sell_button')
+        
         trade_buy_button.onclick = function(event) {
           if (
-            typeof idbData.myLocalFLOAddress !== "string" ||
-            idbData.myLocalFLOAddress.trim() == ""
+            typeof localbitcoinplusplus.wallets.my_local_flo_address !== "string" ||
+            localbitcoinplusplus.wallets.my_local_flo_address.trim() == ""
           ) {
-            let err_msg =
-              "You must have a BTC address to receive Bitcoin. No Bitcoin address found in database.";
+            let err_msg = "You are not logged in. Failed to determine your id.";
             showMessage(err_msg);
             throw new Error(err_msg);
           }
+          let parentPopup = this.closest('.popup'),
+              selectedCrypto = parentPopup.querySelector("input[name='crypto']:checked").value,
+              selectedCurrency = parentPopup.querySelector("input[name='currency']:checked").value,
+              buyWorth = parentPopup.querySelector('.input input').value;
+
           RM_TRADE.place_order(
             "buy",
-            idbData.myLocalFLOAddress,
-            selectListCrypto.value,
-            selectListFiat.value,
-            parseFloat(selectListAmount.value)
+            localbitcoinplusplus.wallets.my_local_flo_address,
+            selectedCrypto,
+            selectedCurrency,
+            parseFloat(buyWorth)
           ).then(buytrade => doSend(buytrade));
         };
 
         trade_sell_button.onclick = function(event) {
           if (
-            typeof idbData.myLocalFLOAddress == undefined ||
-            idbData.myLocalFLOAddress.trim() == ""
+            typeof localbitcoinplusplus.wallets.my_local_flo_address == undefined ||
+            localbitcoinplusplus.wallets.my_local_flo_address.trim() == ""
           ) {
             let err_msg =
               "You must have a FLO address to trade. No such address found in database.";
             showMessage(err_msg);
             throw new Error(err_msg);
           }
+          let parentPopup = this.closest('.popup'),
+              selectedCrypto = parentPopup.querySelector("input[name='crypto']:checked").value,
+              selectedCurrency = parentPopup.querySelector("input[name='currency']:checked").value,
+              sellWorth = parentPopup.querySelector('.input input').value;
+
           RM_TRADE.place_order(
             "sell",
-            idbData.myLocalFLOAddress,
-            selectListCrypto.value,
-            selectListFiat.value,
-            parseFloat(selectListAmount.value)
+            localbitcoinplusplus.wallets.my_local_flo_address,
+            selectedCrypto,
+            selectedCurrency,
+            parseFloat(sellWorth)
           ).then(selltrade => doSend(selltrade));
         };
       };
@@ -29467,77 +30726,26 @@
     <!-- Deposit/Withdraw Crypto -->
     <script>
       const depositWithdrawAsset = function(userFLOaddress="") {
+
+        let parentPopup = this.closest('.popup')
+
         const RM_TRADE = new localbitcoinplusplus.trade();
         const RM_RPC = new localbitcoinplusplus.rpc();
 
-        let asset_box = document.getElementById("asset_box");
-        let asset_button_box = document.getElementById("asset_button_box");
+        let deposit_crypto_div = document.getElementById("deposit_crypto_div");
+        let withdraw_crypto_div = document.getElementById("withdraw_crypto_div");
+        let depositAssetButton = document.getElementById("depositAssetButton");
+        let withdrawAssetButton = document.getElementById("withdrawAssetButton");
         let err_msg = "";
 
-        // Create a select input for asset type
-        let assetTypeInput = document.createElement("select");
-        assetTypeInput.id = "select_assets_type";
-        asset_box.appendChild(assetTypeInput);
-        if (
-          typeof localbitcoinplusplus.master_configurations.tradableAsset1 !==
-            "undefined") {
-          let assetTypeSelectArray1 = JSON.parse(
-            JSON.stringify(
-              localbitcoinplusplus.master_configurations.tradableAsset1
-            )
-          );
-          let assetTypeSelectArray = assetTypeSelectArray1
-            .filter((item, pos, finalArray) => finalArray.indexOf(item) == pos);
-          assetTypeSelectArray.unshift("Select Crypto");
-          for (var i = 0; i < assetTypeSelectArray.length; i++) {
-            var option = document.createElement("option");
-            option.value = assetTypeSelectArray[i];
-            option.text = assetTypeSelectArray[i];
-            assetTypeInput.appendChild(option);
-          }
-        }
-
-        let tradeAmountSelect = document.createElement("input");
-        tradeAmountSelect.setAttribute("type", "text");
-        tradeAmountSelect.setAttribute("placeholder", "Specify Asset Amount");
-        tradeAmountSelect.id = "trade_amount_select";
-        asset_box.appendChild(tradeAmountSelect);
-
-        // let currencySelect = document.createElement("select");
-        // currencySelect.id = `withdraw_fiat_currency`;
-        // asset_box.appendChild(currencySelect);
-        // if (
-        //   typeof localbitcoinplusplus.master_configurations.tradableAsset2 !==
-        //     "undefined" &&
-        //   localbitcoinplusplus.master_configurations.tradableAsset2.length > 0
-        // ) {
-        //   let fiatList = localbitcoinplusplus.master_configurations.tradableAsset2;
-        //   let fiatListArray = JSON.parse(JSON.stringify(fiatList));
-        //   fiatListArray.unshift("Select Fiat Currency (for exchange rates)");
-        //   for (var i = 0; i < fiatListArray.length; i++) {
-        //     var option = document.createElement("option");
-        //     option.value = fiatListArray[i];
-        //     option.text = fiatListArray[i];
-        //     currencySelect.appendChild(option);
-        //   }
-        // }
-
-        // Create a deposit and withdraw button
-        let depositAssetButton = document.createElement("button");
-        depositAssetButton.className += ` button bg-transparent fs-16 mg-5 `;
-        let depositAssetButtonText = document.createTextNode("Deposit");
-        depositAssetButton.appendChild(depositAssetButtonText);
-        let withdrawAssetButton = document.createElement("button");
-        withdrawAssetButton.className += ` button bg-transparent fs-16 mg-5 `;
-        let withdrawAssetButtonText = document.createTextNode("Withdraw");
-        withdrawAssetButton.appendChild(withdrawAssetButtonText);
-        asset_button_box.appendChild(depositAssetButton);
-        asset_button_box.appendChild(withdrawAssetButton);
+        get_crypto_svg_selection_html('deposit_assets_type', deposit_crypto_div);        
+        get_crypto_svg_selection_html('withdraw_assets_type', withdraw_crypto_div);        
 
         depositAssetButton.addEventListener("click", function() {
-          let asset_type = assetTypeInput.value;
+          let asset_type = document.querySelector("input[name='crypto']:checked").value;
+          tradeAmountSelect = document.getElementById('trade_amount_select');
           let tradeAmount = helper_functions.truncateDecimals(tradeAmountSelect.value);
-          //let fiatCurrency = currencySelect.value;
+       
           let fiatCurrency = "INR";
           if (
             typeof userFLOaddress == undefined ||
@@ -29560,6 +30768,7 @@
               fiatCurrency,
               userFLOaddress
             );
+          
           } else {
             err_msg = "Error while depositing your address.";
             showMessage(err_msg);
@@ -29568,18 +30777,17 @@
         });
 
         withdrawAssetButton.addEventListener("click", function(params) {
-          let asset_type = assetTypeInput.value;
-          let receivinAddress = prompt(
-            `Please enter your ${asset_type} receiving address.`
-          );
+          let parentPopup = this.closest('.popup');  
+          let asset_type = document.querySelector("input[name='crypto']:checked").value;
+          let receivinAddress = document.getElementById('withdraw_recving_addr')
+          let withdraw_amount= document.getElementById('crypto_withdraw_amount')
           if (receivinAddress == null || receivinAddress.trim == "") {
             err_msg =`You must specify a valid ${asset_type} address to continue.`;
             showMessage(err_msg);
             throw new Error(err_msg);
           }
 
-          let tradeAmount = helper_functions.truncateDecimals(tradeAmountSelect.value);
-          //let fiatCurrency = currencySelect.value;
+          let tradeAmount = helper_functions.truncateDecimals(withdraw_amount.value);
           let fiatCurrency = "INR";
 
           if (
@@ -29590,6 +30798,7 @@
             showMessage(err_msg);
             throw new Error(err_msg);
           }
+
           if (
             typeof localbitcoinplusplus.master_configurations.tradableAsset1 !==
               "undefined" &&
@@ -29611,14 +30820,10 @@
         });
 
         // NOTIFY DEPOSITED CRYPTO CONFIRMATION
-        const refresh_crypto_status_btn = document.createElement("button");
-        refresh_crypto_status_btn.className += ` button bg-transparent fs-16 mg-5 `;
-        const refresh_crypto_status_btn_text = document.createTextNode(
-          "Confirm Deposit"
-        );
-        refresh_crypto_status_btn.appendChild(refresh_crypto_status_btn_text);
-        asset_button_box.appendChild(refresh_crypto_status_btn);
+        const refresh_crypto_status_btn = document.getElementById("cnf_crypto_deposit");
         refresh_crypto_status_btn.addEventListener("click", function() {
+          let deposited = confirm('Have you sent cryptos to Exchange? Continue only after you have sent required cryptos to exchange.');
+          if(deposited!==true) return;  
           RM_RPC.send_rpc
             .call(this, "refresh_deposit_status_request", {
               receiver_flo_address:
@@ -29637,150 +30842,73 @@
         const RM_TRADE = new localbitcoinplusplus.trade();
         const RM_RPC = new localbitcoinplusplus.rpc();
 
-        let asset_box = document.getElementById("asset_fiat_box");
-        let asset_button_box = document.getElementById("asset_fiat_button_box");
-        let err_msg = "";
-
-        // Create a select input for asset type
-        let assetTypeInput = document.createElement("select");
-        assetTypeInput.id = "select_currency_type";
-        asset_box.appendChild(assetTypeInput);
-        if (
-          typeof localbitcoinplusplus.master_configurations.tradableAsset2 !==
-          "undefined"
-        ) {
-          let assetTypeSelectArray2 = JSON.parse(
-            JSON.stringify(
-              localbitcoinplusplus.master_configurations.tradableAsset2
-            )
-          );
-          let assetTypeSelectArray = assetTypeSelectArray2.filter(
-            (item, pos, finalArray) => finalArray.indexOf(item) == pos
-          );
-          assetTypeSelectArray.unshift("Select Currency");
-          for (var i = 0; i < assetTypeSelectArray.length; i++) {
-            var option = document.createElement("option");
-            option.value = assetTypeSelectArray[i];
-            option.text = assetTypeSelectArray[i];
-            assetTypeInput.appendChild(option);
-          }
-        }
-
-        // Create a select input for trade amount
-        // let tradeAmountSelect = document.createElement("select");
-        // tradeAmountSelect.id = "trade_amount_select";
-        // asset_box.appendChild(tradeAmountSelect);
-        // if (
-        //   typeof localbitcoinplusplus.master_configurations
-        //     .validTradingAmount !== "undefined" &&
-        //   localbitcoinplusplus.master_configurations.validTradingAmount.length >
-        //     0
-        // ) {
-        //   let tradeAmountSelectArray = JSON.parse(
-        //     JSON.stringify(
-        //       localbitcoinplusplus.master_configurations.validTradingAmount
-        //     )
-        //   );
-        //   tradeAmountSelectArray.unshift("Select Asset Amount");
-        //   for (var i = 0; i < tradeAmountSelectArray.length; i++) {
-        //     var option = document.createElement("option");
-        //     option.value = tradeAmountSelectArray[i];
-        //     option.text = tradeAmountSelectArray[i];
-        //     tradeAmountSelect.appendChild(option);
-        //   }
-        // }
-
-        let tradeAmountSelect = document.createElement('input');
-        tradeAmountSelect.setAttribute("type", "text");
-        tradeAmountSelect.setAttribute("placeholder", "Specify Asset Amount");
-        tradeAmountSelect.id = "trade_amount_select";
-        asset_box.appendChild(tradeAmountSelect);
-
-        // let currencySelect = document.createElement('select');
-        // currencySelect.id = `withdraw_fiat_currency`;
-        // asset_box.appendChild(currencySelect);
-        // if (typeof localbitcoinplusplus.master_configurations.tradableAsset2 !== 'undefined' &&
-        //     localbitcoinplusplus.master_configurations.tradableAsset2.length > 0) {
-        //     let fiatList = localbitcoinplusplus.master_configurations.tradableAsset2
-        //         .filter(asset => !localbitcoinplusplus.master_configurations.tradableAsset1.includes(asset));
-        //     let fiatListArray = JSON.parse(JSON.stringify(fiatList));
-        //     fiatListArray.unshift("Select Fiat Currency");
-        //     for (var i = 0; i < fiatListArray.length; i++) {
-        //         var option = document.createElement("option");
-        //         option.value = fiatListArray[i];
-        //         option.text = fiatListArray[i];
-        //         currencySelect.appendChild(option);
-        //     }
-        // }
-
-        // Create a deposit and withdraw button
-        let depositAssetButton = document.createElement("button");
-        depositAssetButton.className += ` button bg-transparent fs-16 mg-5 `;
-        let depositAssetButtonText = document.createTextNode("Deposit Cash");
-        depositAssetButton.appendChild(depositAssetButtonText);
-        
-        let withdrawAssetButton = document.createElement('button');
-        withdrawAssetButton.className += ` button bg-transparent fs-16 mg-5 `;
-        let withdrawAssetButtonText = document.createTextNode('Withdraw Cash');
-        withdrawAssetButton.appendChild(withdrawAssetButtonText);
-        
-        asset_button_box.appendChild(depositAssetButton);
-        asset_button_box.appendChild(withdrawAssetButton);
+        const depositAssetButton = document.getElementById('depositAssetButton')
+        let user_deposited_cash = 0; // false  
 
         depositAssetButton.addEventListener("click", function() {
-          const user_upi = prompt(
-            "Please provide the UPI id you are paying from!"
-          );
-          if (typeof user_upi !== "string" || user_upi.length < 1) {
-            err_msg = "Invalid or empty UPI id.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-          let asset_type = assetTypeInput.value;
-          let tradeAmount = Number(tradeAmountSelect.value);
-          let fiatCurrency = assetTypeInput.value;
-          if (
-            typeof userFLOaddress == undefined ||
-            userFLOaddress.trim().length < 1
-          ) {
-            err_msg = "Invalid or empty user FLO address.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-          if (
-            typeof localbitcoinplusplus.master_configurations.tradableAsset2 !==
-              "undefined" &&
-            localbitcoinplusplus.master_configurations.tradableAsset2.includes(
-              asset_type
-            )
-          ) {
-            RM_TRADE.depositCash(
-              tradeAmount,
-              fiatCurrency,
-              userFLOaddress,
-              user_upi
-            );
-          } else {
-            err_msg = "Error:  Deposit of Cash failed.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
+            user_deposited_cash === 0 ? user_deposited_cash = 1: user_deposited_cash = 0;
+            if(user_deposited_cash == 1){
+                this.firstElementChild.textContent = 'done';
+                let parentPopup = this.closest('.popup'),
+                user_upi = parentPopup.querySelector("input[name='upiAddr']").value,
+                tradeAmount = parentPopup.querySelector("input[name='amount']").value;
+        
+                if (typeof user_upi !== "string" || user_upi.length < 1) {
+                    err_msg = "Invalid or empty UPI id.";
+                    showMessage(err_msg);
+                    throw new Error(err_msg);
+                }
+                tradeAmount = Number(tradeAmount);
+                let asset_type = "INR";
+                let fiatCurrency = "INR";
+                if (
+                    typeof userFLOaddress == undefined ||
+                    userFLOaddress.trim().length < 1
+                ) {
+                    err_msg = "Invalid or empty user FLO address.";
+                    showMessage(err_msg);
+                    throw new Error(err_msg);
+                }
+                if (
+                    typeof localbitcoinplusplus.master_configurations.tradableAsset2 !==
+                    "undefined" &&
+                    localbitcoinplusplus.master_configurations.tradableAsset2.includes(
+                    asset_type
+                    )
+                ) {
+                    RM_TRADE.depositCash(
+                    tradeAmount,
+                    fiatCurrency,
+                    userFLOaddress,
+                    user_upi
+                    );
+                } else {
+                    err_msg = "Error:  Deposit of Cash failed.";
+                    showMessage(err_msg);
+                    throw new Error(err_msg);
+                }
+                
+            } else {
+                this.firstElementChild.textContent = 'deposit';
+                hidePopup('deposit_cash_popup')
+                return;
+            }
+          
         });
 
-
         // Withdraw Cash function
         withdrawAssetButton.addEventListener("click", function(params) {
-          let receivinAddress = prompt("Please enter a valid UPI id.");
+          let parentPopup = this.closest('.popup')
+          let receivinAddress = parentPopup.querySelector("input[name='upiAddr']").value;
           if (receivinAddress == null || receivinAddress.trim == "") {
             err_msg = "You must specify your valid UPI Id to withdraw cash.";
             showMessage(err_msg);
             throw new Error(err_msg);
           }
 
-          const asset_type = assetTypeInput.value;
-          const tradeAmount = parseFloat(tradeAmountSelect.value);
-          const fiatCurrency = asset_type;
-          //const fiatCurrency = currencySelect.value;
+          const asset_type = "INR";
+          const tradeAmount = parseFloat(parentPopup.querySelector("input[name='amount']").value);
+          const fiatCurrency = "INR";
 
           if (
             typeof userFLOaddress == undefined ||
@@ -29795,14 +30923,7 @@
               asset_type
             )
           ) {
-            if (
-            //   typeof localbitcoinplusplus.master_configurations
-            //     .validTradingAmount !== "undefined" &&
-            //   !localbitcoinplusplus.master_configurations.validTradingAmount.includes(
-            //     tradeAmount
-            //   )
-              tradeAmount<=0
-            ) {
+            if (tradeAmount<=0) {
               err_msg = "Invalid Fiat Value.";
               showMessage(err_msg);
               throw new Error(err_msg);
@@ -29814,6 +30935,7 @@
             localbitcoinplusplus.master_configurations.tradableAsset2
               .includes(asset_type)
           ) {
+            btnLoading(this, 'start');             
             RM_TRADE.withdrawAsset(
               asset_type,
               tradeAmount,
@@ -29821,6 +30943,7 @@
               userFLOaddress,
               fiatCurrency
             );
+            
           } else {
             err_msg = "Error: Withdraw cash failed. Invalid currency specified.";
             showMessage(err_msg);
@@ -29831,184 +30954,113 @@
       }
     </script>
 
-    <!-- Broadcast Tx UI -->
+    <!-- Create SVG Radios  -->
     <script>
-      function buildBroadcastTxUI() {
-        const broadcast_tx_ui = document.getElementById(
-          "send_crypto_select_div"
-        );
-        const broadcast_tx_ui_form = document.getElementById(
-          "send_crypto_form_ui"
-        );
-
-        const send_crypto_type = document.createElement("select");
-        send_crypto_type.id = "send_crypto_type";
-        broadcast_tx_ui.appendChild(send_crypto_type);
-
-        if (
-          typeof localbitcoinplusplus.master_configurations.tradableAsset1 !==
-          "undefined"
-        ) {
-          let sendCryptoArray = JSON.parse(
-            JSON.stringify(
-              localbitcoinplusplus.master_configurations.tradableAsset1
-            )
-          );
-          sendCryptoArray.unshift("Select Crypto");
-          for (var i = 0; i < sendCryptoArray.length; i++) {
-            var option = document.createElement("option");
-            option.value = sendCryptoArray[i];
-            option.text = sendCryptoArray[i];
-            send_crypto_type.appendChild(option);
-          }
+        function get_crypto_svg_selection_html(radio_id='', parenthtml='') {
+            if (
+                typeof localbitcoinplusplus.master_configurations.tradableAsset1 !==
+                "undefined"
+            ) {
+                let sendCryptoArray = JSON.parse(
+                    JSON.stringify(
+                    localbitcoinplusplus.master_configurations.tradableAsset1
+                    )
+                );
+                let selectCryptoHtml = ``;
+                for (var i = 0; i < sendCryptoArray.length; i++) {
+                    selectCryptoHtml += `<label class="select-crypto">`;
+                    selectCryptoHtml += `<input name="crypto" value="${sendCryptoArray[i]}" 
+                        type="radio" id="${radio_id}_${sendCryptoArray[i]}">`;
+                    if(sendCryptoArray[i]=="BTC" || sendCryptoArray[i]=="BTC_TEST") {
+                        selectCryptoHtml += `<svg viewBox="0 0 30.61 40.52" class="icon btc">
+                            <title>Bitcoin icon</title>
+                            <path d="M30.53,16.29c0.64-4.26-2.61-6.55-7.04-8.07l1.44-5.77l-3.51-0.88l-1.4,5.62c-0.92-0.23-1.87-0.45-2.81-0.66
+                            l1.41-5.65L15.11,0l-1.44,5.77c-0.76-0.17-1.51-0.35-2.24-0.53l0-0.02L6.59,4.01L5.66,7.76c0,0,2.61,0.6,2.55,0.63
+                            c1.42,0.36,1.68,1.3,1.64,2.04l-1.64,6.57c0.1,0.02,0.23,0.06,0.36,0.12c-0.12-0.03-0.24-0.06-0.37-0.09l-2.3,9.2
+                            c-0.17,0.43-0.61,1.08-1.61,0.83c0.04,0.05-2.55-0.64-2.55-0.64L0,30.45l4.57,1.14c0.85,0.21,1.68,0.44,2.5,0.65l-1.45,5.83
+                            l3.51,0.88l1.44-5.77c0.96,0.26,1.89,0.5,2.8,0.73l-1.43,5.74l3.51,0.88l1.45-5.82c5.99,1.13,10.49,0.68,12.38-4.74
+                            c1.53-4.36-0.08-6.88-3.23-8.52C28.34,20.92,30.07,19.41,30.53,16.29L30.53,16.29z M22.51,27.54c-1.08,4.36-8.43,2-10.81,1.41
+                            l1.93-7.73C16.01,21.82,23.65,22.99,22.51,27.54L22.51,27.54z M23.6,16.23c-0.99,3.97-7.1,1.95-9.08,1.46l1.75-7.01
+                            C18.25,11.17,24.63,12.09,23.6,16.23z"/>
+                        </svg>`
+                    } else if(sendCryptoArray[i]=="FLO" || sendCryptoArray[i]=="FLO_TEST") {
+                        selectCryptoHtml += `<svg class="icon flo" viewBox="0 0 45.6 47.07">
+                            <title>FLO coin icon</title>
+                            <path d="M61.4,58.86A12.31,12.31,0,0,0,68.81,55a15.45,15.45,0,0,0,4-8.52c-11-.63-12.36,1-13.71,1.68-1.19.61-5.33,4.56-5.33,
+                                4.56s3.07-3.14,3.2-9.94a19.94,19.94,0,0,0-2.72-10.65A23.86,23.86,0,0,0,50,26.46a24.09,24.09,0,0,0-4.23,5.67A19.94,19.94,0,0,0,43,42.78c.13,6.8,3.2,9.94,
+                                3.2,9.94s-4.14-3.95-5.33-4.56c-1.35-.69-2.67-2.31-13.71-1.68a15.45,15.45,0,0,0,4,8.52,12.31,12.31,0,0,0,7.41,3.86s-5.05-2-7.15-9.45c0,0,5.76-.69,9.63,1.87,
+                                2.53,1.67,4.86,4.26,6.79,6a17.72,17.72,0,0,0-6.81,1.88,7.85,7.85,0,0,0-4.44,4.38,5.65,5.65,0,0,0-.19,2.27,33.8,33.8,0,0,0,5.94,0,5.87,5.87,0,0,0,3.42-2.16,
+                                12.72,12.72,0,0,1-3.95.77c-2.06,0-2.67-.66-2.67-.66,1-3.64,8.68-5.19,8.68-5.19a16.13,16.13,0,0,0-1.42,6.5A12.76,12.76,0,0,0,50,73.53a12.76,12.76,0,0,0,
+                                3.57-8.45,16.13,16.13,0,0,0-1.42-6.5s7.71,1.55,8.68,5.19c0,0-.61.66-2.67.66a12.72,12.72,0,0,1-3.95-.77,5.87,5.87,0,0,0,3.42,2.16,33.8,33.8,0,0,0,5.94,0,
+                                5.65,5.65,0,0,0-.19-2.27,7.85,7.85,0,0,0-4.44-4.38,17.72,17.72,0,0,0-6.81-1.88c1.93-1.75,4.26-4.34,6.79-6,3.87-2.56,9.63-1.87,9.63-1.87C66.45,56.84,61.4,
+                                58.86,61.4,58.86ZM50,69.52a6.1,6.1,0,0,1-1.47-4.26A10.74,10.74,0,0,1,50,60.12a10.74,10.74,0,0,1,1.47,5.14A6.1,6.1,0,0,1,50,69.52Zm0-15.23a17.26,17.26,0,0,
+                                1-4.35-11c0-9,4.35-11.84,4.35-11.84s4.35,2.84,4.35,11.84A17.26,17.26,0,0,1,50,54.29Z" transform="translate(-27.2 -26.46)"/>
+                            </svg>`;
+                    }
+                    selectCryptoHtml += `<h4>${sendCryptoArray[i]}</h4>`;
+                    selectCryptoHtml += `<svg class="selected" viewBox="0 0 73 73">
+                                <circle cx="36.5" cy="36.5" r="36"/>
+                                <polyline points="18.23,37.39 29.73,48.9 54.77,25.21 "/>
+                            </svg>`;
+                    selectCryptoHtml += `</label>`;
+                    parenthtml.insertAdjacentHTML('beforeend', selectCryptoHtml)
+                }
+            }
+        }
+   
+        function get_fiat_svg_selection_html(radio_id='', parenthtml='') {
+            let selectFiatHtml = ``;
+            for (const currency of localbitcoinplusplus.master_configurations.tradableAsset2) {
+                selectFiatHtml += `<label class="select-crypto">`;
+                selectFiatHtml += `<input name="currency" value="${currency}" type="radio">`;
+                if(currency=="INR") {
+                    selectFiatHtml += `<svg class="icon inr" viewBox="0 0 36.74 40">
+                              <title>Indian rupee icon</title>
+                              <path d="M62.31,35.47H56.57a11.38,11.38,0,0,1,1.64,4.58h5.53l-1.46,5.42H58.19A10.79,10.79,0,0,1,54.92,52a15.38,15.38,0,0,1-7.58,3.38l12,14.24V70H50.25L37,
+                                54.42l0-4.86h6.51c3.39,0,5.52-1.37,6.38-4.09H36.26l1.43-5.42h12q-1.34-3.31-5.9-3.38H36.26L37.88,30H63.74Z" transform="translate(-27 -30)"/>
+                            </svg>`;
+                } else if(currency=="USD") {
+                    selectFiatHtml += `<svg class="icon" viewBox="0 0 22.59 40">
+                          <title>United states dollar icon</title>
+                          <path d="M59.07,63.23a10.5,10.5,0,0,1-6.09,3c-.16.06-.23.15-.23.27l0,3a.56.56,0,0,1-.15.39.53.53,0,0,1-.39.16H47.7a.49.49,0,0,1-.38-.16.53.53,0,0,1-.16-.39l0-3c0-.12-.07-.21-.22-.27A10.82,10.82,0,0,1,40.91,63a8.62,8.62,0,0,1-2.21-6V56a.55.55,0,0,1,.55-.54h4.91a.53.53,0,0,1,.39.16.52.52,0,0,1,.15.38v.69a3.74,3.74,0,0,0,1.6,3.06A6.83,6.83,0,0,0,50.66,61a5,5,0,0,0,3.43-1,3.29,3.29,0,0,0,1.11-2.52,2.6,2.6,0,0,0-.68-1.84,5.9,5.9,0,0,0-1.88-1.32c-.81-.38-2.07-.9-3.8-1.57a34.27,34.27,0,0,1-5-2.14,10.15,10.15,0,0,1-3.39-3,7.69,7.69,0,0,1-1.39-4.66,8.24,8.24,0,0,1,2.12-5.8,10,10,0,0,1,5.7-3c.15-.07.23-.16.23-.28l-.09-3.31a.5.5,0,0,1,.16-.39.49.49,0,0,1,.38-.16h4.55a.49.49,0,0,1,.38.16.5.5,0,0,1,.16.39l0,3.4a.3.3,0,0,0,.23.28,10.56,10.56,0,0,1,6,3.29,9,9,0,0,1,2.22,6.16v.68a.51.51,0,0,1-.16.39.49.49,0,0,1-.38.16h-5a.49.49,0,0,1-.38-.16.51.51,0,0,1-.16-.39V44a4.2,4.2,0,0,0-1.5-3.25,5.94,5.94,0,0,0-4.09-1.34,4.92,4.92,0,0,0-3.18.91,3,3,0,0,0-1.14,2.5,2.84,2.84,0,0,0,.66,1.91,6.15,6.15,0,0,0,2,1.41c.87.42,2.24,1,4.09,1.63a46,46,0,0,1,4.81,2,9.46,9.46,0,0,1,3.19,2.72,7.46,7.46,0,0,1,1.41,4.69A8.44,8.44,0,0,1,59.07,63.23Z" transform="translate(-38.7 -30)"/></svg>
+                        `;
+                }
+                selectFiatHtml += `<h4>${currency}</h4>`;
+                selectFiatHtml += `<svg class="selected" viewBox="0 0 73 73">
+                            <circle cx="36.5" cy="36.5" r="36"/>
+                            <polyline points="18.23,37.39 29.73,48.9 54.77,25.21 "/>
+                        </svg>`;
+                selectFiatHtml += `</label>`;
+                parenthtml.insertAdjacentHTML('beforeend', selectFiatHtml);
+            }    
+        }
+  
+        function get_trading_amount_html(radio_id='', parenthtml='') {
+            let selectTradingAmountHtml = ``;
+            for (const amount of localbitcoinplusplus.master_configurations.validTradingAmount) {
+                selectTradingAmountHtml += `<label class="select-crypto">`;
+                selectTradingAmountHtml += `<input name="trading_amount" value="${amount}" type="radio">`;
+                selectTradingAmountHtml += `<h4>${amount}</h4>`;
+                selectTradingAmountHtml += `<svg class="selected" viewBox="0 0 73 73">
+                            <circle cx="36.5" cy="36.5" r="36"/>
+                            <polyline points="18.23,37.39 29.73,48.9 54.77,25.21 "/>
+                        </svg>`;
+                selectTradingAmountHtml += `</label>`;
+                parenthtml.insertAdjacentHTML('beforeend', selectTradingAmountHtml);
+            }    
         }
 
-        // const receiving_amount_currency_input = document.createElement(
-        //   "select"
-        // );
-        // receiving_amount_currency_input.id = "receiving_amount_currency_input";
-        // broadcast_tx_ui.appendChild(receiving_amount_currency_input);
 
-        // if (
-        //   typeof localbitcoinplusplus.master_configurations.tradableAsset2 !==
-        //   "undefined"
-        // ) {
-        //   let receiving_amount_currency_inputArray = JSON.parse(
-        //     JSON.stringify(
-        //       localbitcoinplusplus.master_configurations.tradableAsset2
-        //     )
-        //   ).filter(
-        //     asset =>
-        //       !localbitcoinplusplus.master_configurations.tradableAsset1.includes(
-        //         asset
-        //       )
-        //   );
+   </script>
 
-        //   receiving_amount_currency_inputArray.unshift("Select Fiat");
-        //   for (
-        //     var i = 0;
-        //     i < receiving_amount_currency_inputArray.length;
-        //     i++
-        //   ) {
-        //     var option = document.createElement("option");
-        //     option.value = receiving_amount_currency_inputArray[i];
-        //     option.text = receiving_amount_currency_inputArray[i];
-        //     receiving_amount_currency_input.appendChild(option);
-        //   }
-        // }
-
-        const utxo_addr_input = document.createElement("input");
-        utxo_addr_input.type = "text";
-        utxo_addr_input.placeholder = `Sender Address`;
-
-        const utxo_addr_wif_input = document.createElement("input");
-        utxo_addr_wif_input.type = "text";
-        utxo_addr_wif_input.placeholder = `Enter Private Key`;
-
-        const receiver_address_input = document.createElement("input");
-        receiver_address_input.type = "text";
-        receiver_address_input.placeholder = `Receiver Address`;
-
-        const receiving_crypto_amount_input = document.createElement("input");
-        receiving_crypto_amount_input.type = "text";
-        receiving_crypto_amount_input.placeholder = `Amount to Send`;
-
-        // const change_adress_input = document.createElement("input");
-        // change_adress_input.type = "text";
-        // change_adress_input.placeholder = `Change Address`;
-
-        const tx_send_button = document.createElement("button");
-        tx_send_button.className += " button bg-blue fs-16 ";
-
-        const tx_send_button_text = document.createTextNode("Send Transaction");
-        tx_send_button.appendChild(tx_send_button_text);
-
-        broadcast_tx_ui_form.appendChild(utxo_addr_input);
-        broadcast_tx_ui_form.appendChild(utxo_addr_wif_input);
-        broadcast_tx_ui_form.appendChild(receiver_address_input);
-        broadcast_tx_ui_form.appendChild(receiving_crypto_amount_input);
-        //broadcast_tx_ui_form.appendChild(change_adress_input);
-        broadcast_tx_ui_form.appendChild(tx_send_button);
-
-        let err_msg;
-        tx_send_button.onclick = function() {
-          if (utxo_addr_input.value.length < 1) {
-            err_msg = "Empty UTXO Address.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-          if (utxo_addr_wif_input.value.length < 1) {
-            err_msg = "Empty Private Key.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-          if (receiver_address_input.value.length < 1) {
-            err_msg = "Empty Receiving Address.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-          if (receiving_crypto_amount_input.value < 0) {
-            err_msg = "Empty Sending Amount.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-        //   if (change_adress_input.value.length < 1) {
-        //     err_msg = "Empty Change Address.";
-        //     showMessage(err_msg);
-        //     throw new Error(err_msg);
-        //   }
-
-          const RM_TRADE = new localbitcoinplusplus.trade();
-          RM_TRADE.sendTransaction(
-            send_crypto_type.value,
-            utxo_addr_input.value,
-            utxo_addr_wif_input.value,
-            receiver_address_input.value,
-            receiving_crypto_amount_input.value,
-            utxo_addr_input.value,
-            async function(res) {
-              console.log(res);
-              if (typeof res == "object") {
-                try {
-                  let resp_obj = JSON.parse(res.txid);
-                  let resp_txid = resp_obj.txid.result || resp_obj.txid;
-                  let msg = `Transaction Id for your deposited crypto asset: ${resp_txid}`;
-                  showMessage(msg);
-
-                  msg = `Signed Raw Tx for your deposited crypto asset: ${res.signedTxHash}`;
-                  showMessage(msg);
-                  return true;
-                } catch (error) {
-                  console.warn(error);
-                  showMessage(error);
-                  showMessage(`INFO: We could not broadcast your transaction. Please broadcast 
-                                this Signed Raw Tx manually yourself: ${res.signedTxHash}`);
-                }
-              }
-            }
-          );
-        };
-      }
-    </script>
-
-    <!-- Generate new keys -->
+    <!-- Broadcast Tx UI -->
     <script>
-      (function() {
-        let new_flo_keys_ul = document.getElementById("new_flo_keys_ul");
-        let new_flo_keys_button = document.getElementById("new_flo_keys");
-        new_flo_keys_button.onclick = function() {
-          if (typeof localbitcoinplusplus.wallets !== "undefined") {
-            const RM_WALLET = new localbitcoinplusplus.wallets();
-            let new_flo_keys = RM_WALLET.generateFloKeys();
-
-            let new_key_li = "";
-            Object.keys(new_flo_keys).forEach(function(key) {
-              new_key_li += `<li><strong>${key}</strong>: ${new_flo_keys[key]}</li>`;
-            });
-            new_flo_keys_ul.insertAdjacentHTML("beforeend", new_key_li);
-          }
-        };
-      })();
+    
+      function buildBroadcastTxUI() {
+        const broadcast_tx_ui = document.getElementById("send_crypto_select_div");
+        get_crypto_svg_selection_html('broadcastTx', broadcast_tx_ui);
+        //broadcast_tx_ui.insertAdjacentHTML('beforeend', selectCryptoHtml)
+      }
     </script>
 
     <script>
