Merge branch 'main' into main

public/css/main.css

@@ -0,0 +1,831 @@
+* {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
+}
+
+:root {
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: rgba(var(--text-color), 1);
+  background: rgba(var(--background-color), 1);
+}
+body,
+body * {
+  --accent-color: #504dff;
+  --accent-color--light: #f4f4ff;
+  --text-color: 36, 36, 36;
+  --background-color: 255, 255, 255;
+  --foreground-color: rgb(250, 252, 255);
+  --danger-color: rgb(255, 75, 75);
+  --green: #1cad59;
+  --yellow: #f3a600;
+  --loan-color: rgb(255, 171, 93);
+  scrollbar-width: thin;
+}
+
+body[data-theme=dark],
+body[data-theme=dark] * {
+  --accent-color: #a3a1ff;
+  --accent-color--light: rgba(142, 140, 255, 0.06);
+  --text-color: 230, 230, 230;
+  --text-color-light: 170, 170, 170;
+  --background-color: 10, 10, 10;
+  --foreground-color: rgb(20, 20, 20);
+  --danger-color: rgb(255, 106, 106);
+  --green: #00e676;
+  --yellow: #ffd13a;
+  --loan-color: rgb(255, 232, 170);
+}
+
+p,
+strong {
+  font-size: 0.9rem;
+  max-width: 70ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.8);
+}
+p:not(:last-of-type),
+strong:not(:last-of-type) {
+  margin-bottom: 1.5rem;
+}
+
+a:where([class]) {
+  color: inherit;
+  text-decoration: none;
+}
+a:where([class]):focus-visible {
+  -webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+          box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+a {
+  color: var(--accent-color);
+}
+
+button,
+.button {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  color: inherit;
+  cursor: pointer;
+  -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;
+}
+
+.button {
+  white-space: nowrap;
+  padding: 0.6rem 1rem;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  font-size: 0.8rem;
+  background-color: var(--accent-color--light);
+  color: var(--accent-color);
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.button--primary {
+  background-color: var(--accent-color);
+  color: rgba(var(--background-color), 1);
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+
+a:-webkit-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-input {
+  --border-radius: 0.5rem;
+  --background: var(--accent-color--light);
+}
+
+sm-button {
+  --padding: 0.7rem 1rem;
+}
+sm-button[variant=primary] .icon {
+  fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+  fill: rgba(var(--text-color), 0.6);
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.full-bleed {
+  grid-column: 1/4;
+}
+
+.h1 {
+  font-size: 1.5rem;
+}
+
+.h2 {
+  font-size: 1.2rem;
+}
+
+.h3 {
+  font-size: 1rem;
+}
+
+.h4 {
+  font-size: 0.9rem;
+}
+
+.h5 {
+  font-size: 0.8rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-start {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+
+.align-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: start;
+}
+
+.justify-center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.align-self-center {
+  -ms-flex-item-align: center;
+      align-self: center;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.direction-column {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.space-between {
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.stretch {
+  -webkit-box-pack: stretch;
+      -ms-flex-pack: stretch;
+          justify-content: stretch;
+  justify-items: stretch;
+}
+.stretch > * {
+  width: 100%;
+}
+
+.interact {
+  position: relative;
+  cursor: pointer;
+  -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;
+}
+
+.observe-empty-state:empty {
+  display: none;
+}
+
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: rgba(var(--text-color), 0.8);
+}
+
+.button__icon {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+.button__icon--left {
+  margin-right: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+.icon-button {
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  background-color: var(--accent-color--light);
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+.icon-button .icon {
+  fill: var(--accent-color);
+}
+
+#confirmation_popup,
+#prompt_popup {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+#confirmation_popup sm-button,
+#prompt_popup sm-button {
+  margin: 0;
+}
+#confirmation_popup .flex,
+#prompt_popup .flex {
+  padding: 0;
+  margin-top: 1rem;
+}
+#confirmation_popup .flex sm-button:first-of-type,
+#prompt_popup .flex sm-button:first-of-type {
+  margin-right: 0.6rem;
+  margin-left: auto;
+}
+
+button:active,
+.button:active,
+.interact:active {
+  -webkit-transform: scale(0.96);
+          transform: scale(0.96);
+}
+
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1.5rem 0 0.5rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  grid-template-columns: auto 1fr auto;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+#main_page {
+  padding: 1.5rem;
+}
+#main_page > section:nth-of-type(1) {
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+}
+
+.logo {
+  display: grid;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.3rem;
+  margin-right: 1rem;
+}
+.logo h4 {
+  text-transform: capitalize;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.logo .main-logo {
+  height: 1.4rem;
+  width: 1.4rem;
+  fill: rgba(var(--text-color), 1);
+  stroke: none;
+}
+
+details summary {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+}
+details[open] > summary {
+  margin-bottom: 1rem;
+}
+details[open] > summary .icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+strip-select {
+  --gap: 0;
+  background-color: var(--accent-color--light);
+  border-radius: 0.3rem;
+}
+
+strip-option {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  font-size: 0.8rem;
+  --border-radius: 0;
+  --active-option-color: rgba(var(--background-color), 1);
+  --active-option-background-color: var(--accent-color);
+}
+strip-option:first-of-type {
+  --border-radius: 0.3rem 0 0 0.3rem;
+}
+strip-option:last-of-type {
+  --border-radius: 0 0.3rem 0.3rem 0;
+}
+
+.warning {
+  background-color: khaki;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
+
+.page-layout {
+  display: grid;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+}
+.page-layout > * {
+  grid-column: 2/3;
+}
+
+.page {
+  height: 100%;
+}
+
+.table__row {
+  display: grid;
+  grid-template-columns: repeat(var(--table-columns), auto);
+}
+.table__header {
+  color: rgba(var(--text-color), 0.8);
+  font-size: 0.8rem;
+}
+
+#landing {
+  grid-template-rows: auto 1fr;
+}
+#landing header {
+  padding: 1.5rem 0;
+}
+#landing > .grid {
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+  text-align: center;
+  gap: 1rem;
+}
+
+#sign_in,
+#sign_up {
+  grid-template-rows: auto 1fr;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+#sign_in section,
+#sign_up section {
+  margin-top: -6rem;
+  justify-self: center;
+  width: min(24rem, 100%);
+}
+#sign_in sm-form,
+#sign_up sm-form {
+  margin: 2rem 0;
+}
+#sign_in header,
+#sign_up header {
+  padding: 1.5rem 0;
+}
+
+#sign_up sm-copy {
+  font-size: 0.9rem;
+  --button-border-radius: 0.5rem;
+}
+#sign_up .h2 {
+  margin-bottom: 0.5rem;
+}
+#sign_up .card {
+  margin: 1.5rem 0;
+}
+#sign_up h5 {
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+#sign_up .warning {
+  margin-top: 2rem;
+}
+
+#loading {
+  place-content: center;
+  text-align: center;
+}
+#loading sm-spinner {
+  margin-bottom: 1.5rem;
+}
+
+#home {
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+#main_header {
+  padding: 1.8rem 1.5rem;
+  display: grid;
+  gap: 1rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  grid-template-columns: 1fr auto;
+}
+
+#trade_form {
+  --width: min(24rem, 100%);
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  padding: 1rem 1.5rem;
+}
+
+#quantity_selector .button {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding: 0.5rem 0.6rem;
+  margin-left: 0.5rem;
+}
+
+#quantity_type {
+  font-size: 0.8rem;
+  padding-right: 0.5rem;
+  border-right: thin solid rgba(var(--text-color), 0.3);
+  margin-right: auto;
+  color: rgba(var(--text-color), 0.8);
+  line-height: 1.5;
+  font-weight: 500;
+  min-width: 8ch;
+}
+
+#orders_section {
+  padding: 1.5rem;
+}
+
+#user_section {
+  gap: 1.5rem;
+  padding: 1.5rem;
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+}
+
+.wallet_actions__wrapper {
+  grid-column: span 3;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.wallet_actions__wrapper .button {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.balance-card {
+  display: grid;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 0.3rem 1rem;
+  padding: 0.5rem 0;
+  border-radius: 0.5rem;
+}
+.balance-card.is-locked {
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+}
+.balance-card.is-locked .label {
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.8);
+}
+.balance-card:not(.is-locked) {
+  grid-template-columns: auto 1fr auto;
+}
+.balance-card__icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  background-color: var(--accent-color--light);
+}
+.balance-card__icon .icon {
+  height: 1.3rem;
+  width: 1.3rem;
+  fill: var(--accent-color);
+}
+.balance-card__token {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.balance-card__amount-wrapper {
+  grid-column: span 2;
+  gap: 0.3rem 1rem;
+  grid-template-columns: 1fr 1fr;
+}
+.balance-card__amount-wrapper > :nth-child(even) {
+  text-align: right;
+}
+
+.loader-button-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.loader-button-wrapper sm-button,
+.loader-button-wrapper slide-button {
+  width: 100%;
+  z-index: 1;
+  -webkit-transition: -webkit-clip-path 0.3s;
+  transition: -webkit-clip-path 0.3s;
+  transition: clip-path 0.3s;
+  transition: clip-path 0.3s, -webkit-clip-path 0.3s;
+  -webkit-clip-path: circle(100%);
+          clip-path: circle(100%);
+}
+.loader-button-wrapper sm-button.clip,
+.loader-button-wrapper slide-button.clip {
+  pointer-events: none;
+  -webkit-clip-path: circle(0);
+          clip-path: circle(0);
+}
+.loader-button-wrapper sm-spinner {
+  position: absolute;
+}
+
+@media screen and (max-width: 40rem) {
+  sm-button {
+    --padding: 0.9rem 1.6rem;
+  }
+}
+@media screen and (min-width: 40rem) {
+  sm-popup {
+    --width: 24rem;
+  }
+
+  .h1 {
+    font-size: 2rem;
+  }
+
+  .h2 {
+    font-size: 1.8rem;
+  }
+
+  .h3 {
+    font-size: 1.3rem;
+  }
+
+  .h4 {
+    font-size: 1rem;
+  }
+
+  .popup__header {
+    padding: 1rem 1.5rem 0 0.5rem;
+  }
+
+  #confirmation_popup {
+    --width: 24rem;
+  }
+
+  .page-layout {
+    grid-template-columns: 1fr 90vw 1fr;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .page-layout {
+    grid-template-columns: 1fr 80vw 1fr;
+  }
+
+  #home {
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    padding: 1.5vmax 3vmax;
+    grid-template-columns: 24rem minmax(0, 1fr) 20rem;
+    gap: 1rem;
+  }
+  #home > * {
+    border-radius: 0.5rem;
+    background-color: var(--foreground-color);
+    border: solid thin rgba(var(--text-color), 0.1);
+  }
+
+  .hide-on-desktop {
+    display: none;
+  }
+}
+@media screen and (min-width: 120rem) {
+  .page-layout {
+    grid-template-columns: 1fr 70vw 1fr;
+  }
+}
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.5);
+  }
+
+  .nav-item,
+.interact {
+    -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
+    transition: background-color 0.3s, -webkit-transform 0.3s;
+    transition: background-color 0.3s, transform 0.3s;
+    transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
+  }
+  .nav-item:hover,
+.interact:hover {
+    background-color: var(--accent-color--light);
+  }
+}

public/css/main.scss

@@ -0,0 +1,726 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
+}
+
+:root {
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  &,
+  * {
+    --accent-color: #504dff;
+    --accent-color--light: #f4f4ff;
+    --text-color: 36, 36, 36;
+    --background-color: 255, 255, 255;
+    --foreground-color: rgb(250, 252, 255);
+    --danger-color: rgb(255, 75, 75);
+    --green: #1cad59;
+    --yellow: #f3a600;
+    --loan-color: rgb(255, 171, 93);
+    scrollbar-width: thin;
+  }
+
+  color: rgba(var(--text-color), 1);
+  background: rgba(var(--background-color), 1);
+}
+
+body[data-theme="dark"] {
+  &,
+  * {
+    --accent-color: #a3a1ff;
+    --accent-color--light: rgba(142, 140, 255, 0.06);
+    --text-color: 230, 230, 230;
+    --text-color-light: 170, 170, 170;
+    --background-color: 10, 10, 10;
+    --foreground-color: rgb(20, 20, 20);
+    --danger-color: rgb(255, 106, 106);
+    --green: #00e676;
+    --yellow: #ffd13a;
+    --loan-color: rgb(255, 232, 170);
+  }
+}
+
+p,
+strong {
+  font-size: 0.9rem;
+  max-width: 70ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.8);
+
+  &:not(:last-of-type) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+a:where([class]) {
+  color: inherit;
+  text-decoration: none;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+  }
+}
+
+a {
+  color: var(--accent-color);
+}
+
+button,
+.button {
+  user-select: none;
+  position: relative;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  color: inherit;
+  cursor: pointer;
+  transition: transform 0.3s;
+  -webkit-tap-highlight-color: transparent;
+}
+.button {
+  white-space: nowrap;
+  padding: 0.6rem 1rem;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  font-size: 0.8rem;
+  background-color: var(--accent-color--light);
+  color: var(--accent-color);
+  justify-content: center;
+  &--primary {
+    background-color: var(--accent-color);
+    color: rgba(var(--background-color), 1);
+  }
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-input {
+  --border-radius: 0.5rem;
+  --background: var(--accent-color--light);
+}
+sm-button {
+  --padding: 0.7rem 1rem;
+  &[variant="primary"] {
+    .icon {
+      fill: rgba(var(--background-color), 1);
+    }
+  }
+
+  &[disabled] {
+    .icon {
+      fill: rgba(var(--text-color), 0.6);
+    }
+  }
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.full-bleed {
+  grid-column: 1/4;
+}
+
+.h1 {
+  font-size: 1.5rem;
+}
+
+.h2 {
+  font-size: 1.2rem;
+}
+
+.h3 {
+  font-size: 1rem;
+}
+
+.h4 {
+  font-size: 0.9rem;
+}
+
+.h5 {
+  font-size: 0.8rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  justify-content: start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.stretch {
+  justify-content: stretch;
+  justify-items: stretch;
+
+  & > * {
+    width: 100%;
+  }
+}
+
+.interact {
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.3s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.observe-empty-state:empty {
+  display: none;
+}
+
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: rgba(var(--text-color), 0.8);
+}
+
+.button__icon {
+  height: 1.2rem;
+  width: 1.2rem;
+
+  &--left {
+    margin-right: 0.5rem;
+  }
+
+  &--right {
+    margin-left: 0.5rem;
+  }
+}
+
+.icon-button {
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  background-color: var(--accent-color--light);
+  height: max-content;
+  .icon {
+    fill: var(--accent-color);
+  }
+}
+#confirmation_popup,
+#prompt_popup {
+  flex-direction: column;
+  h4 {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  sm-button {
+    margin: 0;
+  }
+  .flex {
+    padding: 0;
+    margin-top: 1rem;
+    sm-button:first-of-type {
+      margin-right: 0.6rem;
+      margin-left: auto;
+    }
+  }
+}
+
+button:active,
+.button:active,
+.interact:active {
+  transform: scale(0.96);
+}
+
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1.5rem 0 0.5rem;
+  align-items: center;
+  grid-template-columns: auto 1fr auto;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+#main_page {
+  padding: 1.5rem;
+
+  & > section:nth-of-type(1) {
+    align-content: flex-start;
+  }
+}
+.logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.3rem;
+  margin-right: 1rem;
+
+  h4 {
+    text-transform: capitalize;
+    font-size: 0.9rem;
+    font-weight: 600;
+  }
+
+  .main-logo {
+    height: 1.4rem;
+    width: 1.4rem;
+    fill: rgba(var(--text-color), 1);
+    stroke: none;
+  }
+}
+details {
+  summary {
+    display: flex;
+    justify-content: space-between;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  &[open] > summary {
+    margin-bottom: 1rem;
+    .icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+strip-select {
+  --gap: 0;
+  background-color: var(--accent-color--light);
+  border-radius: 0.3rem;
+}
+strip-option {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  font-size: 0.8rem;
+  --border-radius: 0;
+  --active-option-color: rgba(var(--background-color), 1);
+  --active-option-background-color: var(--accent-color);
+  &:first-of-type {
+    --border-radius: 0.3rem 0 0 0.3rem;
+  }
+  &:last-of-type {
+    --border-radius: 0 0.3rem 0.3rem 0;
+  }
+}
+.warning {
+  background-color: khaki;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
+.page-layout {
+  display: grid;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+  & > * {
+    grid-column: 2/3;
+  }
+}
+.page {
+  height: 100%;
+}
+.table {
+  &__row {
+    display: grid;
+    grid-template-columns: repeat(var(--table-columns), auto);
+  }
+  &__header {
+    color: rgba(var(--text-color), 0.8);
+    font-size: 0.8rem;
+  }
+}
+#landing {
+  grid-template-rows: auto 1fr;
+  header {
+    padding: 1.5rem 0;
+  }
+  & > .grid {
+    align-content: flex-start;
+    text-align: center;
+    gap: 1rem;
+  }
+}
+
+#sign_in,
+#sign_up {
+  grid-template-rows: auto 1fr;
+  align-items: center;
+  section {
+    margin-top: -6rem;
+    justify-self: center;
+    width: min(24rem, 100%);
+  }
+  sm-form {
+    margin: 2rem 0;
+  }
+  header {
+    padding: 1.5rem 0;
+  }
+}
+#sign_up {
+  sm-copy {
+    font-size: 0.9rem;
+    --button-border-radius: 0.5rem;
+  }
+  .h2 {
+    margin-bottom: 0.5rem;
+  }
+  .card {
+    margin: 1.5rem 0;
+  }
+  h5 {
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.8);
+  }
+  .warning {
+    margin-top: 2rem;
+  }
+}
+#loading {
+  place-content: center;
+  text-align: center;
+  sm-spinner {
+    margin-bottom: 1.5rem;
+  }
+}
+#home {
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+#main_header {
+  padding: 1.8rem 1.5rem;
+  display: grid;
+  gap: 1rem;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+}
+
+#trade_form {
+  --width: min(24rem, 100%);
+  align-self: flex-start;
+  padding: 1rem 1.5rem;
+}
+#quantity_selector {
+  .button {
+    flex: 1;
+    padding: 0.5rem 0.6rem;
+    margin-left: 0.5rem;
+  }
+}
+#quantity_type {
+  font-size: 0.8rem;
+  padding-right: 0.5rem;
+  border-right: thin solid rgba(var(--text-color), 0.3);
+  margin-right: auto;
+  color: rgba(var(--text-color), 0.8);
+  line-height: 1.5;
+  font-weight: 500;
+  min-width: 8ch;
+}
+#orders_section {
+  padding: 1.5rem;
+}
+#user_section {
+  gap: 1.5rem;
+  padding: 1.5rem;
+  align-content: flex-start;
+}
+.user_section__header {
+}
+.wallet_actions__wrapper {
+  grid-column: span 3;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  .button {
+    flex: 1;
+  }
+}
+.balance-card {
+  display: grid;
+  align-items: center;
+  gap: 0.3rem 1rem;
+  padding: 0.5rem 0;
+  border-radius: 0.5rem;
+  &.is-locked {
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+    .label {
+      font-size: 0.8rem;
+      color: rgba(var(--text-color), 0.8);
+    }
+  }
+  &:not(.is-locked) {
+    grid-template-columns: auto 1fr auto;
+  }
+  &__icon {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    padding: 0.6rem;
+    border-radius: 0.8rem;
+    background-color: var(--accent-color--light);
+    .icon {
+      height: 1.3rem;
+      width: 1.3rem;
+      fill: var(--accent-color);
+    }
+  }
+  &__token {
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+  &__amount-wrapper {
+    grid-column: span 2;
+    gap: 0.3rem 1rem;
+    grid-template-columns: 1fr 1fr;
+    & > :nth-child(even) {
+      text-align: right;
+    }
+  }
+}
+.loader-button-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  sm-button,
+  slide-button {
+    width: 100%;
+    z-index: 1;
+    transition: clip-path 0.3s;
+    clip-path: circle(100%);
+    &.clip {
+      pointer-events: none;
+      clip-path: circle(0);
+    }
+  }
+  sm-spinner {
+    position: absolute;
+  }
+}
+@media screen and (max-width: 40rem) {
+  sm-button {
+    --padding: 0.9rem 1.6rem;
+  }
+}
+@media screen and (min-width: 40rem) {
+  sm-popup {
+    --width: 24rem;
+  }
+  .h1 {
+    font-size: 2rem;
+  }
+
+  .h2 {
+    font-size: 1.8rem;
+  }
+
+  .h3 {
+    font-size: 1.3rem;
+  }
+
+  .h4 {
+    font-size: 1rem;
+  }
+  .popup__header {
+    padding: 1rem 1.5rem 0 0.5rem;
+  }
+  #confirmation_popup {
+    --width: 24rem;
+  }
+  .page-layout {
+    grid-template-columns: 1fr 90vw 1fr;
+  }
+}
+@media screen and (max-width: 64rem) {
+}
+@media screen and (min-width: 64rem) {
+  .page-layout {
+    grid-template-columns: 1fr 80vw 1fr;
+  }
+  #home {
+    align-items: flex-start;
+    padding: 1.5vmax 3vmax;
+    grid-template-columns: 24rem minmax(0, 1fr) 20rem;
+    gap: 1rem;
+    & > * {
+      border-radius: 0.5rem;
+      background-color: var(--foreground-color);
+      border: solid thin rgba(var(--text-color), 0.1);
+    }
+  }
+  .hide-on-desktop {
+    display: none;
+  }
+}
+@media screen and (min-width: 120rem) {
+  .page-layout {
+    grid-template-columns: 1fr 70vw 1fr;
+  }
+}
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+
+    &:hover {
+      background: rgba(var(--text-color), 0.5);
+    }
+  }
+  .nav-item,
+  .interact {
+    transition: background-color 0.3s, transform 0.3s;
+    &:hover {
+      background-color: var(--accent-color--light);
+    }
+  }
+}

public/home.html

@@ -1,12 +1,15 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-    <style>
+
-        table td,
+    <meta charset="UTF-8">
-        table th {
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-            border: 1px solid black;
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        }
+    <title>RanchiMall market</title>
-    </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
     <script src="floGlobals.js"></script>
     <script src="https://sairajzero.github.io/Standard_Operations/cdn/floCrypto.js"></script>
     <script src="https://github.com/sairajzero/Standard_Operations/releases/download/test/floBlockchainAPI.js"></script>
@@ -56,7 +59,8 @@
                     <input type="button" name="deposit-flo" value="Deposit FLO" onclick="UI_evt.depositFLO();" />
                     <input type="button" name="withdraw-flo" value="Withdraw FLO" onclick="UI_evt.withdrawFLO();" />
                     <input type="button" name="deposit-rupee" value="Deposit Rupee" onclick="UI_evt.depositRupee();" />
-                    <input type="button" name="withdraw-rupee" value="Withdraw Rupee" onclick="UI_evt.withdrawRupee();" />
+                    <input type="button" name="withdraw-rupee" value="Withdraw Rupee"
+                        onclick="UI_evt.withdrawRupee();" />
                 </fieldset>
             </form>
             <button onclick="toggle_view('my-profile');">Toggle</button>
@@ -169,7 +173,387 @@
             </fieldset>
         </div>
     </div>
+    <script id="ui_utils">
+        // Global variables
+        const domRefs = {};
+        let timerId;
+        const currentYear = new Date().getFullYear();
 
+        //Checks for internet connection status
+        if (!navigator.onLine)
+            notify(
+                "There seems to be a problem connecting to the internet, Please check you internet connection.",
+                "error",
+                { sound: true }
+            );
+        window.addEventListener("offline", () => {
+            notify(
+                "There seems to be a problem connecting to the internet, Please check you internet connection.",
+                "error",
+                { pinned: true, sound: true }
+            );
+        });
+        window.addEventListener("online", () => {
+            getRef("notification_drawer").clearAll();
+            notify("We are back online.", "success");
+        });
+
+        // Use instead of document.getElementById
+        function getRef(elementId) {
+            if (!domRefs.hasOwnProperty(elementId)) {
+                domRefs[elementId] = {
+                    count: 1,
+                    ref: null,
+                };
+                return document.getElementById(elementId);
+            } else {
+                if (domRefs[elementId].count < 3) {
+                    domRefs[elementId].count = domRefs[elementId].count + 1;
+                    return document.getElementById(elementId);
+                } else {
+                    if (!domRefs[elementId].ref)
+                        domRefs[elementId].ref = document.getElementById(elementId);
+                    return domRefs[elementId].ref;
+                }
+            }
+        }
+
+        // returns dom with specified element
+        function createElement(tagName, options) {
+            const { className, textContent, innerHTML, attributes = {} } = options
+            const elem = document.createElement(tagName)
+            for (let attribute in attributes) {
+                elem.setAttribute(attribute, attributes[attribute])
+            }
+            if (className)
+                elem.className = className
+            if (textContent)
+                elem.textContent = textContent
+            if (innerHTML)
+                elem.innerHTML = innerHTML
+            return elem
+        }
+
+        // Use when a function needs to be executed after user finishes changes
+        const debounce = (callback, wait) => {
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                    callback.apply(null, args);
+                }, wait);
+            };
+        }
+
+        // Limits the rate of function execution
+        function throttle(func, delay) {
+            // If setTimeout is already scheduled, no need to do anything
+            if (timerId) {
+                return;
+            }
+
+            // Schedule a setTimeout after delay seconds
+            timerId = setTimeout(function () {
+                func();
+
+                // Once setTimeout function execution is finished, timerId = undefined so that in
+                // the next scroll event function execution can be scheduled by the setTimeout
+                timerId = undefined;
+            }, delay);
+        }
+
+        class Stack {
+            constructor() {
+                this.items = [];
+            }
+            push(element) {
+                this.items.push(element);
+            }
+            pop() {
+                if (this.items.length == 0)
+                    return "Underflow";
+                return this.items.pop();
+            }
+            peek() {
+                return this.items[this.items.length - 1];
+            }
+        }
+        let popupStack = new Stack()
+        let zIndex = 10
+        // function required for popups or modals to appear
+        function showPopup(popupId, pinned) {
+            zIndex++
+            getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
+            popupStack = getRef(popupId).show({ pinned, popupStack })
+            return getRef(popupId);
+        }
+
+        // hides the popup or modal 
+        function hidePopup() {
+            if (popupStack.peek() === undefined)
+                return;
+            popupStack.peek().popup.hide()
+        }
+
+        // displays a popup for asking permission. Use this instead of JS confirm
+        const getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+            return new Promise(resolve => {
+                showPopup('confirmation_popup', true)
+                getRef('confirm_title').textContent = title;
+                getRef('confirm_message').textContent = message;
+                let cancelButton = getRef('confirmation_popup').children[2].children[0],
+                    submitButton = getRef('confirmation_popup').children[2].children[1]
+                submitButton.textContent = confirmText
+                cancelButton.textContent = cancelText
+                submitButton.onclick = () => {
+                    hidePopup()
+                    resolve(true);
+                }
+                cancelButton.onclick = () => {
+                    hidePopup()
+                    resolve(false);
+                }
+            })
+        }
+
+        //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+        function notify(message, mode, options = {}) {
+            const { pinned = false, sound = false } = options
+            let icon
+            switch (mode) {
+                case 'success':
+                    icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+                    break;
+                case 'error':
+                    icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+                    break;
+            }
+            getRef("notification_drawer").push(message, { pinned, icon });
+            if (navigator.onLine && sound) {
+                getRef("notification_sound").currentTime = 0;
+                getRef("notification_sound").play();
+            }
+            if (mode === 'error') {
+                console.error(message)
+            }
+        }
+
+        function getFormattedTime(time, relative) {
+            try {
+                if (String(time).indexOf('_'))
+                    time = String(time).split('_')[0]
+                const intTime = parseInt(time)
+                if (String(intTime).length < 13)
+                    time *= 1000
+                let timeFrag = new Date(intTime).toString().split(' '),
+                    day = timeFrag[0],
+                    month = timeFrag[1],
+                    date = timeFrag[2],
+                    year = timeFrag[3],
+                    minutes = new Date(intTime).getMinutes(),
+                    hours = new Date(intTime).getHours(),
+                    currentTime = new Date().toString().split(' ')
+
+                minutes = minutes < 10 ? `0${minutes}` : minutes
+                let finalHours = ``;
+                if (hours > 12)
+                    finalHours = `${hours - 12}:${minutes}`
+                else if (hours === 0)
+                    finalHours = `12:${minutes}`
+                else
+                    finalHours = `${hours}:${minutes}`
+
+                finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
+                if (relative) {
+                    if (year == currentYear) {
+                        if (currentTime[1] === month) {
+                            const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
+                            if (dateDiff === 0)
+                                return `${finalHours}`;
+                            else if (dateDiff === 1)
+                                return `Yesterday`;
+                            else if (dateDiff > 1 && dateDiff < 8)
+                                return currentTime[0];
+                            else
+                                return ` ${date} ${month}`;
+                        }
+                        else
+                            return ` ${date} ${month}`;
+                    }
+                    else
+                        return `${month} ${year}`;
+                }
+                else
+                    return `${month} ${date} ${year}, ${finalHours}`;
+            } catch (e) {
+                console.error(e);
+                return time;
+            }
+        }
+
+        window.addEventListener('hashchange', e => showPage(window.location.hash))
+        window.addEventListener("load", () => {
+            document.body.classList.remove('hide-completely')
+            document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
+            document.addEventListener('keyup', (e) => {
+                if (e.code === 'Escape') {
+                    hidePopup()
+                }
+            })
+            document.addEventListener('copy', () => {
+                notify('copied', 'success')
+            })
+        });
+
+        const pagesData = {
+            openedPages: [],
+            params: {}
+        }
+
+        async function showPage(targetPage, options = {}) {
+            const { firstLoad, hashChange } = options
+            let pageId
+            let subPageId
+            let searchParams
+            let params
+            if (targetPage === '') {
+                if (typeof myFloID === "undefined") {
+                    pageId = 'landing'
+                } else {
+                    pageId = 'home'
+                }
+            } else {
+                if (targetPage.includes('/')) {
+                    if (targetPage.includes('?')) {
+                        const splitAddress = targetPage.split('?')
+                        searchParams = splitAddress.pop()
+                        const pages = splitAddress.pop().split('/')
+                        pageId = pages[1]
+                        subPageId = pages[2]
+                    } else {
+                        const pages = targetPage.split('/')
+                        pageId = pages[1]
+                        subPageId = pages[2]
+                    }
+                } else {
+                    pageId = targetPage
+                }
+            }
+            if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
+            if (searchParams) {
+                const urlSearchParams = new URLSearchParams('?' + searchParams);
+                params = Object.fromEntries(urlSearchParams.entries());
+                pagesData.params = params
+            }
+            if (pagesData.lastPage !== pageId) {
+                switch (pageId) {
+                    case 'sign_in':
+                        setTimeout(() => {
+                            getRef('private_key_field').focusIn()
+                        }, 0);
+                        break;
+                    case 'sign_up':
+                        const { floID, privKey } = floCrypto.generateNewID()
+                        getRef('generated_flo_id').value = floID
+                        getRef('generated_private_key').value = privKey
+                        break;
+                }
+                document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
+                getRef(pageId)?.classList.remove('hide-completely')
+                getRef(pageId)?.animate([
+                    {
+                        opacity: 0,
+                    },
+                    {
+                        opacity: 1,
+                    },
+                ],
+                    {
+                        duration: 300,
+                        easing: 'ease'
+                    })
+            }
+            pagesData.lastPage = pageId
+            if (!pagesData.openedPages.includes(pageId)) {
+                pagesData.openedPages.push(pageId)
+            }
+        }
+        // class based lazy loading
+        class LazyLoader {
+            constructor(container, elementsToRender, renderFn, options = {}) {
+                const { batchSize = 10 } = options
+
+                this.elementsToRender = elementsToRender
+                this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
+                this.renderFn = renderFn
+                this.intersectionObserver
+
+                this.batchSize = batchSize
+
+                this.lazyContainer = document.querySelector(container)
+
+                this.update = this.update.bind(this)
+                this.render = this.render.bind(this)
+                this.init = this.init.bind(this)
+                this.clear = this.clear.bind(this)
+            }
+            init() {
+                this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            observer.disconnect()
+                            this.render({ lazyLoad: true })
+                        }
+                    })
+                }, {
+                    threshold: 0.3
+                })
+                this.mutationObserver = new MutationObserver(mutationList => {
+                    mutationList.forEach(mutation => {
+                        if (mutation.type === 'childList') {
+                            if (mutation.addedNodes.length) {
+                                this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+                            }
+                        }
+                    })
+                })
+                this.mutationObserver.observe(this.lazyContainer, {
+                    childList: true,
+                })
+                this.render()
+            }
+            update(elementsToRender) {
+                this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
+                this.render()
+            }
+            render(options = {}) {
+                let { lazyLoad = false } = options
+                const frag = document.createDocumentFragment();
+                if (lazyLoad) {
+                    this.updateStartIndex = this.updateEndIndex
+                    this.updateEndIndex = this.arrayOfElements.length > this.updateEndIndex + this.batchSize ? this.updateEndIndex + this.batchSize : this.arrayOfElements.length
+                } else {
+                    this.intersectionObserver.disconnect()
+                    this.lazyContainer.innerHTML = ``;
+                    this.updateStartIndex = 0
+                    this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length
+                }
+                for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+                    frag.append(this.renderFn(this.arrayOfElements[index]))
+                }
+                this.lazyContainer.append(frag)
+            }
+            clear() {
+                this.intersectionObserver.disconnect()
+                this.mutationObserver.disconnect()
+                this.lazyContainer.innerHTML = ``;
+            }
+            reset() {
+                this.arrayOfElements = (typeof this.elementsToRender === 'function') ? this.elementsToRender() : this.elementsToRender || []
+                this.render()
+            }
+        }
+    </script>
     <script>
         var user_id; //container for user ID and proxy private-key
 
@@ -386,7 +770,7 @@
 
         const UI_evt = {};
 
-        UI_evt.signup = function() {
+        UI_evt.signup = function () {
             let sid = document.forms['login-form']['sid'].value;
             let privKey = prompt("Enter Private Key of floID to register: ");
             signUp(privKey, sid).then(result => {
@@ -398,7 +782,7 @@
             });
         };
 
-        UI_evt.logout = function() {
+        UI_evt.logout = function () {
             logout().then(result => {
                 console.warn(result);
                 proxy.clear();
@@ -406,7 +790,7 @@
             }).catch(error => console.error(error));
         };
 
-        UI_evt.login = function() {
+        UI_evt.login = function () {
             let formInputs = document.forms['login-form'];
             let privKey = formInputs['priv-key'].value;
             let sid = formInputs['sid'].value;
@@ -419,7 +803,7 @@
             }).catch(error => console.error(error));
         };
 
-        UI_evt.sell = function() {
+        UI_evt.sell = function () {
             let formInputs = document.forms['sell-form'];
             sell(parseFloat(formInputs["quantity"].value), parseFloat(formInputs["min-price"].value), proxy.secret)
                 .then(result => console.log(result))
@@ -427,7 +811,7 @@
                 .finally(_ => formInputs.reset());
         };
 
-        UI_evt.buy = function() {
+        UI_evt.buy = function () {
             let formInputs = document.forms['buy-form'];
             buy(parseFloat(formInputs["quantity"].value), parseFloat(formInputs["max-price"].value), proxy.secret)
                 .then(result => console.log(result))
@@ -435,7 +819,7 @@
                 .finally(_ => formInputs.reset());
         };
 
-        UI_evt.cancelOrders = function() {
+        UI_evt.cancelOrders = function () {
             let container = document.getElementById('my-orders');
             let cancel = [];
             let inputs = container.getElementsByTagName('input')
@@ -452,7 +836,7 @@
                 .catch(error => console.error(o, error)))
         };
 
-        UI_evt.depositFLO = function() {
+        UI_evt.depositFLO = function () {
             let formInputs = document.forms['deposit-withdraw-form'];
             let privKey = prompt("Enter private key");
             depositFLO(parseFloat(formInputs["quantity"].value), user_id, privKey, proxy.secret)
@@ -461,7 +845,7 @@
                 .finally(_ => formInputs.reset());
         }
 
-        UI_evt.depositRupee = function() {
+        UI_evt.depositRupee = function () {
             let formInputs = document.forms['deposit-withdraw-form'];
             let privKey = prompt("Enter private key");
             depositRupee(parseFloat(formInputs["quantity"].value), user_id, privKey, proxy.secret)
@@ -470,7 +854,7 @@
                 .finally(_ => formInputs.reset());
         }
 
-        UI_evt.withdrawFLO = function() {
+        UI_evt.withdrawFLO = function () {
             let formInputs = document.forms['deposit-withdraw-form'];
             withdrawFLO(parseFloat(formInputs["quantity"].value), proxy.secret)
                 .then(result => console.log(result))
@@ -478,7 +862,7 @@
                 .finally(_ => formInputs.reset());
         }
 
-        UI_evt.withdrawRupee = function() {
+        UI_evt.withdrawRupee = function () {
             let formInputs = document.forms['deposit-withdraw-form'];
             withdrawRupee(parseFloat(formInputs["quantity"].value), proxy.secret)
                 .then(result => console.log(result))
@@ -488,7 +872,31 @@
 
         refresh(true);
     </script>
-
+    <script>
+        getRef('trade_type_selector').addEventListener('change', e => {
+            getRef('get_price').setAttribute('placeholder', e.detail.value === 'buy' ? 'Max price' : 'Min price')
+            getRef('trade_button').textContent = e.detail.value
+        })
+        async function tradeFlo() {
+            const tradeType = getRef('trade_type_selector').value
+            const quantity = parseFloat(getRef('get_quantity').value)
+            const price = parseFloat(getRef('get_price').value)
+            try {
+                if (tradeType === 'buy') {
+                    await buy(quantity, price, proxy.secret)
+                } else {
+                    await sell(quantity, price, proxy.secret)
+                }
+                notify(`Placed ${tradeType} order`, 'success')
+            }
+            catch (err) {
+                notify(err, 'error')
+            }
+            finally {
+                getRef('trade_form').reset()
+            }
+        }
+    </script>
 </body>
 
 </html>