From 0f977441918422e6ec416d0ecd455fd6d96dc4c2 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sun, 31 Jul 2022 01:00:38 +0530
Subject: [PATCH] feature and UI update

-- added BTC as asset
-- added option to send btc
-- added option to view btc transactions
-- implemented different design for homepage
---
 css/bg-art-5.svg      |    1 +
 css/main.css          |  391 +++---
 css/main.min.css      |    2 +-
 css/main.scss         |  359 +++--
 index.html            |  792 +++++++----
 scripts/components.js |  913 +++++++++----
 scripts/fn_ui.js      |  397 ++++--
 scripts/lib_btc.js    | 2883 +++++++++++++++++++++++++++++++++++++++++
 scripts/std_ui.js     |  307 +++--
 9 files changed, 5056 insertions(+), 989 deletions(-)
 create mode 100644 css/bg-art-5.svg
 create mode 100644 scripts/lib_btc.js

diff --git a/css/bg-art-5.svg b/css/bg-art-5.svg
new file mode 100644
index 0000000..c71d67d
--- /dev/null
+++ b/css/bg-art-5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240"><defs><style>.a{fill:url(#a);}.b{fill:url(#b);}.c{fill:url(#c);}</style><linearGradient id="a" x1="144.49" y1="221.31" x2="241.6" y2="157.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" x1="90.96" y1="190.69" x2="180.52" y2="132.19" gradientTransform="matrix(-0.36, 0.73, -0.7, -0.35, 326.09, 97.01)" xlink:href="#a"/><linearGradient id="c" x1="32.7" y1="395.41" x2="125.65" y2="334.7" gradientTransform="matrix(0.86, -0.58, 0.56, 0.83, -241, -210.66)" xlink:href="#a"/></defs><circle class="a" cx="192.35" cy="190.05" r="57.99"/><circle class="b" cx="163.17" cy="139.1" r="43.16"/><circle class="c" cx="30.93" cy="46.87" r="57.09"/></svg>
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 6738365..5ed4206 100644
--- a/css/main.css
+++ b/css/main.css
@@ -96,14 +96,12 @@ a.button {
 button {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   position: relative;
   display: inline-flex;
   border: none;
   background-color: transparent;
   overflow: hidden;
-  color: inherit;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   font-size: 0.9rem;
@@ -112,6 +110,7 @@ button {
   padding: 0.8rem;
   border-radius: 0.3rem;
   justify-content: center;
+  color: inherit;
 }
 button:focus-visible {
   outline: var(--accent-color) solid medium;
@@ -121,8 +120,12 @@ button:not(:disabled) {
 }
 
 .button {
+  color: var(--accent-color);
   background-color: rgba(var(--text-color), 0.06);
 }
+.button .icon {
+  fill: var(--accent-color);
+}
 .button--primary, .button--danger {
   color: rgba(var(--background-color), 1) !important;
 }
@@ -179,7 +182,6 @@ details summary {
   display: flex;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   cursor: pointer;
   align-items: center;
@@ -249,7 +251,6 @@ strip-option {
   --border-radius: 0.2rem;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 
@@ -305,12 +306,11 @@ ol li::before {
   text-overflow: ellipsis;
 }
 
-.breakable {
+.wrap-around {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   -webkit-hyphens: auto;
-      -ms-hyphens: auto;
           hyphens: auto;
 }
 
@@ -504,6 +504,10 @@ ol li::before {
   background-color: var(--accent-color);
 }
 
+.margin-right-0-3 {
+  margin-right: 0.3rem;
+}
+
 .margin-right-0-5 {
   margin-right: 0.5rem;
 }
@@ -531,26 +535,15 @@ ol li::before {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1.5rem;
-  min-height: 8rem;
+  min-height: 5rem;
 }
 .page__header .grid {
   margin-top: auto;
 }
 .page__header h1 {
-  margin-top: auto;
   font-size: 2rem;
 }
 
-.page-layout {
-  display: grid;
-  gap: 1.5rem 0;
-  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
-  align-content: flex-start;
-}
-.page-layout > * {
-  grid-column: 2/3;
-}
-
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
@@ -622,19 +615,34 @@ ol li::before {
 
 #sign_in,
 #sign_up {
-  justify-items: center;
-  align-content: center;
-}
-#sign_in section,
-#sign_up section {
-  margin-top: -8rem;
-  width: min(24rem, 100%);
+  justify-content: center;
+  align-items: center;
 }
 #sign_in sm-form,
 #sign_up sm-form {
   margin: 2rem 0;
 }
 
+#sign_in {
+  display: grid;
+  padding-top: 0;
+  align-items: center;
+  align-content: center;
+  padding-bottom: 0;
+}
+#sign_in .illustration {
+  width: 100%;
+  height: auto;
+  background-color: #4d77ff;
+  border-radius: 1rem;
+}
+#sign_in section {
+  background-color: rgba(var(--foreground-color), 1);
+  padding: 2rem;
+  border-radius: 0.5rem;
+  margin-top: -2.3rem;
+}
+
 #sign_up .h2 {
   margin-bottom: 0.5rem;
 }
@@ -660,27 +668,44 @@ ol li::before {
 }
 
 #main_header {
-  padding: 1.5rem;
+  display: grid;
+  gap: 1.5rem;
+  padding: 1rem 1rem;
+  align-items: center;
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: 4rem;
+}
+
+.logged-in-user-id {
+  background-color: rgba(var(--text-color), 0.06);
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  padding: 0.4rem 0.8rem 0.4rem 0.5rem;
+  border-radius: 2rem;
+  font-weight: 500;
 }
 
 #main_card {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto 1fr;
+  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: 100%;
   transition: background-color 0.3s;
-  background-color: rgba(var(--foreground-color), 1);
+  background-color: rgba(var(--background-color), 1);
 }
 
 #main_navbar {
+  position: fixed;
   display: flex;
-  background: rgba(var(--text-color), 0.03);
-}
-#main_navbar.hide-away {
-  position: absolute;
+  justify-self: center;
+  margin: 0.5rem;
 }
 #main_navbar ul {
+  border-radius: 1rem;
+  background-color: rgba(var(--foreground-color), 1);
+  box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.15);
   display: flex;
   height: 100%;
   width: 100%;
@@ -700,7 +725,7 @@ ol li::before {
   padding: 0.5rem 0.3rem;
   color: var(--text-color);
   font-size: 0.8rem;
-  border-radius: 0.3rem;
+  border-radius: 0.7rem;
   font-weight: 500;
 }
 .nav-item .icon {
@@ -750,10 +775,12 @@ ol li::before {
 }
 
 .inner-page {
-  padding: 0 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0 1rem;
   flex: 1;
-  overflow-y: auto;
   align-content: start;
+  overflow-y: auto;
 }
 
 .password-field label {
@@ -799,55 +826,46 @@ ol li::before {
 }
 
 #wallet_cards_wrapper {
-  display: flex;
-  overflow-x: auto;
-  -ms-scroll-snap-type: x proximity;
-      scroll-snap-type: x proximity;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 }
 
 .balance-card {
-  scroll-snap-align: start;
-  padding: 1.5rem;
-  border-radius: 1rem;
-  width: min(16rem, 90%);
-  flex-shrink: 0;
-  color: rgba(0, 0, 0, 0.8);
+  display: grid;
+  gap: 1.5rem;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background-color: rgba(var(--foreground-color), 1);
 }
-.balance-card:not(:last-of-type) {
-  margin-right: 0.5rem;
-}
-.balance-card:nth-of-type(1) {
-  background: url("bg-art2.svg") no-repeat bottom right, #c2ffd7;
-  background-size: contain;
-}
-.balance-card:nth-of-type(1) .icon {
-  background-color: rgba(102, 255, 156, 0.5);
-}
-.balance-card:nth-of-type(2) {
-  background: url("back.svg") no-repeat bottom right, #fcffa8;
-  background-size: contain;
-}
-.balance-card:nth-of-type(2) .icon {
-  background-color: rgba(255, 234, 0, 0.5);
-}
-.balance-card > .flex {
-  margin-bottom: 0.3rem;
-}
-.balance-card > .flex .icon {
-  height: 2rem;
-  width: 2rem;
-  padding: 0.4rem;
-  border-radius: 0.3rem;
+.balance-card .asset-icon {
+  position: relative;
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 0.6rem;
+  border-radius: 1.1rem;
   fill: rgba(0, 0, 0, 0.8);
-  margin-right: 0.5rem;
+  margin-right: 0.8rem;
+}
+.balance-card.rupee-card .asset-icon {
+  background-color: hsl(141deg, 100%, 70%);
+}
+.balance-card.flo-card .asset-icon {
+  fill: white;
+  background-color: #4d77ff;
+}
+.balance-card.btc-card .asset-icon {
+  background-color: rgb(255, 173, 8);
 }
 
 #rupee_balance span:first-of-type,
-#flo_balance span:first-of-type {
-  font-size: 2rem;
+#flo_balance span:first-of-type,
+#btc_balance span:first-of-type {
+  font-size: 1.5rem;
 }
-#rupee_balance span:last-of-type,
-#flo_balance span:last-of-type {
+#rupee_balance span:nth-of-type(2),
+#flo_balance span:nth-of-type(2),
+#btc_balance span:nth-of-type(2) {
   font-size: 1rem;
 }
 
@@ -865,9 +883,9 @@ ol li::before {
 }
 .wallet-action .icon:first-of-type,
 .integrated-action-button .icon:first-of-type {
-  height: 2.5rem;
-  width: 2.5rem;
-  padding: 0.6rem;
+  height: 2.3rem;
+  width: 2.3rem;
+  padding: 0.5rem;
   fill: rgba(var(--foreground-color), 1);
   background-color: var(--accent-color);
   border-radius: 2rem;
@@ -885,14 +903,15 @@ ol li::before {
   font-weight: 500;
   font-size: 0.8rem;
   white-space: initial;
+  padding: 0.8rem;
 }
 .wallet-action .icon {
   margin-bottom: 0.8rem;
 }
 
 .integrated-action-button {
-  padding: 0.8rem 0;
-  justify-content: initial;
+  padding: 0;
+  justify-content: flex-start;
 }
 .integrated-action-button .icon:first-of-type {
   margin-right: 1rem;
@@ -936,29 +955,40 @@ ol li::before {
   fill: rgba(0, 0, 0, 0.8);
 }
 
+.remove-card-wrapper {
+  min-height: 2rem;
+}
+
+.receiver-card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border: none;
+}
+.receiver-card:not(:last-of-type) {
+  border-bottom: solid thin rgba(var(--text-color), 0.3);
+}
+
 #contacts {
   position: relative;
-  padding: 0;
-}
-#contacts .scrolling-wrapper {
-  padding: 0 1.5rem;
 }
 
 #saved_ids_list {
   display: grid;
+  gap: 0.5rem;
   grid-template-columns: minmax(0, 1fr);
-  padding-bottom: 5rem;
+  margin-bottom: 1.5rem;
 }
 
 .saved-id {
   grid-template-columns: auto 1fr;
   gap: 0 0.8rem;
-  border-radius: 0.3rem;
-  padding: 0.8rem 0;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
+  background-color: rgba(var(--foreground-color), 1);
 }
 .saved-id.highlight {
   box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
@@ -1002,6 +1032,12 @@ ol li::before {
   font-size: 0.8rem;
 }
 
+#saved_ids_tip {
+  background-color: rgba(var(--text-color), 0.03);
+  border-radius: 2rem;
+  padding: 0.5rem 0.8rem 0.5rem 0.5rem;
+}
+
 .card {
   background-color: rgba(var(--foreground-color), 1);
   border-radius: 0.5rem;
@@ -1084,7 +1120,7 @@ ol li::before {
   position: sticky;
   top: 0;
   padding: 0.2rem 0 0.5rem 0;
-  background-color: rgba(var(--foreground-color), 1);
+  background-color: rgba(var(--background-color), 1);
   z-index: 1;
   transition: background-color 0.3s;
 }
@@ -1153,7 +1189,7 @@ ol li::before {
 #payments_history {
   display: grid;
   gap: 2rem;
-  padding-bottom: 4rem;
+  margin-top: 1.5rem;
 }
 
 .transaction {
@@ -1205,6 +1241,76 @@ ol li::before {
   grid-area: 1/3/3/4;
 }
 
+.btc-tx {
+  grid-template-columns: auto 1fr auto;
+  gap: 0.5rem 1rem;
+  align-items: center;
+  grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
+}
+.btc-tx:not(:last-of-type) {
+  padding-bottom: 1rem;
+}
+.btc-tx__amount {
+  white-space: nowrap;
+}
+.btc-tx.out .icon {
+  fill: var(--danger-color);
+}
+.btc-tx.out .btc-tx__amount {
+  color: var(--danger-color);
+}
+.btc-tx.out .btc-tx__amount::before {
+  content: "- ";
+}
+.btc-tx.in .icon {
+  fill: var(--green);
+}
+.btc-tx.in .btc-tx__amount {
+  color: var(--green);
+}
+.btc-tx.in .btc-tx__amount::before {
+  content: "+ ";
+}
+.btc-tx.unconfirmed-tx {
+  grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed";
+}
+.btc-tx.unconfirmed-tx .icon {
+  fill: var(--yellow);
+}
+.btc-tx__icon {
+  grid-area: icon;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: rgba(var(--text-color), 0.03);
+  border-radius: 2rem;
+}
+.btc-tx__receiver {
+  grid-area: receiver;
+  font-weight: 500;
+}
+.btc-tx__time {
+  grid-area: time;
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+.btc-tx__amount {
+  grid-area: amount;
+  font-size: 1rem;
+  font-weight: 700;
+}
+.btc-tx__id {
+  grid-area: txid;
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+.btc-tx .unconfirmed-wrapper {
+  grid-area: unconfirmed;
+  padding: 0.5rem 0;
+}
+
 .fab {
   position: absolute;
   right: 0;
@@ -1221,11 +1327,8 @@ ol li::before {
 
 #add_address_button {
   border-radius: 0.5rem;
-  color: rgba(var(--background-color), 1);
-  background-color: var(--accent-color);
-}
-#add_address_button .icon {
-  fill: rgba(var(--background-color), 1);
+  background-color: transparent;
+  border: solid 0.1rem var(--accent-color);
 }
 
 .user-action-result__icon {
@@ -1291,7 +1394,7 @@ ol li::before {
   display: flex;
   gap: 1rem;
   align-items: center;
-  padding: 0.8rem 0;
+  padding: 1rem;
   border-radius: 0.3rem;
   background-color: rgba(var(--foreground-color), 1);
 }
@@ -1463,12 +1566,31 @@ ol li::before {
 }
 
 @media screen and (max-width: 40rem) {
+  .inner-page {
+    padding-bottom: 7rem;
+  }
+  #main_navbar {
+    bottom: 0.5rem;
+    justify-self: center;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+    background-color: rgba(var(--foreground-color), 0.9);
+    -webkit-backdrop-filter: blur(0.5rem);
+            backdrop-filter: blur(0.5rem);
+  }
   #main_navbar.hide-away {
     bottom: 0;
     left: 0;
     right: 0;
   }
-
+  .nav-item {
+    aspect-ratio: 1/1;
+    width: 4.5rem;
+  }
   .integrated-action-button .icon:last-of-type {
     margin-left: auto;
   }
@@ -1477,58 +1599,32 @@ ol li::before {
   sm-popup {
     --width: 24rem;
   }
-
-  .page-layout {
-    grid-template-columns: 1fr 90vw 1fr;
-  }
-
   .popup__header {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
-
   body {
     align-items: center;
     justify-content: center;
   }
-
-  #main_card {
-    height: calc(100vh - 2rem);
-    width: calc(100vw - 2rem);
-    grid-template-areas: "header" ".";
-    position: relative;
-    border-radius: 0.8rem;
-    overflow: hidden;
-    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
-  }
-  #main_card:not(.nav-hidden) {
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: "nav header" "nav .";
-  }
-
   #main_header {
-    grid-area: header;
+    padding: 1rem 4vw;
+    background-color: rgba(var(--foreground-color), 1);
   }
-
   #main_navbar {
-    grid-area: nav;
-    border-top: none;
-    flex-direction: column;
-    height: calc(100% - 1rem);
-    margin: 0.5rem;
-    border-radius: 0.5rem;
-    background-color: rgba(37, 110, 255, 0.03);
+    margin: 1rem;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    justify-content: center;
   }
   #main_navbar ul {
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.3rem;
+    align-self: center;
+    height: auto;
   }
-  #main_navbar ul li:last-of-type {
-    margin-top: auto;
-  }
-
   .nav-item {
     aspect-ratio: 1/1;
   }
@@ -1539,24 +1635,24 @@ ol li::before {
     border-radius: 0 1rem 1rem 0;
     bottom: auto;
   }
-
   .card {
     padding: 1.5rem;
   }
-
+  .balance-card {
+    padding: 1.5rem;
+    border-radius: 1rem;
+  }
+  #contact > * {
+    padding: 1rem 12vw;
+  }
+  #contact > :last-child {
+    padding: 0.5rem 12vw;
+  }
   #saved_ids_list {
-    gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   }
-
-  body[data-theme=dark] #main_navbar {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-}
-@media screen and (min-width: 56rem) {
-  #main_card {
-    width: 56rem;
-    height: min(90vh, 48rem);
+  .inner-page {
+    padding: 1.5rem 18vw;
   }
 }
 @media (any-hover: hover) {
@@ -1564,7 +1660,6 @@ ol li::before {
     width: 0.5rem;
     height: 0.5rem;
   }
-
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
@@ -1572,14 +1667,12 @@ ol li::before {
   ::-webkit-scrollbar-thumb:hover {
     background: rgba(var(--text-color), 0.5);
   }
-
   .interact:not([disabled]) {
     transition: background-color 0.3s;
   }
   .interact:not([disabled]):hover {
     background-color: rgba(var(--text-color), 0.06);
   }
-
   button:not([disabled]),
 .button:not([disabled]) {
     transition: background-color 0.3s, filter 0.3s;
diff --git a/css/main.min.css b/css/main.min.css
index ec23079..90932fc 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #4d77ff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #a0b6ff;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}h1,h1>*,h2,h2>*,h3,h3>*,h4,h4>*,h5,h5>*,h6,h6>*{font-weight:400;font-family:"Calistoga",cursive}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.warning{line-height:normal;padding:1rem;background-color:khaki;border-radius:.5rem;font-weight:500;color:rgba(0,0,0,.7)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .6rem}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{--padding: 0.8rem;font-size:.9rem}sm-option{font-size:.9rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul,ol{list-style:none}ol{counter-reset:item}ol li{position:relative;display:flex;align-items:flex-start;counter-increment:item}ol li:not(:last-of-type){padding-bottom:1.5rem}ol li:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:calc(100% - 2.2rem);background:var(--accent-color);margin-left:.7rem;margin-top:2rem}ol li::before{content:counter(item);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;font-weight:500;margin-top:.15rem;margin-right:1rem;line-height:1;width:1.5rem;height:1.5rem;border-radius:100%;flex-shrink:0;color:rgba(var(--text-color), 0.8);background:rgba(var(--text-color), 0.1)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.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-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);font-weight:500;margin-bottom:.2rem}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page__header{display:flex;justify-content:space-between;margin-bottom:1.5rem;min-height:8rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.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:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem}.flo-icon{margin-right:.3rem;height:1.5rem;width:1.5rem}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{color:rgba(var(--text-color), 0.8)}#flo_id_warning{padding-bottom:1.5rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}#flo_id_warning .icon{height:4rem;width:4rem;padding:1rem;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8);margin-bottom:1.5rem}#main_header{padding:1.5rem}#main_card{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto 1fr;height:100%;width:100%;transition:background-color .3s;background-color:rgba(var(--foreground-color), 1)}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.badge{display:flex;align-items:center;justify-content:center;content:attr(data-notifications);position:absolute;top:0;right:0;font-size:.8rem;padding:.3rem;background:var(--danger-color);color:rgba(var(--background-color), 1);aspect-ratio:1/1;font-weight:700;border-radius:.3rem;margin:.3rem}.inner-page{padding:0 1.5rem;flex:1;overflow-y:auto;align-content:start}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.scrolling-wrapper{overflow-y:auto}#home{display:flex;flex-direction:column;position:relative}#home>*{margin-bottom:2rem}#user,#cashier{position:relative;padding-bottom:1rem;align-content:flex-start}#wallet_cards_wrapper{display:flex;overflow-x:auto;-ms-scroll-snap-type:x proximity;scroll-snap-type:x proximity}.balance-card{scroll-snap-align:start;padding:1.5rem;border-radius:1rem;width:min(16rem,90%);flex-shrink:0;color:rgba(0,0,0,.8)}.balance-card:not(:last-of-type){margin-right:.5rem}.balance-card:nth-of-type(1){background:url("bg-art2.svg") no-repeat bottom right,#c2ffd7;background-size:contain}.balance-card:nth-of-type(1) .icon{background-color:rgba(102,255,156,.5)}.balance-card:nth-of-type(2){background:url("back.svg") no-repeat bottom right,#fcffa8;background-size:contain}.balance-card:nth-of-type(2) .icon{background-color:rgba(255,234,0,.5)}.balance-card>.flex{margin-bottom:.3rem}.balance-card>.flex .icon{height:2rem;width:2rem;padding:.4rem;border-radius:.3rem;fill:rgba(0,0,0,.8);margin-right:.5rem}#rupee_balance span:first-of-type,#flo_balance span:first-of-type{font-size:2rem}#rupee_balance span:last-of-type,#flo_balance span:last-of-type{font-size:1rem}.actions-wrapper{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.wallet-action,.integrated-action-button{position:relative;color:inherit;font-weight:500}.wallet-action .icon:first-of-type,.integrated-action-button .icon:first-of-type{height:2.5rem;width:2.5rem;padding:.6rem;fill:rgba(var(--foreground-color), 1);background-color:var(--accent-color);border-radius:2rem}.wallet-action .badge,.integrated-action-button .badge{left:0;right:auto}.wallet-action{flex-direction:column;text-align:center;align-items:center;font-weight:500;font-size:.8rem;white-space:initial}.wallet-action .icon{margin-bottom:.8rem}.integrated-action-button{padding:.8rem 0;justify-content:initial}.integrated-action-button .icon:first-of-type{margin-right:1rem}.integrated-action-button .icon:last-of-type{margin-left:.5rem}.cashier-status{font-size:.9rem;padding:1rem 1.2rem;border-radius:1rem;background-color:rgba(240,230,140,.8);color:rgba(0,0,0,.8)}.cashier-status .icon{fill:rgba(0,0,0,.8)}#topup_wallet__qr_code{background-color:rgba(var(--text-color), 0.03);border-radius:.5rem;height:10rem;justify-self:flex-start;width:10rem}#topup_wallet__qr_code svg{width:100%;height:100%;fill:rgba(var(--text-color), 1)}#cashier_status{font-size:.9rem;padding:1rem 1.2rem;border-radius:1rem;background-color:rgba(240,230,140,.8);color:rgba(0,0,0,.8)}#cashier_status .icon{fill:rgba(0,0,0,.8)}#contacts{position:relative;padding:0}#contacts .scrolling-wrapper{padding:0 1.5rem}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);padding-bottom:5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;padding:.8rem 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{grid-area:1/1/3/2;padding:.3rem;position:relative}.saved-id .edit-saved .icon{position:absolute;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.saved-id__title{align-self:flex-end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.saved-id__flo-id{font-size:.8rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#contact{display:grid;grid-template-rows:auto 1fr auto;padding:0;height:100%}#contact>*{padding:1rem 1.5rem}#contact>:first-child{padding-top:0}#contact>:last-child{padding:.5rem 1.5rem;border-top:solid thin rgba(var(--text-color), 0.2)}#contact>:last-child button{padding:.8rem 2rem;border-radius:1rem;color:var(--accent-color);background-color:rgba(var(--text-color), 0.03)}#contact__transactions{position:relative;display:grid;gap:.5rem;overflow-y:auto;flex:1;padding:0 max(1rem,8vw) 1rem max(1rem,8vw);align-content:flex-start}#contact__transactions sm-spinner{position:absolute;justify-self:center;align-self:center}.transaction-message{background-color:rgba(var(--text-color), 0.06);padding:1rem;border-radius:.5rem;justify-self:flex-start;border-radius:0 1rem 1rem 1rem;gap:.5rem}.transaction-message.received{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.transaction-message.received+.transaction-message.received{border-radius:1rem}.transaction-message.sent{margin-left:auto;justify-self:flex-end;border-radius:1rem 1rem 0 1rem;text-align:right}.transaction-message__amount{font-size:1.2rem}.transaction-message__time{opacity:.8;font-size:.8rem}#history .page__header{margin-bottom:0}#history_applied_filters_wrapper{position:-webkit-sticky;position:sticky;top:0;padding:.2rem 0 .5rem 0;background-color:rgba(var(--foreground-color), 1);z-index:1;transition:background-color .3s}.applied-filter{display:flex;align-items:center;padding:.5rem .6rem .5rem .8rem;border-radius:1rem;border:solid thin rgba(var(--text-color), 0.2);text-transform:uppercase;font-size:.8rem;font-weight:500;letter-spacing:.08em}.applied-filter button{padding:.6rem}.applied-filter .icon{margin-left:.3rem}.category-chip{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .5rem;border-radius:.3rem;font-size:.8rem;border:solid thin rgba(var(--text-color), 0.2);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.category-chip:focus{outline:solid var(--accent-color)}.category-chip input{display:none}.category-chip span{transition:transform .2s;transform:translateX(-0.8rem)}.category-chip .icon{opacity:0;transition:opacity .2s,transform .2s;margin-right:.3rem;fill:var(--accent-color);transform:translateX(0.5rem)}.category-chip input:checked~.icon{opacity:1;transform:translateX(0)}.category-chip input:checked~span{color:var(--accent-color);transform:translateX(0)}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center}.transaction__amount{white-space:nowrap}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-weight:500}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#add_address_button{border-radius:.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color)}#add_address_button .icon{fill:rgba(var(--background-color), 1)}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:2rem;-webkit-animation:popup 1s;animation:popup 1s}.user-action-result__icon.success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem 0;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1)}.cashier-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:.5rem}.cashier-request__mode,.payment-request__mode{text-align:center;width:2rem;font-size:.8rem}.cashier-request__time,.payment-request__time{font-size:.8rem}.cashier-request{display:grid;gap:.5rem 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"mode details status" "mode . status"}.cashier-request__mode{grid-area:mode}.cashier-request__details{grid-area:details;font-weight:700}.cashier-request__status,.cashier-request__requestor{font-size:.8rem}.cashier-request__status{grid-area:status;grid-column:3/4;grid-row:1/3}#payment_request_history{padding-bottom:3rem}.payment-request{display:grid;gap:.5rem 1rem;grid-template-columns:1fr auto;color:rgba(var(--text-color), 1)}.payment-request__requestor{font-weight:500}.payment-request__amount{font-weight:700;text-align:right}.payment-request__status{display:flex;align-items:center;font-size:.8rem;text-transform:capitalize}.payment-request__status .icon{height:1rem;width:1rem;margin-left:.3rem}.payment-request .icon.paid{fill:var(--green)}.payment-request .icon.declined{fill:var(--danger-color)}.payment-request .button{background-color:transparent;padding:.6rem .8rem;color:var(--accent-color);background-color:rgba(var(--foreground-color), 1)}.wallet-request{display:grid;gap:.5rem 1rem;padding:.5rem 0;border-radius:.5rem;grid-template-columns:auto 1fr}.wallet-request:not(.rejected,.pending).withdrawn .wallet-request__amount::before{content:"- "}.wallet-request:not(.rejected,.pending).added .wallet-request__amount{color:var(--green)}.wallet-request:not(.rejected,.pending).added .wallet-request__amount::before{content:"+ "}.wallet-request .icon.pending{fill:var(--yellow)}.wallet-request .icon.failed{fill:var(--danger-color)}.wallet-request__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.06)}.wallet-request__icon .icon{fill:var(--accent-color)}.wallet-request__details{font-weight:500}.wallet-request__details,.wallet-request__amount{color:rgba(var(--text-color), 1)}.wallet-request__amount{font-weight:700}.wallet-request__time,.wallet-request__status{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.wallet-request__status{text-align:right}.wallet-request__status .icon{margin-left:.3rem}#transaction__amount{font-size:2.5rem;font-weight:700}#transaction__remark,#transaction__note{line-height:1.6;justify-self:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:.8rem}#transaction__note .icon{fill:var(--danger-color);margin-right:.5rem}#saved_upi_ids_list{display:grid;gap:.5rem;width:min(24rem,100%)}.saved-upi{display:flex;justify-content:space-between;align-items:center;padding:.4rem .4rem .4rem 1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03)}@media screen and (max-width: 40rem){#main_navbar.hide-away{bottom:0;left:0;right:0}.integrated-action-button .icon:last-of-type{margin-left:auto}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_card{height:calc(100vh - 2rem);width:calc(100vw - 2rem);grid-template-areas:"header" ".";position:relative;border-radius:.8rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_card:not(.nav-hidden){grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:calc(100% - 1rem);margin:.5rem;border-radius:.5rem;background-color:rgba(37,110,255,.03)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}.card{padding:1.5rem}#saved_ids_list{gap:1rem;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr))}body[data-theme=dark] #main_navbar{background-color:rgba(0,0,0,.2)}}@media screen and (min-width: 56rem){#main_card{width:56rem;height:min(90vh,48rem)}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button:not([disabled]),.button:not([disabled]){transition:background-color .3s,filter .3s}button:not([disabled]):hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #4d77ff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #a0b6ff;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}h1,h1>*,h2,h2>*,h3,h3>*,h4,h4>*,h5,h5>*,h6,h6>*{font-weight:400;font-family:"Calistoga",cursive}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.warning{line-height:normal;padding:1rem;background-color:khaki;border-radius:.5rem;font-weight:500;color:rgba(0,0,0,.7)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center;color:inherit}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{color:var(--accent-color);background-color:rgba(var(--text-color), 0.06)}.button .icon{fill:var(--accent-color)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .6rem}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{--padding: 0.8rem;font-size:.9rem}sm-option{font-size:.9rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}ul,ol{list-style:none}ol{counter-reset:item}ol li{position:relative;display:flex;align-items:flex-start;counter-increment:item}ol li:not(:last-of-type){padding-bottom:1.5rem}ol li:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:calc(100% - 2.2rem);background:var(--accent-color);margin-left:.7rem;margin-top:2rem}ol li::before{content:counter(item);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;font-weight:500;margin-top:.15rem;margin-right:1rem;line-height:1;width:1.5rem;height:1.5rem;border-radius:100%;flex-shrink:0;color:rgba(var(--text-color), 0.8);background:rgba(var(--text-color), 0.1)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.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-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);font-weight:500;margin-bottom:.2rem}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page__header{display:flex;justify-content:space-between;margin-bottom:1.5rem;min-height:5rem}.page__header .grid{margin-top:auto}.page__header h1{font-size:2rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.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:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem}.flo-icon{margin-right:.3rem;height:1.5rem;width:1.5rem}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-content:center;align-items:center}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in{display:grid;padding-top:0;align-items:center;align-content:center;padding-bottom:0}#sign_in .illustration{width:100%;height:auto;background-color:#4d77ff;border-radius:1rem}#sign_in section{background-color:rgba(var(--foreground-color), 1);padding:2rem;border-radius:.5rem;margin-top:-2.3rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{color:rgba(var(--text-color), 0.8)}#flo_id_warning{padding-bottom:1.5rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}#flo_id_warning .icon{height:4rem;width:4rem;padding:1rem;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8);margin-bottom:1.5rem}#main_header{display:grid;gap:1.5rem;padding:1rem 1rem;align-items:center;grid-template-columns:minmax(0, 1fr) auto;min-height:4rem}.logged-in-user-id{background-color:rgba(var(--text-color), 0.06);max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;padding:.4rem .8rem .4rem .5rem;border-radius:2rem;font-weight:500}#main_card{position:relative;display:flex;flex-direction:column;height:100%;width:100%;transition:background-color .3s;background-color:rgba(var(--background-color), 1)}#main_navbar{position:fixed;display:flex;justify-self:center;margin:.5rem}#main_navbar ul{border-radius:1rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 .8rem 3rem rgba(0,0,0,.15);display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.7rem;font-weight:500}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.badge{display:flex;align-items:center;justify-content:center;content:attr(data-notifications);position:absolute;top:0;right:0;font-size:.8rem;padding:.3rem;background:var(--danger-color);color:rgba(var(--background-color), 1);aspect-ratio:1/1;font-weight:700;border-radius:.3rem;margin:.3rem}.inner-page{display:flex;flex-direction:column;padding:0 1rem;flex:1;align-content:start;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.scrolling-wrapper{overflow-y:auto}#home{display:flex;flex-direction:column;position:relative}#home>*{margin-bottom:2rem}#user,#cashier{position:relative;padding-bottom:1rem;align-content:flex-start}#wallet_cards_wrapper{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr))}.balance-card{display:grid;gap:1.5rem;border-radius:.5rem;padding:1rem;background-color:rgba(var(--foreground-color), 1)}.balance-card .asset-icon{position:relative;height:2.5rem;width:2.5rem;padding:.6rem;border-radius:1.1rem;fill:rgba(0,0,0,.8);margin-right:.8rem}.balance-card.rupee-card .asset-icon{background-color:#66ff9c}.balance-card.flo-card .asset-icon{fill:#fff;background-color:#4d77ff}.balance-card.btc-card .asset-icon{background-color:#ffad08}#rupee_balance span:first-of-type,#flo_balance span:first-of-type,#btc_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:nth-of-type(2),#flo_balance span:nth-of-type(2),#btc_balance span:nth-of-type(2){font-size:1rem}.actions-wrapper{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.wallet-action,.integrated-action-button{position:relative;color:inherit;font-weight:500}.wallet-action .icon:first-of-type,.integrated-action-button .icon:first-of-type{height:2.3rem;width:2.3rem;padding:.5rem;fill:rgba(var(--foreground-color), 1);background-color:var(--accent-color);border-radius:2rem}.wallet-action .badge,.integrated-action-button .badge{left:0;right:auto}.wallet-action{flex-direction:column;text-align:center;align-items:center;font-weight:500;font-size:.8rem;white-space:initial;padding:.8rem}.wallet-action .icon{margin-bottom:.8rem}.integrated-action-button{padding:0;justify-content:flex-start}.integrated-action-button .icon:first-of-type{margin-right:1rem}.integrated-action-button .icon:last-of-type{margin-left:.5rem}.cashier-status{font-size:.9rem;padding:1rem 1.2rem;border-radius:1rem;background-color:rgba(240,230,140,.8);color:rgba(0,0,0,.8)}.cashier-status .icon{fill:rgba(0,0,0,.8)}#topup_wallet__qr_code{background-color:rgba(var(--text-color), 0.03);border-radius:.5rem;height:10rem;justify-self:flex-start;width:10rem}#topup_wallet__qr_code svg{width:100%;height:100%;fill:rgba(var(--text-color), 1)}#cashier_status{font-size:.9rem;padding:1rem 1.2rem;border-radius:1rem;background-color:rgba(240,230,140,.8);color:rgba(0,0,0,.8)}#cashier_status .icon{fill:rgba(0,0,0,.8)}.remove-card-wrapper{min-height:2rem}.receiver-card{display:grid;gap:.5rem;padding:.5rem 0;border:none}.receiver-card:not(:last-of-type){border-bottom:solid thin rgba(var(--text-color), 0.3)}#contacts{position:relative}#saved_ids_list{display:grid;gap:.5rem;grid-template-columns:minmax(0, 1fr);margin-bottom:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.5rem;padding:.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:rgba(var(--foreground-color), 1)}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{grid-area:1/1/3/2;padding:.3rem;position:relative}.saved-id .edit-saved .icon{position:absolute;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.saved-id__title{align-self:flex-end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.saved-id__flo-id{font-size:.8rem}#saved_ids_tip{background-color:rgba(var(--text-color), 0.03);border-radius:2rem;padding:.5rem .8rem .5rem .5rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#contact{display:grid;grid-template-rows:auto 1fr auto;padding:0;height:100%}#contact>*{padding:1rem 1.5rem}#contact>:first-child{padding-top:0}#contact>:last-child{padding:.5rem 1.5rem;border-top:solid thin rgba(var(--text-color), 0.2)}#contact>:last-child button{padding:.8rem 2rem;border-radius:1rem;color:var(--accent-color);background-color:rgba(var(--text-color), 0.03)}#contact__transactions{position:relative;display:grid;gap:.5rem;overflow-y:auto;flex:1;padding:0 max(1rem,8vw) 1rem max(1rem,8vw);align-content:flex-start}#contact__transactions sm-spinner{position:absolute;justify-self:center;align-self:center}.transaction-message{background-color:rgba(var(--text-color), 0.06);padding:1rem;border-radius:.5rem;justify-self:flex-start;border-radius:0 1rem 1rem 1rem;gap:.5rem}.transaction-message.received{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.transaction-message.received+.transaction-message.received{border-radius:1rem}.transaction-message.sent{margin-left:auto;justify-self:flex-end;border-radius:1rem 1rem 0 1rem;text-align:right}.transaction-message__amount{font-size:1.2rem}.transaction-message__time{opacity:.8;font-size:.8rem}#history .page__header{margin-bottom:0}#history_applied_filters_wrapper{position:-webkit-sticky;position:sticky;top:0;padding:.2rem 0 .5rem 0;background-color:rgba(var(--background-color), 1);z-index:1;transition:background-color .3s}.applied-filter{display:flex;align-items:center;padding:.5rem .6rem .5rem .8rem;border-radius:1rem;border:solid thin rgba(var(--text-color), 0.2);text-transform:uppercase;font-size:.8rem;font-weight:500;letter-spacing:.08em}.applied-filter button{padding:.6rem}.applied-filter .icon{margin-left:.3rem}.category-chip{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .5rem;border-radius:.3rem;font-size:.8rem;border:solid thin rgba(var(--text-color), 0.2);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.category-chip:focus{outline:solid var(--accent-color)}.category-chip input{display:none}.category-chip span{transition:transform .2s;transform:translateX(-0.8rem)}.category-chip .icon{opacity:0;transition:opacity .2s,transform .2s;margin-right:.3rem;fill:var(--accent-color);transform:translateX(0.5rem)}.category-chip input:checked~.icon{opacity:1;transform:translateX(0)}.category-chip input:checked~span{color:var(--accent-color);transform:translateX(0)}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem;margin-top:1.5rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center}.transaction__amount{white-space:nowrap}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-weight:500}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.btc-tx{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;grid-template-areas:"icon time amount" "icon receiver receiver" "icon txid txid"}.btc-tx:not(:last-of-type){padding-bottom:1rem}.btc-tx__amount{white-space:nowrap}.btc-tx.out .icon{fill:var(--danger-color)}.btc-tx.out .btc-tx__amount{color:var(--danger-color)}.btc-tx.out .btc-tx__amount::before{content:"- "}.btc-tx.in .icon{fill:var(--green)}.btc-tx.in .btc-tx__amount{color:var(--green)}.btc-tx.in .btc-tx__amount::before{content:"+ "}.btc-tx.unconfirmed-tx{grid-template-areas:"icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed"}.btc-tx.unconfirmed-tx .icon{fill:var(--yellow)}.btc-tx__icon{grid-area:icon;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.btc-tx__receiver{grid-area:receiver;font-weight:500}.btc-tx__time{grid-area:time;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.btc-tx__amount{grid-area:amount;font-size:1rem;font-weight:700}.btc-tx__id{grid-area:txid;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.btc-tx .unconfirmed-wrapper{grid-area:unconfirmed;padding:.5rem 0}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#add_address_button{border-radius:.5rem;background-color:rgba(0,0,0,0);border:solid .1rem var(--accent-color)}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:2rem;-webkit-animation:popup 1s;animation:popup 1s}.user-action-result__icon.success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1)}.cashier-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:.5rem}.cashier-request__mode,.payment-request__mode{text-align:center;width:2rem;font-size:.8rem}.cashier-request__time,.payment-request__time{font-size:.8rem}.cashier-request{display:grid;gap:.5rem 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"mode details status" "mode . status"}.cashier-request__mode{grid-area:mode}.cashier-request__details{grid-area:details;font-weight:700}.cashier-request__status,.cashier-request__requestor{font-size:.8rem}.cashier-request__status{grid-area:status;grid-column:3/4;grid-row:1/3}#payment_request_history{padding-bottom:3rem}.payment-request{display:grid;gap:.5rem 1rem;grid-template-columns:1fr auto;color:rgba(var(--text-color), 1)}.payment-request__requestor{font-weight:500}.payment-request__amount{font-weight:700;text-align:right}.payment-request__status{display:flex;align-items:center;font-size:.8rem;text-transform:capitalize}.payment-request__status .icon{height:1rem;width:1rem;margin-left:.3rem}.payment-request .icon.paid{fill:var(--green)}.payment-request .icon.declined{fill:var(--danger-color)}.payment-request .button{background-color:rgba(0,0,0,0);padding:.6rem .8rem;color:var(--accent-color);background-color:rgba(var(--foreground-color), 1)}.wallet-request{display:grid;gap:.5rem 1rem;padding:.5rem 0;border-radius:.5rem;grid-template-columns:auto 1fr}.wallet-request:not(.rejected,.pending).withdrawn .wallet-request__amount::before{content:"- "}.wallet-request:not(.rejected,.pending).added .wallet-request__amount{color:var(--green)}.wallet-request:not(.rejected,.pending).added .wallet-request__amount::before{content:"+ "}.wallet-request .icon.pending{fill:var(--yellow)}.wallet-request .icon.failed{fill:var(--danger-color)}.wallet-request__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.06)}.wallet-request__icon .icon{fill:var(--accent-color)}.wallet-request__details{font-weight:500}.wallet-request__details,.wallet-request__amount{color:rgba(var(--text-color), 1)}.wallet-request__amount{font-weight:700}.wallet-request__time,.wallet-request__status{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.wallet-request__status{text-align:right}.wallet-request__status .icon{margin-left:.3rem}#transaction__amount{font-size:2.5rem;font-weight:700}#transaction__remark,#transaction__note{line-height:1.6;justify-self:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:.8rem}#transaction__note .icon{fill:var(--danger-color);margin-right:.5rem}#saved_upi_ids_list{display:grid;gap:.5rem;width:min(24rem,100%)}.saved-upi{display:flex;justify-content:space-between;align-items:center;padding:.4rem .4rem .4rem 1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03)}@media screen and (max-width: 40rem){.inner-page{padding-bottom:7rem}#main_navbar{bottom:.5rem;justify-self:center;margin:0 auto;left:0;right:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;background-color:rgba(var(--foreground-color), 0.9);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}#main_navbar.hide-away{bottom:0;left:0;right:0}.nav-item{aspect-ratio:1/1;width:4.5rem}.integrated-action-button .icon:last-of-type{margin-left:auto}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_header{padding:1rem 4vw;background-color:rgba(var(--foreground-color), 1)}#main_navbar{margin:1rem;left:0;top:0;bottom:0;justify-content:center}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem;align-self:center;height:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}.card{padding:1.5rem}.balance-card{padding:1.5rem;border-radius:1rem}#contact>*{padding:1rem 12vw}#contact>:last-child{padding:.5rem 12vw}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr))}.inner-page{padding:1.5rem 18vw}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button:not([disabled]),.button:not([disabled]){transition:background-color .3s,filter .3s}button:not([disabled]):hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 89869f2..210e01e 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -94,7 +94,6 @@ button {
   border: none;
   background-color: transparent;
   overflow: hidden;
-  color: inherit;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   font-size: 0.9rem;
@@ -103,6 +102,7 @@ button {
   padding: 0.8rem;
   border-radius: 0.3rem;
   justify-content: center;
+  color: inherit;
   &:focus-visible {
     outline: var(--accent-color) solid medium;
   }
@@ -111,7 +111,11 @@ button {
   }
 }
 .button {
+  color: var(--accent-color);
   background-color: rgba(var(--text-color), 0.06);
+  .icon {
+    fill: var(--accent-color);
+  }
   &--primary,
   &--danger {
     color: rgba(var(--background-color), 1) !important;
@@ -278,7 +282,7 @@ ol {
   text-overflow: ellipsis;
 }
 
-.breakable {
+.wrap-around {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -470,6 +474,9 @@ ol {
     background-color: var(--accent-color);
   }
 }
+.margin-right-0-3 {
+  margin-right: 0.3rem;
+}
 .margin-right-0-5 {
   margin-right: 0.5rem;
 }
@@ -493,25 +500,15 @@ ol {
     display: flex;
     justify-content: space-between;
     margin-bottom: 1.5rem;
-    min-height: 8rem;
+    min-height: 5rem;
     .grid {
       margin-top: auto;
     }
     h1 {
-      margin-top: auto;
       font-size: 2rem;
     }
   }
 }
-.page-layout {
-  display: grid;
-  gap: 1.5rem 0;
-  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
-  align-content: flex-start;
-  & > * {
-    grid-column: 2/3;
-  }
-}
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
@@ -577,16 +574,31 @@ ol {
 
 #sign_in,
 #sign_up {
-  justify-items: center;
-  align-content: center;
-  section {
-    margin-top: -8rem;
-    width: min(24rem, 100%);
-  }
+  justify-content: center;
+  align-items: center;
   sm-form {
     margin: 2rem 0;
   }
 }
+#sign_in {
+  display: grid;
+  padding-top: 0;
+  align-items: center;
+  align-content: center;
+  padding-bottom: 0;
+  .illustration {
+    width: 100%;
+    height: auto;
+    background-color: #4d77ff;
+    border-radius: 1rem;
+  }
+  section {
+    background-color: rgba(var(--foreground-color), 1);
+    padding: 2rem;
+    border-radius: 0.5rem;
+    margin-top: -2.3rem;
+  }
+}
 #sign_up {
   .h2 {
     margin-bottom: 0.5rem;
@@ -612,25 +624,39 @@ ol {
   }
 }
 #main_header {
-  padding: 1.5rem;
+  display: grid;
+  gap: 1.5rem;
+  padding: 1rem 1rem;
+  align-items: center;
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: 4rem;
+}
+.logged-in-user-id {
+  background-color: rgba(var(--text-color), 0.06);
+  max-width: fit-content;
+  padding: 0.4rem 0.8rem 0.4rem 0.5rem;
+  border-radius: 2rem;
+  font-weight: 500;
 }
 #main_card {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto 1fr;
+  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: 100%;
   transition: background-color 0.3s;
-  background-color: rgba(var(--foreground-color), 1);
+  background-color: rgba(var(--background-color), 1);
 }
 
 #main_navbar {
+  position: fixed;
   display: flex;
-  background: rgba(var(--text-color), 0.03);
-  &.hide-away {
-    position: absolute;
-  }
+  justify-self: center;
+  margin: 0.5rem;
   ul {
+    border-radius: 1rem;
+    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0 0.8rem 3rem rgba(0 0 0/ 0.15);
     display: flex;
     height: 100%;
     width: 100%;
@@ -650,7 +676,7 @@ ol {
   padding: 0.5rem 0.3rem;
   color: var(--text-color);
   font-size: 0.8rem;
-  border-radius: 0.3rem;
+  border-radius: 0.7rem;
   font-weight: 500;
   .icon {
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -699,10 +725,12 @@ ol {
   margin: 0.3rem;
 }
 .inner-page {
-  padding: 0 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0 1rem;
   flex: 1;
-  overflow-y: auto;
   align-content: start;
+  overflow-y: auto;
 }
 
 .password-field {
@@ -745,52 +773,49 @@ ol {
   align-content: flex-start;
 }
 #wallet_cards_wrapper {
-  display: flex;
-  overflow-x: auto;
-  scroll-snap-type: x proximity;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 }
 .balance-card {
-  scroll-snap-align: start;
-  padding: 1.5rem;
-  border-radius: 1rem;
-  width: min(16rem, 90%);
-  flex-shrink: 0;
-  color: rgba(0, 0, 0, 0.8);
-  &:not(:last-of-type) {
-    margin-right: 0.5rem;
+  display: grid;
+  gap: 1.5rem;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background-color: rgba(var(--foreground-color), 1);
+  .asset-icon {
+    position: relative;
+    height: 2.5rem;
+    width: 2.5rem;
+    padding: 0.6rem;
+    border-radius: 1.1rem;
+    fill: rgba(0, 0, 0, 0.8);
+    margin-right: 0.8rem;
   }
-  &:nth-of-type(1) {
-    background: url("bg-art2.svg") no-repeat bottom right, hsl(141, 100%, 88%);
-    background-size: contain;
-    .icon {
-      background-color: hsla(141, 100%, 70%, 0.5);
+  &.rupee-card {
+    .asset-icon {
+      background-color: hsla(141, 100%, 70%);
     }
   }
-  &:nth-of-type(2) {
-    background: url("back.svg") no-repeat bottom right, hsl(62, 100%, 83%);
-    background-size: contain;
-    .icon {
-      background-color: hsla(55, 100%, 50%, 0.5);
+  &.flo-card {
+    .asset-icon {
+      fill: white;
+      background-color: #4d77ff;
     }
   }
-  & > .flex {
-    margin-bottom: 0.3rem;
-    .icon {
-      height: 2rem;
-      width: 2rem;
-      padding: 0.4rem;
-      border-radius: 0.3rem;
-      fill: rgba(0, 0, 0, 0.8);
-      margin-right: 0.5rem;
+  &.btc-card {
+    .asset-icon {
+      background-color: rgba(255, 173, 8);
     }
   }
 }
 #rupee_balance,
-#flo_balance {
+#flo_balance,
+#btc_balance {
   span:first-of-type {
-    font-size: 2rem;
+    font-size: 1.5rem;
   }
-  span:last-of-type {
+  span:nth-of-type(2) {
     font-size: 1rem;
   }
 }
@@ -805,9 +830,9 @@ ol {
   color: inherit;
   font-weight: 500;
   .icon:first-of-type {
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0.6rem;
+    height: 2.3rem;
+    width: 2.3rem;
+    padding: 0.5rem;
     fill: rgba(var(--foreground-color), 1);
     background-color: var(--accent-color);
     border-radius: 2rem;
@@ -824,13 +849,14 @@ ol {
   font-weight: 500;
   font-size: 0.8rem;
   white-space: initial;
+  padding: 0.8rem;
   .icon {
     margin-bottom: 0.8rem;
   }
 }
 .integrated-action-button {
-  padding: 0.8rem 0;
-  justify-content: initial;
+  padding: 0;
+  justify-content: flex-start;
   .icon:first-of-type {
     margin-right: 1rem;
   }
@@ -870,25 +896,35 @@ ol {
     fill: rgba(0, 0, 0, 0.8);
   }
 }
+.remove-card-wrapper {
+  min-height: 2rem;
+}
+.receiver-card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border: none;
+  &:not(:last-of-type) {
+    border-bottom: solid thin rgba(var(--text-color), 0.3);
+  }
+}
 
 #contacts {
   position: relative;
-  padding: 0;
-  .scrolling-wrapper {
-    padding: 0 1.5rem;
-  }
 }
 #saved_ids_list {
   display: grid;
+  gap: 0.5rem;
   grid-template-columns: minmax(0, 1fr);
-  padding-bottom: 5rem;
+  margin-bottom: 1.5rem;
 }
 .saved-id {
   grid-template-columns: auto 1fr;
   gap: 0 0.8rem;
-  border-radius: 0.3rem;
-  padding: 0.8rem 0;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
   user-select: none;
+  background-color: rgba(var(--foreground-color), 1);
   &.highlight {
     box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
   }
@@ -931,6 +967,11 @@ ol {
     font-size: 0.8rem;
   }
 }
+#saved_ids_tip {
+  background-color: rgba(var(--text-color), 0.03);
+  border-radius: 2rem;
+  padding: 0.5rem 0.8rem 0.5rem 0.5rem;
+}
 
 .card {
   background-color: rgba(var(--foreground-color), 1);
@@ -1012,7 +1053,7 @@ ol {
   position: sticky;
   top: 0;
   padding: 0.2rem 0 0.5rem 0;
-  background-color: rgba(var(--foreground-color), 1);
+  background-color: rgba(var(--background-color), 1);
   z-index: 1;
   transition: background-color 0.3s;
 }
@@ -1078,7 +1119,7 @@ ol {
 #payments_history {
   display: grid;
   gap: 2rem;
-  padding-bottom: 4rem;
+  margin-top: 1.5rem;
 }
 .transaction {
   grid-template-columns: auto 1fr auto;
@@ -1132,6 +1173,79 @@ ol {
     grid-area: 1/3/3/4;
   }
 }
+.btc-tx {
+  grid-template-columns: auto 1fr auto;
+  gap: 0.5rem 1rem;
+  align-items: center;
+  grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
+  &:not(:last-of-type) {
+    padding-bottom: 1rem;
+  }
+  &__amount {
+    white-space: nowrap;
+  }
+  &.out {
+    .icon {
+      fill: var(--danger-color);
+    }
+    .btc-tx__amount {
+      color: var(--danger-color);
+      &::before {
+        content: "- ";
+      }
+    }
+  }
+  &.in {
+    .icon {
+      fill: var(--green);
+    }
+    .btc-tx__amount {
+      color: var(--green);
+      &::before {
+        content: "+ ";
+      }
+    }
+  }
+  &.unconfirmed-tx {
+    grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed";
+    .icon {
+      fill: var(--yellow);
+    }
+  }
+  &__icon {
+    grid-area: icon;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: rgba(var(--text-color), 0.03);
+    border-radius: 2rem;
+  }
+  &__receiver {
+    grid-area: receiver;
+    font-weight: 500;
+  }
+  &__time {
+    grid-area: time;
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.8);
+  }
+  &__amount {
+    grid-area: amount;
+    font-size: 1rem;
+    font-weight: 700;
+  }
+  &__id {
+    grid-area: txid;
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.8);
+  }
+  .unconfirmed-wrapper {
+    grid-area: unconfirmed;
+    padding: 0.5rem 0;
+  }
+}
 .fab {
   position: absolute;
   right: 0;
@@ -1146,11 +1260,8 @@ ol {
 }
 #add_address_button {
   border-radius: 0.5rem;
-  color: rgba(var(--background-color), 1);
-  background-color: var(--accent-color);
-  .icon {
-    fill: rgba(var(--background-color), 1);
-  }
+  background-color: transparent;
+  border: solid 0.1rem var(--accent-color);
 }
 .user-action-result__icon {
   justify-self: center;
@@ -1194,7 +1305,7 @@ ol {
   display: flex;
   gap: 1rem;
   align-items: center;
-  padding: 0.8rem 0;
+  padding: 1rem;
   border-radius: 0.3rem;
   background-color: rgba(var(--foreground-color), 1);
   &:not(:last-of-type) {
@@ -1366,13 +1477,28 @@ ol {
   background-color: rgba(var(--text-color), 0.03);
 }
 @media screen and (max-width: 40rem) {
+  .inner-page {
+    padding-bottom: 7rem;
+  }
   #main_navbar {
+    bottom: 0.5rem;
+    justify-self: center;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    width: max-content;
+    background-color: rgba(var(--foreground-color), 0.9);
+    backdrop-filter: blur(0.5rem);
     &.hide-away {
       bottom: 0;
       left: 0;
       right: 0;
     }
   }
+  .nav-item {
+    aspect-ratio: 1/1;
+    width: 4.5rem;
+  }
   .integrated-action-button {
     .icon:last-of-type {
       margin-left: auto;
@@ -1383,9 +1509,6 @@ ol {
   sm-popup {
     --width: 24rem;
   }
-  .page-layout {
-    grid-template-columns: 1fr 90vw 1fr;
-  }
   .popup__header {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
@@ -1394,40 +1517,22 @@ ol {
     align-items: center;
     justify-content: center;
   }
-
-  #main_card {
-    height: calc(100vh - 2rem);
-    width: calc(100vw - 2rem);
-    grid-template-areas: "header" ".";
-    &:not(.nav-hidden) {
-      grid-template-columns: auto 1fr;
-      grid-template-rows: auto 1fr;
-      grid-template-areas: "nav header" "nav .";
-    }
-    position: relative;
-    border-radius: 0.8rem;
-    overflow: hidden;
-    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
-      0 1rem 3rem rgba(0, 0, 0, 0.2);
-  }
   #main_header {
-    grid-area: header;
+    padding: 1rem 4vw;
+    background-color: rgba(var(--foreground-color), 1);
   }
   #main_navbar {
-    grid-area: nav;
-    border-top: none;
-    flex-direction: column;
-    height: calc(100% - 1rem);
-    margin: 0.5rem;
-    border-radius: 0.5rem;
-    background-color: rgba(37 110 255/ 0.03);
+    margin: 1rem;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    justify-content: center;
     ul {
       flex-direction: column;
       gap: 0.5rem;
       padding: 0.3rem;
-      li:last-of-type {
-        margin-top: auto;
-      }
+      align-self: center;
+      height: auto;
     }
   }
   .nav-item {
@@ -1443,20 +1548,23 @@ ol {
   .card {
     padding: 1.5rem;
   }
-  #saved_ids_list {
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  .balance-card {
+    padding: 1.5rem;
+    border-radius: 1rem;
   }
-  body[data-theme="dark"] {
-    #main_navbar {
-      background-color: rgba(0 0 0/ 0.2);
+  #contact {
+    & > * {
+      padding: 1rem 12vw;
+    }
+    & > :last-child {
+      padding: 0.5rem 12vw;
     }
   }
-}
-@media screen and (min-width: 56rem) {
-  #main_card {
-    width: 56rem;
-    height: min(90vh, 48rem);
+  #saved_ids_list {
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  }
+  .inner-page {
+    padding: 1.5rem 18vw;
   }
 }
 @media (any-hover: hover) {
@@ -1468,7 +1576,6 @@ ol {
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
-
     &:hover {
       background: rgba(var(--text-color), 0.5);
     }
diff --git a/index.html b/index.html
index 948f1c7..6544e36 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,8 @@
     <meta charset="UTF-8">
     <meta name="description"
         content="This webapp allows monitoring FLO addresses and performing transactions based on blockchain.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
         href="https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
         rel="stylesheet">
@@ -21,6 +23,8 @@
         }
     </script>
     <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" defer></script>
 </head>
 
 <body onload="onLoadStartUp()" class="hide">
@@ -64,7 +68,7 @@
             </div>
             <theme-toggle></theme-toggle>
         </header>
-        <article id="landing" class="inner-page page-layout hide">
+        <article id="landing" class="inner-page hide">
             <section class="grid justify-center gap-1">
                 <h1 class="h1">Send.request</h1>
                 <div class="flex gap-0-5">
@@ -73,7 +77,49 @@
                 </div>
             </section>
         </article>
-        <article id="sign_in" class="inner-page page-layout hide">
+        <article id="sign_in" class="inner-page hide">
+            <svg class="illustration" width="673" height="417" viewBox="0 0 673 417" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M223 79C185.997 79 156 108.997 156 146V213C156 250.003 185.997 280 223 280H229C266.003 280 296 250.003 296 213V146C296 108.997 266.003 79 229 79H223ZM226 102C201.147 102 181 122.147 181 147V208C181 232.853 201.147 253 226 253C250.853 253 271 232.853 271 208V147C271 122.147 250.853 102 226 102Z"
+                    fill="#64E899" />
+                <rect x="124" y="170" width="204" height="204" rx="32" fill="#93FFBE" />
+                <circle cx="225.5" cy="309.5" r="37.5" fill="#64E899" />
+                <circle cx="226" cy="323" r="14" fill="#35C66F" />
+                <path
+                    d="M273.73 127.883H223.571C222.05 127.883 220.816 129.117 220.816 130.638C220.816 132.16 222.05 133.394 223.571 133.394H273.73C275.252 133.394 276.485 132.16 276.485 130.638C276.485 129.117 275.252 127.883 273.73 127.883Z"
+                    fill="#F9BB8F" />
+                <path
+                    d="M240.145 126.702H222.26C220.086 126.702 218.323 128.464 218.323 130.638C218.323 132.812 220.086 134.574 222.26 134.574H240.145C242.319 134.574 244.081 132.812 244.081 130.638C244.081 128.464 242.319 126.702 240.145 126.702Z"
+                    fill="#FFE39A" />
+                <path
+                    d="M221.668 120.551L222.355 118.044C222.963 115.821 225.178 114.44 227.442 114.873C229.398 115.246 230.862 116.884 231.015 118.87L231.214 121.462C231.432 124.289 229.197 126.702 226.362 126.702C223.152 126.702 220.821 123.648 221.668 120.551Z"
+                    fill="#F9BB8F" />
+                <path
+                    d="M319.342 157.621L314.759 163.049C314.188 163.725 313.875 164.581 313.875 165.466C313.875 167.535 315.552 169.213 317.622 169.213H323C325.761 169.213 328 166.974 328 164.213V149.335C328 147.27 326.326 145.596 324.261 145.596C322.196 145.596 320.522 147.27 320.522 149.335V154.395C320.522 155.576 320.104 156.718 319.342 157.621Z"
+                    fill="black" />
+                <path
+                    d="M235.682 163.563L236.587 156.659C236.719 155.654 237.581 154.69 238.504 154.271C241.476 152.919 265.073 151.709 268.136 152.84L269.614 153.385C269.763 153.44 269.916 153.484 270.072 153.517L286.871 157.011L317.149 160.644C318.704 160.831 320.035 161.849 320.622 163.301C321.766 166.127 319.686 169.213 316.637 169.213H240.64C237.62 169.213 235.289 166.557 235.682 163.563Z"
+                    fill="#EC8973" />
+                <path
+                    d="M283.87 161.112L277.984 156.651C277.281 156.118 276.424 155.83 275.542 155.83C273.31 155.83 271.5 157.639 271.5 159.872L271.5 164.213C271.5 166.974 273.739 169.213 276.5 169.213L292.884 169.213C294.84 169.213 296.427 167.627 296.427 165.67C296.427 163.714 294.84 162.128 292.884 162.128L286.89 162.128C285.8 162.128 284.739 161.771 283.87 161.112Z"
+                    fill="black" />
+                <path
+                    d="M249.275 135.191L230.842 152.991C229.756 154.04 229.202 155.523 229.334 157.026L230.002 164.625C230.216 167.049 232.142 168.967 234.567 169.17L241.949 169.787C243.549 169.921 245.115 169.278 246.161 168.059L257.338 155.026C259.176 152.882 262.424 152.685 264.508 154.591L271.97 161.418C272.482 161.886 273.086 162.242 273.743 162.465L276.04 163.242C277.549 163.753 279.214 163.247 280.184 161.984C281.192 160.67 281.211 158.848 280.229 157.514L264.274 135.824C263.332 134.544 261.837 133.787 260.247 133.787H252.748C251.452 133.787 250.207 134.29 249.275 135.191Z"
+                    fill="#FFB9AA" />
+                <ellipse cx="231.618" cy="109.383" rx="10.8015" ry="10.234" fill="#F9BB8F" />
+                <path
+                    d="M239.13 105.289L235.134 106.929C233.258 107.699 232.033 109.526 232.033 111.554V113.919C232.033 115.735 231.048 117.409 229.461 118.29L225.719 120.369C222.833 121.971 219.214 120.388 218.433 117.181L215.708 105.991C215.272 104.202 215.855 102.317 217.226 101.087L221.468 97.2791C222.386 96.4555 223.575 96 224.808 96H237.297C238.936 96 240.463 96.8322 241.352 98.2097C242.987 100.745 241.921 104.143 239.13 105.289Z"
+                    fill="black" />
+                <path
+                    d="M226.171 163.347L216.593 133.679C216.365 132.973 216.297 132.225 216.394 131.489L216.933 127.405C217.255 124.962 219.31 123.118 221.774 123.061L232.009 122.824C233.592 122.788 235.099 123.503 236.071 124.753L245.86 137.34C246.058 137.595 246.231 137.869 246.377 138.157L253.752 152.767C254.683 154.612 254.383 156.841 252.996 158.374L244.791 167.443C243.582 168.78 241.747 169.362 239.989 168.968L229.834 166.689C228.107 166.302 226.714 165.03 226.171 163.347Z"
+                    fill="#FFE39A" />
+                <path d="M51 374H622" stroke="black" />
+                <circle cx="418.5" cy="84.5" r="40.5" fill="#FFD2D2" />
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M487.5 142C488.446 142 489.385 141.97 490.317 141.912C503.976 141.059 519.314 142 533 142V142C552.33 142 568 126.33 568 107C568 87.67 552.33 72 533 72V72C527.947 72 522.903 70.0693 519.377 66.4497C511.294 58.1527 499.999 53 487.5 53C463.091 53 443.272 72.6522 443.003 96.9972C443.003 96.9988 443.002 97 443 97V97C429.745 97 419 107.745 419 121C419 134.255 429.745 145 443 145V145C455.923 145 471.766 141.1 484.663 141.911C485.601 141.97 486.547 142 487.5 142Z"
+                    fill="#EEEEFF" />
+            </svg>
             <section>
                 <h1 class="h2">Sign In</h1>
                 <p>Welcome back, glad to see you again</p>
@@ -87,7 +133,7 @@
                 </p>
             </section>
         </article>
-        <article id="sign_up" class="inner-page page-layout hide">
+        <article id="sign_up" class="inner-page hide">
             <section class="grid">
                 <div id="flo_id_warning" class="grid justify-center gap-0-5">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@@ -101,7 +147,7 @@
                 </div>
                 <div class="grid gap-1-5 card">
                     <div class="grid gap-0-5">
-                        <h5>FLO ID</h5>
+                        <h5>FLO address</h5>
                         <sm-copy id="generated_flo_id"></sm-copy>
                     </div>
                     <div class="grid gap-0-5">
@@ -122,8 +168,8 @@
         </div>
     </div>
     <div id="main_card" class="page hide">
-        <header id="main_header" class="flex align-center space-between">
-            <div class="flex align-center flex-1">
+        <header id="main_header">
+            <div class="flex align-center flex-1 app-name">
                 <svg class="icon flo-icon" width="64" height="64" viewBox="0 0 64 64" fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                     <mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3" width="58" height="58">
@@ -139,144 +185,209 @@
                 </svg>
                 <h4>FLO Pay</h4>
             </div>
-            <theme-toggle></theme-toggle>
+            <div class="logged-in-user-id flex align-center w-100" style="font-size: 0.9rem;"></div>
+            <theme-toggle style="margin-left: -1rem;"></theme-toggle>
         </header>
         <section id="home" class="inner-page hide">
-            <div class="grid flo-id-wrapper">
-                <h1>Welcome</h1>
-                <sm-copy class="logged-in-user-id" style="font-size: 0.9rem;"></sm-copy>
-            </div>
             <div id="wallet_section" class="grid gap-1">
                 <div class="flex align-center space-between">
-                    <h4>My wallet</h4>
+                    <h4>My crypto holdings</h4>
                     <div class="multi-state-button">
-                        <button class="button" onclick="refreshBalance(this)">Refresh</button>
+                        <button class="button button--small" onclick="refreshBalance(this)">Refresh balance</button>
                     </div>
                 </div>
                 <div id="wallet_cards_wrapper">
-                    <div class="grid gap-0-5 balance-card">
-                        <div class="flex align-center">
+                    <div class="balance-card rupee-card">
+                        <div class="flex align-center space-between">
+                            <div class="flex align-center">
+                                <svg class="icon asset-icon" xmlns="http://www.w3.org/2000/svg"
+                                    enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
+                                    fill="#000000">
+                                    <g>
+                                        <rect fill="none" height="24" width="24" />
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path
+                                                d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z" />
+                                        </g>
+                                    </g>
+                                </svg>
+                                <b>Rupee token</b>
+                            </div>
+                            <b class="h1" id="rupee_balance"></b>
+                        </div>
+                        <div class="actions-wrapper">
+                            <button class="wallet-action" onclick="showTokenTransfer('send')">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                                </svg>
+                                Send
+                            </button>
+                            <button class="wallet-action" onclick="showTokenTransfer('request')">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z" />
+                                </svg>
+                                Request
+                            </button>
+                            <button class="wallet-action cashier-option"
+                                onclick="openPopup('topup_wallet_popup', true)">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
+                                </svg>
+                                Top-up
+                            </button>
+                            <button class="wallet-action cashier-option" onclick="openPopup('withdraw_wallet_popup')">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                    <g>
+                                        <rect fill="none" height="24" width="24" />
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <rect height="7" width="3" x="4" y="10" />
+                                            <rect height="7" width="3" x="10.5" y="10" />
+                                            <rect height="3" width="20" x="2" y="19" />
+                                            <rect height="7" width="3" x="17" y="10" />
+                                            <polygon points="12,1 2,6 2,8 22,8 22,6" />
+                                        </g>
+                                    </g>
+                                </svg>
+                                Withdraw
+                            </button>
+                        </div>
+                        <a id="wallet_history_button" class="integrated-action-button flex align-center user-element"
+                            href="#/wallet">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path
+                                    d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
+                            </svg>
+                            View rupee top-up and withdrawal history
+                            <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                            </svg>
+                        </a>
+                        <a href="#/history?asset=rupee" class="integrated-action-button flex align-center user-element">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                 height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0,0h24v24H0V0z" fill="none" />
                                 <g>
-                                    <rect fill="none" height="24" width="24" />
+                                    <path
+                                        d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
+                                    <rect height="2" width="6" x="9" y="7" />
+                                    <rect height="2" width="2" x="16" y="7" />
+                                    <rect height="2" width="6" x="9" y="10" />
+                                    <rect height="2" width="2" x="16" y="10" />
                                 </g>
-                                <g>
-                                    <g>
+                            </svg>
+                            <span>View payments History</span>
+                            <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                            </svg>
+                        </a>
+                        <button class="integrated-action-button align-center"
+                            onclick="openPopup('transfer_to_exchange_popup')">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                            </svg>
+                            Send rupee tokens to exchange
+                            <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="flex flex-direction-column gap-0-5">
+                        <div class="balance-card flo-card">
+                            <div class="flex align-center space-between">
+                                <div class="flex align-center">
+                                    <svg class="icon flo-icon asset-icon" width="64" height="64" viewBox="0 0 64 64"
+                                        fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3"
+                                            width="58" height="58">
+                                            <rect fill="white" x="3" y="3" width="58" height="58" />
+                                            <path fill-rule="evenodd" clip-rule="evenodd"
+                                                d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" />
+                                        </mask>
+                                        <path fill-rule="evenodd" clip-rule="evenodd"
+                                            d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" />
                                         <path
-                                            d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z" />
-                                    </g>
-                                </g>
-                            </svg>
-                            <h5>Rupee token</h5>
+                                            d="M31.946 43.6019L32.6728 42.915L31.918 42.1163L31.1938 42.943L31.946 43.6019ZM31.9811 55.1957L31.2716 55.9004L31.9657 56.5992L32.6749 55.9159L31.9811 55.1957ZM31.9487 10.6835L32.7051 11.3376L32.9487 11.0559V10.6835H31.9487ZM31.9433 37.4108L31.18 38.0569L31.9442 38.9597L32.7074 38.056L31.9433 37.4108ZM31.9487 10.6808L32.7068 10.0287L30.9487 7.98495V10.6808H31.9487ZM59 28.7654L59.9166 29.1651L60.4326 27.9819L59.158 27.778L59 28.7654ZM45.7214 42.53L45.1042 41.7432L46.0802 43.4634L45.7214 42.53ZM49.7984 39.3089L49.1332 38.5622L49.1326 38.5628L49.7984 39.3089ZM54.0293 32.6075L53.0647 32.3439L53.0646 32.3441L54.0293 32.6075ZM53.1896 31.406L53.3484 30.4187L53.348 30.4186L53.1896 31.406ZM45.1733 32.702L45.588 33.612L45.5881 33.6119L45.1733 32.702ZM34.1735 40.8938L33.467 40.1861L33.4585 40.1946L33.4501 40.2033L34.1735 40.8938ZM33.9899 41.2259L33.114 40.7435L32.3319 42.1635L33.9519 42.2252L33.9899 41.2259ZM48.119 49.9064L48.3359 50.8826L49.5751 50.6072L49.0173 49.4669L48.119 49.9064ZM37.778 48.5213L38.0715 47.5653L37.2372 49.3625L37.778 48.5213ZM45.176 48.5483L45.6045 49.4518L46.6008 48.9794L46.0335 48.0338L45.176 48.5483ZM44.231 47.0228L44.8645 46.2491L44.8637 46.2484L44.231 47.0228ZM40.505 44.3498L40.9866 43.4734L40.9845 43.4723L40.505 44.3498ZM33.5768 42.1682L33.7777 41.1886L31.6127 40.7446L32.7083 42.664L33.5768 42.1682ZM31.946 59L31.1626 59.6216L31.9457 60.6085L32.7292 59.6218L31.946 59ZM28.2389 50.8946L29.2314 50.7725L29.2314 50.7721L28.2389 50.8946ZM30.1991 42.3896L31.0736 42.8747L31.7652 41.6279L30.3574 41.4022L30.1991 42.3896ZM18.7916 48.5645L17.855 48.2141L17.5413 49.0527L18.3402 49.4568L18.7916 48.5645ZM26.33 48.3161L27.0473 49.0128L25.9814 47.3788L26.33 48.3161ZM15.8108 49.8335L14.9131 49.393L14.4073 50.4237L15.4977 50.7832L15.8108 49.8335ZM30.0263 41.2286L30.0635 42.2279L32.3372 42.1433L30.7373 40.5255L30.0263 41.2286ZM28.8167 40.0082L28.1226 40.7281L28.1228 40.7282L28.8167 40.0082ZM19.823 33.2366L19.3644 34.1252L19.3645 34.1253L19.823 33.2366ZM10.9481 31.3871L10.8001 30.3981L10.7998 30.3982L10.9481 31.3871ZM9.6656 31.6436L9.46564 30.6638L8.49474 30.8619L8.68401 31.8346L9.6656 31.6436ZM18.1274 42.3464L18.0073 43.3392L18.6607 41.5005L18.1274 42.3464ZM5 28.7546L4.84003 27.7675L3.75363 27.9435L4.03268 29.0082L5 28.7546ZM26.897 35.2319L26.173 35.9217L27.8093 34.8223L26.897 35.2319ZM31.946 5L32.7265 4.37488L31.9461 3.40036L31.1655 4.37483L31.946 5ZM31.1938 42.943C27.7974 46.8199 27.6566 52.261 31.2716 55.9004L32.6906 54.491C29.9012 51.6828 29.9116 47.4417 32.6982 44.2609L31.1938 42.943ZM32.6749 55.9159C36.1304 52.5867 36.081 46.5214 32.6728 42.915L31.2192 44.2888C33.94 47.1678 33.8852 51.9727 31.2873 54.4755L32.6749 55.9159ZM31.1923 10.0294C27.4048 14.4092 25.5379 19.2455 25.5737 24.1102C25.6095 28.971 27.5438 33.7608 31.18 38.0569L32.7066 36.7647C29.3201 32.7637 27.6054 28.4127 27.5736 24.0955C27.5419 19.7822 29.1891 15.4034 32.7051 11.3376L31.1923 10.0294ZM32.7074 38.056C36.4083 33.6729 38.31 28.8504 38.3133 23.9938C38.3165 19.1359 36.42 14.3451 32.7068 10.0287L31.1906 11.3329C34.6405 15.3433 36.3161 19.6839 36.3133 23.9925C36.3104 28.3024 34.6279 32.6815 31.1792 36.7656L32.7074 38.056ZM30.9487 10.6808V10.6835H32.9487V10.6808H30.9487ZM37.8259 35.7503C43.6131 29.8345 50.6632 28.444 58.842 29.7528L59.158 27.778C50.532 26.3976 42.7591 27.8475 36.3963 34.3517L37.8259 35.7503ZM58.0834 28.3657C55.4402 34.4268 51.7791 39.1301 45.3626 41.5966L46.0802 43.4634C53.1637 40.7405 57.1436 35.524 59.9166 29.1651L58.0834 28.3657ZM46.3386 43.3168C47.7733 42.1914 49.2057 41.178 50.4642 40.055L49.1326 38.5628C47.9341 39.6322 46.6503 40.5304 45.1042 41.7432L46.3386 43.3168ZM50.4636 40.0556C52.6466 38.111 54.2121 35.7338 54.994 32.871L53.0646 32.3441C52.3939 34.8002 51.0542 36.851 49.1332 38.5622L50.4636 40.0556ZM54.9939 32.8711C55.1262 32.3872 55.2248 31.6946 54.7698 31.1186C54.3643 30.6053 53.7257 30.4794 53.3484 30.4187L53.0308 32.3933C53.1086 32.4058 53.17 32.4181 53.2184 32.43C53.2671 32.442 53.2955 32.4518 53.3091 32.4572C53.3227 32.4626 53.3139 32.4606 53.2926 32.4461C53.2699 32.4307 53.2353 32.4025 53.2004 32.3583C53.1832 32.3366 53.1677 32.3132 53.1543 32.2886C53.1409 32.264 53.1307 32.2402 53.1231 32.2182C53.1079 32.1742 53.1053 32.144 53.1049 32.1366C53.1046 32.1302 53.1059 32.1427 53.1007 32.1797C53.0955 32.2165 53.0849 32.27 53.0647 32.3439L54.9939 32.8711ZM53.348 30.4186C50.274 29.9254 47.4176 30.5801 44.7585 31.7921L45.5881 33.6119C47.9996 32.5127 50.4514 31.9794 53.0312 32.3934L53.348 30.4186ZM44.7586 31.792C40.3293 33.8104 36.7535 36.9051 33.467 40.1861L34.88 41.6015C38.1113 38.3755 41.4853 35.4816 45.588 33.612L44.7586 31.792ZM33.4501 40.2033C33.3063 40.354 33.2291 40.5156 33.2033 40.5674C33.1672 40.64 33.1517 40.6749 33.114 40.7435L34.8658 41.7083C34.9307 41.5906 34.9786 41.4891 34.9945 41.4572C35.0049 41.4363 35.0004 41.4467 34.9882 41.4667C34.9731 41.4914 34.9435 41.5355 34.8969 41.5843L33.4501 40.2033ZM33.9519 42.2252C37.0233 42.3421 39.6629 43.0109 41.8597 44.3098C44.0485 45.6039 45.857 47.5582 47.2207 50.3459L49.0173 49.4669C47.5001 46.3659 45.4368 44.1014 42.8776 42.5882C40.3265 41.0798 37.342 40.3527 34.0279 40.2266L33.9519 42.2252ZM47.9021 48.9302C44.3241 49.7253 41.1983 49.5313 38.3188 47.6801L37.2372 49.3625C40.7081 51.5937 44.4295 51.7507 48.3359 50.8826L47.9021 48.9302ZM37.4845 49.4773C39.9089 50.2215 42.6205 50.8669 45.6045 49.4518L44.7475 47.6448C42.4935 48.7137 40.4315 48.2899 38.0715 47.5653L37.4845 49.4773ZM46.0335 48.0338C45.8849 47.7862 45.8212 47.6158 45.6292 47.2504C45.4736 46.9544 45.2423 46.5584 44.8645 46.2491L43.5975 47.7965C43.6517 47.8409 43.7309 47.9377 43.8588 48.181C43.9503 48.3549 44.1431 48.7704 44.3185 49.0628L46.0335 48.0338ZM44.8637 46.2484C43.6913 45.2906 42.4149 44.2582 40.9866 43.4734L40.0234 45.2262C41.2681 45.9102 42.4109 46.8272 43.5983 47.7972L44.8637 46.2484ZM40.9845 43.4723C38.7711 42.2628 36.3236 41.7107 33.7777 41.1886L33.3759 43.1478C35.9384 43.6733 38.1079 44.1796 40.0255 45.2273L40.9845 43.4723ZM32.7083 42.664C34.346 45.5328 34.9255 48.203 34.6411 50.7474C34.3555 53.3015 33.1882 55.8274 31.1628 58.3782L32.7292 59.6218C34.9185 56.8644 36.2905 53.9944 36.6287 50.9696C36.9679 47.9351 36.2555 44.8435 34.4453 41.6724L32.7083 42.664ZM32.7294 58.3784C30.8397 55.9968 29.577 53.5818 29.2314 50.7725L27.2464 51.0167C27.6514 54.3094 29.1319 57.0622 31.1626 59.6216L32.7294 58.3784ZM29.2314 50.7721C28.8877 47.9881 29.6602 45.4224 31.0736 42.8747L29.3247 41.9045C27.7842 44.6812 26.8341 47.6775 27.2464 51.0171L29.2314 50.7721ZM30.3574 41.4022C29.3303 41.2375 28.1125 41.4187 26.9159 41.7622C25.6987 42.1117 24.4105 42.6564 23.2045 43.307C21.999 43.9574 20.8488 44.728 19.9166 45.543C19.005 46.3399 18.2137 47.2553 17.855 48.2141L19.7282 48.9149C19.9149 48.4157 20.4139 47.7647 21.233 47.0487C22.0314 46.3507 23.0524 45.6616 24.1541 45.0672C25.2552 44.4732 26.4102 43.9882 27.4678 43.6846C28.5458 43.3751 29.4344 43.2798 30.0408 43.377L30.3574 41.4022ZM18.3402 49.4568C21.2702 50.939 24.0958 50.214 26.6786 49.2534L25.9814 47.3788C23.4828 48.3082 21.3728 48.7496 19.243 47.6722L18.3402 49.4568ZM25.6127 47.6194C24.9334 48.3187 23.4333 48.9382 21.5294 49.2141C19.6667 49.484 17.6562 49.3889 16.1239 48.8838L15.4977 50.7832C17.3971 51.4094 19.7336 51.4952 21.8162 51.1934C23.8578 50.8976 25.9014 50.1927 27.0473 49.0128L25.6127 47.6194ZM16.7085 50.274C18.0554 47.5292 19.8486 45.5942 22.044 44.3081C24.2482 43.0169 26.918 42.345 30.0635 42.2279L29.9891 40.2293C26.606 40.3552 23.5923 41.0832 21.0331 42.5824C18.4649 44.0869 16.4147 46.3328 14.9131 49.393L16.7085 50.274ZM30.7373 40.5255C30.2757 40.0586 29.8942 39.6578 29.5106 39.2882L28.1228 40.7282C28.4844 41.0768 28.8157 41.4266 29.3153 41.9317L30.7373 40.5255ZM29.5108 39.2883C26.7637 36.6396 23.7967 34.1615 20.2815 32.3479L19.3645 34.1253C22.6317 35.8109 25.4373 38.1388 28.1226 40.7281L29.5108 39.2883ZM20.2816 32.348C17.4111 30.8666 14.2829 29.877 10.8001 30.3981L11.0961 32.3761C14.0015 31.9414 16.6891 32.7446 19.3644 34.1252L20.2816 32.348ZM10.7998 30.3982C10.388 30.4599 9.94468 30.566 9.46564 30.6638L9.86556 32.6234C10.4449 32.5052 10.7522 32.4277 11.0964 32.376L10.7998 30.3982ZM8.68401 31.8346C9.73479 37.2345 13.3673 40.5279 17.5941 43.1923L18.6607 41.5005C14.6039 38.9431 11.5404 36.0427 10.6472 31.4526L8.68401 31.8346ZM18.2475 41.3536C17.3819 41.2489 16.2594 40.7693 14.9918 39.9335C13.742 39.1093 12.427 37.9891 11.1875 36.7057C8.68437 34.1137 6.62095 30.9947 5.96732 28.5011L4.03268 29.0082C4.81005 31.9739 7.13413 35.3875 9.74885 38.095C11.0683 39.4613 12.4947 40.6825 13.8908 41.6031C15.2691 42.512 16.6967 43.1806 18.0073 43.3392L18.2475 41.3536ZM5.15997 29.7417C13.3246 28.4186 20.4108 29.874 26.173 35.9217L27.621 34.5421C21.2872 27.8944 13.4694 26.369 4.84003 27.7675L5.15997 29.7417ZM27.8093 34.8223C25.3851 29.4232 24.8341 24.3801 25.7561 19.5859C26.6809 14.7778 29.1009 10.1516 32.7265 5.62517L31.1655 4.37483C27.4012 9.07433 24.7952 13.9927 23.7921 19.2082C22.7863 24.4378 23.4058 29.8977 25.9847 35.6415L27.8093 34.8223ZM31.1655 5.62512C34.7619 10.1157 37.1747 14.7077 38.1168 19.4869C39.0562 24.2523 38.5469 29.2701 36.1948 34.6504L38.0274 35.4515C40.5299 29.7268 41.1033 24.2956 40.0791 19.1001C39.0576 13.9183 36.4606 9.03731 32.7265 4.37488L31.1655 5.62512Z"
+                                            mask="url(#path-1-outside-1_16_6)" />
+                                    </svg>
+                                    <b>FLO</b>
+                                </div>
+                                <b class="h1" id="flo_balance"></b>
+                            </div>
                         </div>
-                        <h1 class="h1" id="rupee_balance"></h1>
-                    </div>
-                    <div class="grid gap-0-5 balance-card">
-                        <div class="flex align-center">
-                            <svg class="icon flo-icon" width="64" height="64" viewBox="0 0 64 64" fill="none"
-                                xmlns="http://www.w3.org/2000/svg">
-                                <mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3" width="58"
-                                    height="58">
-                                    <rect fill="white" x="3" y="3" width="58" height="58" />
-                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                        d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" />
-                                </mask>
-                                <path fill-rule="evenodd" clip-rule="evenodd"
-                                    d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" />
-                                <path
-                                    d="M31.946 43.6019L32.6728 42.915L31.918 42.1163L31.1938 42.943L31.946 43.6019ZM31.9811 55.1957L31.2716 55.9004L31.9657 56.5992L32.6749 55.9159L31.9811 55.1957ZM31.9487 10.6835L32.7051 11.3376L32.9487 11.0559V10.6835H31.9487ZM31.9433 37.4108L31.18 38.0569L31.9442 38.9597L32.7074 38.056L31.9433 37.4108ZM31.9487 10.6808L32.7068 10.0287L30.9487 7.98495V10.6808H31.9487ZM59 28.7654L59.9166 29.1651L60.4326 27.9819L59.158 27.778L59 28.7654ZM45.7214 42.53L45.1042 41.7432L46.0802 43.4634L45.7214 42.53ZM49.7984 39.3089L49.1332 38.5622L49.1326 38.5628L49.7984 39.3089ZM54.0293 32.6075L53.0647 32.3439L53.0646 32.3441L54.0293 32.6075ZM53.1896 31.406L53.3484 30.4187L53.348 30.4186L53.1896 31.406ZM45.1733 32.702L45.588 33.612L45.5881 33.6119L45.1733 32.702ZM34.1735 40.8938L33.467 40.1861L33.4585 40.1946L33.4501 40.2033L34.1735 40.8938ZM33.9899 41.2259L33.114 40.7435L32.3319 42.1635L33.9519 42.2252L33.9899 41.2259ZM48.119 49.9064L48.3359 50.8826L49.5751 50.6072L49.0173 49.4669L48.119 49.9064ZM37.778 48.5213L38.0715 47.5653L37.2372 49.3625L37.778 48.5213ZM45.176 48.5483L45.6045 49.4518L46.6008 48.9794L46.0335 48.0338L45.176 48.5483ZM44.231 47.0228L44.8645 46.2491L44.8637 46.2484L44.231 47.0228ZM40.505 44.3498L40.9866 43.4734L40.9845 43.4723L40.505 44.3498ZM33.5768 42.1682L33.7777 41.1886L31.6127 40.7446L32.7083 42.664L33.5768 42.1682ZM31.946 59L31.1626 59.6216L31.9457 60.6085L32.7292 59.6218L31.946 59ZM28.2389 50.8946L29.2314 50.7725L29.2314 50.7721L28.2389 50.8946ZM30.1991 42.3896L31.0736 42.8747L31.7652 41.6279L30.3574 41.4022L30.1991 42.3896ZM18.7916 48.5645L17.855 48.2141L17.5413 49.0527L18.3402 49.4568L18.7916 48.5645ZM26.33 48.3161L27.0473 49.0128L25.9814 47.3788L26.33 48.3161ZM15.8108 49.8335L14.9131 49.393L14.4073 50.4237L15.4977 50.7832L15.8108 49.8335ZM30.0263 41.2286L30.0635 42.2279L32.3372 42.1433L30.7373 40.5255L30.0263 41.2286ZM28.8167 40.0082L28.1226 40.7281L28.1228 40.7282L28.8167 40.0082ZM19.823 33.2366L19.3644 34.1252L19.3645 34.1253L19.823 33.2366ZM10.9481 31.3871L10.8001 30.3981L10.7998 30.3982L10.9481 31.3871ZM9.6656 31.6436L9.46564 30.6638L8.49474 30.8619L8.68401 31.8346L9.6656 31.6436ZM18.1274 42.3464L18.0073 43.3392L18.6607 41.5005L18.1274 42.3464ZM5 28.7546L4.84003 27.7675L3.75363 27.9435L4.03268 29.0082L5 28.7546ZM26.897 35.2319L26.173 35.9217L27.8093 34.8223L26.897 35.2319ZM31.946 5L32.7265 4.37488L31.9461 3.40036L31.1655 4.37483L31.946 5ZM31.1938 42.943C27.7974 46.8199 27.6566 52.261 31.2716 55.9004L32.6906 54.491C29.9012 51.6828 29.9116 47.4417 32.6982 44.2609L31.1938 42.943ZM32.6749 55.9159C36.1304 52.5867 36.081 46.5214 32.6728 42.915L31.2192 44.2888C33.94 47.1678 33.8852 51.9727 31.2873 54.4755L32.6749 55.9159ZM31.1923 10.0294C27.4048 14.4092 25.5379 19.2455 25.5737 24.1102C25.6095 28.971 27.5438 33.7608 31.18 38.0569L32.7066 36.7647C29.3201 32.7637 27.6054 28.4127 27.5736 24.0955C27.5419 19.7822 29.1891 15.4034 32.7051 11.3376L31.1923 10.0294ZM32.7074 38.056C36.4083 33.6729 38.31 28.8504 38.3133 23.9938C38.3165 19.1359 36.42 14.3451 32.7068 10.0287L31.1906 11.3329C34.6405 15.3433 36.3161 19.6839 36.3133 23.9925C36.3104 28.3024 34.6279 32.6815 31.1792 36.7656L32.7074 38.056ZM30.9487 10.6808V10.6835H32.9487V10.6808H30.9487ZM37.8259 35.7503C43.6131 29.8345 50.6632 28.444 58.842 29.7528L59.158 27.778C50.532 26.3976 42.7591 27.8475 36.3963 34.3517L37.8259 35.7503ZM58.0834 28.3657C55.4402 34.4268 51.7791 39.1301 45.3626 41.5966L46.0802 43.4634C53.1637 40.7405 57.1436 35.524 59.9166 29.1651L58.0834 28.3657ZM46.3386 43.3168C47.7733 42.1914 49.2057 41.178 50.4642 40.055L49.1326 38.5628C47.9341 39.6322 46.6503 40.5304 45.1042 41.7432L46.3386 43.3168ZM50.4636 40.0556C52.6466 38.111 54.2121 35.7338 54.994 32.871L53.0646 32.3441C52.3939 34.8002 51.0542 36.851 49.1332 38.5622L50.4636 40.0556ZM54.9939 32.8711C55.1262 32.3872 55.2248 31.6946 54.7698 31.1186C54.3643 30.6053 53.7257 30.4794 53.3484 30.4187L53.0308 32.3933C53.1086 32.4058 53.17 32.4181 53.2184 32.43C53.2671 32.442 53.2955 32.4518 53.3091 32.4572C53.3227 32.4626 53.3139 32.4606 53.2926 32.4461C53.2699 32.4307 53.2353 32.4025 53.2004 32.3583C53.1832 32.3366 53.1677 32.3132 53.1543 32.2886C53.1409 32.264 53.1307 32.2402 53.1231 32.2182C53.1079 32.1742 53.1053 32.144 53.1049 32.1366C53.1046 32.1302 53.1059 32.1427 53.1007 32.1797C53.0955 32.2165 53.0849 32.27 53.0647 32.3439L54.9939 32.8711ZM53.348 30.4186C50.274 29.9254 47.4176 30.5801 44.7585 31.7921L45.5881 33.6119C47.9996 32.5127 50.4514 31.9794 53.0312 32.3934L53.348 30.4186ZM44.7586 31.792C40.3293 33.8104 36.7535 36.9051 33.467 40.1861L34.88 41.6015C38.1113 38.3755 41.4853 35.4816 45.588 33.612L44.7586 31.792ZM33.4501 40.2033C33.3063 40.354 33.2291 40.5156 33.2033 40.5674C33.1672 40.64 33.1517 40.6749 33.114 40.7435L34.8658 41.7083C34.9307 41.5906 34.9786 41.4891 34.9945 41.4572C35.0049 41.4363 35.0004 41.4467 34.9882 41.4667C34.9731 41.4914 34.9435 41.5355 34.8969 41.5843L33.4501 40.2033ZM33.9519 42.2252C37.0233 42.3421 39.6629 43.0109 41.8597 44.3098C44.0485 45.6039 45.857 47.5582 47.2207 50.3459L49.0173 49.4669C47.5001 46.3659 45.4368 44.1014 42.8776 42.5882C40.3265 41.0798 37.342 40.3527 34.0279 40.2266L33.9519 42.2252ZM47.9021 48.9302C44.3241 49.7253 41.1983 49.5313 38.3188 47.6801L37.2372 49.3625C40.7081 51.5937 44.4295 51.7507 48.3359 50.8826L47.9021 48.9302ZM37.4845 49.4773C39.9089 50.2215 42.6205 50.8669 45.6045 49.4518L44.7475 47.6448C42.4935 48.7137 40.4315 48.2899 38.0715 47.5653L37.4845 49.4773ZM46.0335 48.0338C45.8849 47.7862 45.8212 47.6158 45.6292 47.2504C45.4736 46.9544 45.2423 46.5584 44.8645 46.2491L43.5975 47.7965C43.6517 47.8409 43.7309 47.9377 43.8588 48.181C43.9503 48.3549 44.1431 48.7704 44.3185 49.0628L46.0335 48.0338ZM44.8637 46.2484C43.6913 45.2906 42.4149 44.2582 40.9866 43.4734L40.0234 45.2262C41.2681 45.9102 42.4109 46.8272 43.5983 47.7972L44.8637 46.2484ZM40.9845 43.4723C38.7711 42.2628 36.3236 41.7107 33.7777 41.1886L33.3759 43.1478C35.9384 43.6733 38.1079 44.1796 40.0255 45.2273L40.9845 43.4723ZM32.7083 42.664C34.346 45.5328 34.9255 48.203 34.6411 50.7474C34.3555 53.3015 33.1882 55.8274 31.1628 58.3782L32.7292 59.6218C34.9185 56.8644 36.2905 53.9944 36.6287 50.9696C36.9679 47.9351 36.2555 44.8435 34.4453 41.6724L32.7083 42.664ZM32.7294 58.3784C30.8397 55.9968 29.577 53.5818 29.2314 50.7725L27.2464 51.0167C27.6514 54.3094 29.1319 57.0622 31.1626 59.6216L32.7294 58.3784ZM29.2314 50.7721C28.8877 47.9881 29.6602 45.4224 31.0736 42.8747L29.3247 41.9045C27.7842 44.6812 26.8341 47.6775 27.2464 51.0171L29.2314 50.7721ZM30.3574 41.4022C29.3303 41.2375 28.1125 41.4187 26.9159 41.7622C25.6987 42.1117 24.4105 42.6564 23.2045 43.307C21.999 43.9574 20.8488 44.728 19.9166 45.543C19.005 46.3399 18.2137 47.2553 17.855 48.2141L19.7282 48.9149C19.9149 48.4157 20.4139 47.7647 21.233 47.0487C22.0314 46.3507 23.0524 45.6616 24.1541 45.0672C25.2552 44.4732 26.4102 43.9882 27.4678 43.6846C28.5458 43.3751 29.4344 43.2798 30.0408 43.377L30.3574 41.4022ZM18.3402 49.4568C21.2702 50.939 24.0958 50.214 26.6786 49.2534L25.9814 47.3788C23.4828 48.3082 21.3728 48.7496 19.243 47.6722L18.3402 49.4568ZM25.6127 47.6194C24.9334 48.3187 23.4333 48.9382 21.5294 49.2141C19.6667 49.484 17.6562 49.3889 16.1239 48.8838L15.4977 50.7832C17.3971 51.4094 19.7336 51.4952 21.8162 51.1934C23.8578 50.8976 25.9014 50.1927 27.0473 49.0128L25.6127 47.6194ZM16.7085 50.274C18.0554 47.5292 19.8486 45.5942 22.044 44.3081C24.2482 43.0169 26.918 42.345 30.0635 42.2279L29.9891 40.2293C26.606 40.3552 23.5923 41.0832 21.0331 42.5824C18.4649 44.0869 16.4147 46.3328 14.9131 49.393L16.7085 50.274ZM30.7373 40.5255C30.2757 40.0586 29.8942 39.6578 29.5106 39.2882L28.1228 40.7282C28.4844 41.0768 28.8157 41.4266 29.3153 41.9317L30.7373 40.5255ZM29.5108 39.2883C26.7637 36.6396 23.7967 34.1615 20.2815 32.3479L19.3645 34.1253C22.6317 35.8109 25.4373 38.1388 28.1226 40.7281L29.5108 39.2883ZM20.2816 32.348C17.4111 30.8666 14.2829 29.877 10.8001 30.3981L11.0961 32.3761C14.0015 31.9414 16.6891 32.7446 19.3644 34.1252L20.2816 32.348ZM10.7998 30.3982C10.388 30.4599 9.94468 30.566 9.46564 30.6638L9.86556 32.6234C10.4449 32.5052 10.7522 32.4277 11.0964 32.376L10.7998 30.3982ZM8.68401 31.8346C9.73479 37.2345 13.3673 40.5279 17.5941 43.1923L18.6607 41.5005C14.6039 38.9431 11.5404 36.0427 10.6472 31.4526L8.68401 31.8346ZM18.2475 41.3536C17.3819 41.2489 16.2594 40.7693 14.9918 39.9335C13.742 39.1093 12.427 37.9891 11.1875 36.7057C8.68437 34.1137 6.62095 30.9947 5.96732 28.5011L4.03268 29.0082C4.81005 31.9739 7.13413 35.3875 9.74885 38.095C11.0683 39.4613 12.4947 40.6825 13.8908 41.6031C15.2691 42.512 16.6967 43.1806 18.0073 43.3392L18.2475 41.3536ZM5.15997 29.7417C13.3246 28.4186 20.4108 29.874 26.173 35.9217L27.621 34.5421C21.2872 27.8944 13.4694 26.369 4.84003 27.7675L5.15997 29.7417ZM27.8093 34.8223C25.3851 29.4232 24.8341 24.3801 25.7561 19.5859C26.6809 14.7778 29.1009 10.1516 32.7265 5.62517L31.1655 4.37483C27.4012 9.07433 24.7952 13.9927 23.7921 19.2082C22.7863 24.4378 23.4058 29.8977 25.9847 35.6415L27.8093 34.8223ZM31.1655 5.62512C34.7619 10.1157 37.1747 14.7077 38.1168 19.4869C39.0562 24.2523 38.5469 29.2701 36.1948 34.6504L38.0274 35.4515C40.5299 29.7268 41.1033 24.2956 40.0791 19.1001C39.0576 13.9183 36.4606 9.03731 32.7265 4.37488L31.1655 5.62512Z"
-                                    mask="url(#path-1-outside-1_16_6)" />
-                            </svg>
-                            <h5>FLO</h5>
+                        <div class="balance-card btc-card">
+                            <div class="flex align-center space-between">
+                                <div class="flex align-center">
+                                    <svg class="icon asset-icon" xmlns="http://www.w3.org/2000/svg"
+                                        enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
+                                        fill="#000000">
+                                        <g>
+                                            <rect fill="none" height="24" width="24" />
+                                        </g>
+                                        <g>
+                                            <path
+                                                d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z" />
+                                        </g>
+                                    </svg>
+                                    <div class="grid gap-0-3">
+                                        <b>Bitcoin</b>
+                                        <span style="font-size: 0.8rem;">BTC</span>
+                                    </div>
+                                </div>
+                                <b class="h1" id="btc_balance"></b>
+                            </div>
+                            <div class="actions-wrapper">
+                                <button class="wallet-action" onclick="openPopup('send_btc_popup')">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                                        <path d="M0 0h24v24H0z" fill="none" />
+                                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                                    </svg>
+                                    Send
+                                </button>
+                                <a href="#/history?asset=btc" class="wallet-action user-element">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg"
+                                        enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
+                                        fill="#000000">
+                                        <path d="M0,0h24v24H0V0z" fill="none" />
+                                        <g>
+                                            <path
+                                                d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
+                                            <rect height="2" width="6" x="9" y="7" />
+                                            <rect height="2" width="2" x="16" y="7" />
+                                            <rect height="2" width="6" x="9" y="10" />
+                                            <rect height="2" width="2" x="16" y="10" />
+                                        </g>
+                                    </svg>
+                                    <span>History</span>
+                                </a>
+                            </div>
                         </div>
-                        <h1 class="h1" id="flo_balance"></h1>
                     </div>
                 </div>
-                <a id="wallet_history_button" class="integrated-action-button flex align-center user-element"
-                    href="#/wallet">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                        fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
-                    </svg>
-                    See wallet top-up and withdraw history
-                    <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0z" fill="none" />
-                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-                    </svg>
-                </a>
-            </div>
-            <div id="user" class="hide grid gap-2 user-element">
-                <div class="grid gap-0-5">
-                    <h4>Rupee token actions</h4>
-                    <div class="actions-wrapper">
-                        <button class="wallet-action" onclick="showTokenTransfer('send')">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                width="24px" fill="#000000">
-                                <path d="M0 0h24v24H0z" fill="none" />
-                                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-                            </svg>
-                            Send
-                        </button>
-                        <button class="wallet-action" onclick="showTokenTransfer('request')">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                width="24px" fill="#000000">
-                                <path d="M0 0h24v24H0z" fill="none" />
-                                <path
-                                    d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z" />
-                            </svg>
-                            Request
-                        </button>
-                        <button class="wallet-action cashier-option" onclick="openPopup('topup_wallet_popup', true)">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                width="24px" fill="#000000">
-                                <path d="M0 0h24v24H0z" fill="none" />
-                                <path
-                                    d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
-                            </svg>
-                            Top-up
-                        </button>
-                        <button class="wallet-action cashier-option" onclick="openPopup('withdraw_wallet_popup')">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                                <g>
-                                    <rect fill="none" height="24" width="24" />
-                                </g>
-                                <g>
-                                    <g>
-                                        <rect height="7" width="3" x="4" y="10" />
-                                        <rect height="7" width="3" x="10.5" y="10" />
-                                        <rect height="3" width="20" x="2" y="19" />
-                                        <rect height="7" width="3" x="17" y="10" />
-                                        <polygon points="12,1 2,6 2,8 22,8 22,6" />
-                                    </g>
-                                </g>
-                            </svg>
-                            Withdraw
-                        </button>
-                    </div>
-                </div>
-                <div class="grid gap-0-5">
-                    <h4>More from RanchiMall</h4>
-                    <button class="integrated-action-button align-center"
-                        onclick="openPopup('transfer_to_exchange_popup')">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                            width="24px" fill="#000000">
-                            <path d="M0 0h24v24H0z" fill="none" />
-                            <path
-                                d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
-                        </svg>
-                        Send rupee tokens to exchange
-                        <svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
-                            viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <path d="M0 0h24v24H0z" fill="none" />
-                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-                        </svg>
-                    </button>
-                </div>
             </div>
             <section id="cashier" class=" grid gap-1 hide admin-element">
                 <div class="flex align-center space-between">
@@ -302,7 +413,16 @@
                 </div>
             </section>
         </section>
-        <section id="history" class="inner-page hide grid gap-1-5">
+        <section id="history" class="inner-page hide">
+            <div class="flex sticky top-0" style="background-color: rgba(var(--background-color),1); z-index: 1;">
+                <a href="#/home" class="button icon-only margin-right-0-5">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </a>
+            </div>
             <div class="page__header">
                 <div class="grid">
                     <h4>Payments</h4>
@@ -327,7 +447,7 @@
             </div>
         </section>
         <section id="wallet" class="inner-page hide">
-            <div class="flex sticky top-0" style="background-color: rgba(var(--foreground-color),1); z-index: 1;">
+            <div class="flex sticky top-0" style="background-color: rgba(var(--background-color),1); z-index: 1;">
                 <a href="#/home" class="button icon-only margin-right-0-5">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
@@ -357,74 +477,78 @@
             </div>
         </section>
         <section id="contacts" class="inner-page hide flex flex-direction-column">
-            <section class="flex flex-direction-column scrolling-wrapper">
-                <div class="page__header">
-                    <div class="grid gap-0-5">
+            <div class="page__header">
+                <div class="grid gap-0-5 w-100">
+                    <div class="flex align-center space-between">
                         <h1>Contacts</h1>
-                        <p class="flex align-center">
-                            <svg class="icon margin-right-0-5" style="fill: #ffc107;" xmlns="http://www.w3.org/2000/svg"
-                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                                <path d="M0 0h24v24H0z" fill="none" />
+                        <button id="add_address_button" class="button interact"
+                            onclick="openPopup('add_address_popup')">
+                            <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
                                 <path
-                                    d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z" />
+                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
                             </svg>
-                            <span id="saved_ids_tip">Click 'Add FLO ID' to add a new FLO ID.</span>
-                        </p>
+                            Add FLO address
+                        </button>
                     </div>
                 </div>
-                <ul id="saved_ids_list" class="observe-empty-state grid"></ul>
-                <div class="empty-state justify-center text-center align-center h-100" style="align-content: center;">
-                    <svg class="justify-self-center" style="height: 12rem;" id="bb7dac0d-c86d-4eae-9345-05ead570be6d"
-                        data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
-                        <defs>
-                            <style>
-                                .e4b4c873-5e79-4c66-a530-269f7775150b {
-                                    fill: rgba(var(--text-color), 0.03);
-                                }
+            </div>
+            <ul id="saved_ids_list" class="observe-empty-state grid"></ul>
+            <div class="empty-state justify-center text-center align-center h-100" style="align-content: center;">
+                <svg class="justify-self-center" style="height: 12rem;" id="bb7dac0d-c86d-4eae-9345-05ead570be6d"
+                    data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+                    <defs>
+                        <style>
+                            .e4b4c873-5e79-4c66-a530-269f7775150b {
+                                fill: rgba(var(--text-color), 0.03);
+                            }
 
-                                .f8c35eef-c260-42fc-be6f-7c8afb0beeeb {
-                                    fill: rgba(var(--text-color), 0.2);
-                                }
+                            .f8c35eef-c260-42fc-be6f-7c8afb0beeeb {
+                                fill: rgba(var(--text-color), 0.2);
+                            }
 
-                                .ee8c2e6d-b8f3-4b81-80ab-31d470d121b9 {
-                                    fill: rgba(var(--text-color), 0.1);
-                                }
-                            </style>
-                        </defs>
-                        <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="34.76" y="40.75" width="177.53"
-                            height="41.42" rx="4" />
-                        <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="57.21" cy="61.46" r="9.29" />
-                        <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="51.37" width="40.44"
-                            height="9.03" rx="1.92" />
-                        <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="62.79" width="80.09"
-                            height="9.03" rx="1.92" />
-                        <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="10" y="99.29" width="177.53"
-                            height="41.42" rx="4" />
-                        <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="32.45" cy="120" r="9.29" />
-                        <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="109.91" width="40.44"
-                            height="9.03" rx="1.92" />
-                        <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="121.33" width="80.09"
-                            height="9.03" rx="1.92" />
-                        <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="52.47" y="157.83" width="177.53"
-                            height="41.42" rx="4" />
-                        <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="74.93" cy="178.54" r="9.29" />
-                        <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="168.46" width="40.44"
-                            height="9.03" rx="1.92" />
-                        <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="179.87" width="80.09"
-                            height="9.03" rx="1.92" />
-                    </svg>
-                    <p>No Saved FLO ID</p>
-                </div>
-            </section>
-            <button id="add_address_button" class="button interact fab" onclick="openPopup('add_address_popup')">
-                <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                    width="24px" fill="#000000">
-                    <path d="M0 0h24v24H0V0z" fill="none" />
-                    <path
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+                            .ee8c2e6d-b8f3-4b81-80ab-31d470d121b9 {
+                                fill: rgba(var(--text-color), 0.1);
+                            }
+                        </style>
+                    </defs>
+                    <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="34.76" y="40.75" width="177.53" height="41.42"
+                        rx="4" />
+                    <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="57.21" cy="61.46" r="9.29" />
+                    <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="51.37" width="40.44" height="9.03"
+                        rx="1.92" />
+                    <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="62.79" width="80.09" height="9.03"
+                        rx="1.92" />
+                    <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="10" y="99.29" width="177.53" height="41.42"
+                        rx="4" />
+                    <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="32.45" cy="120" r="9.29" />
+                    <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="109.91" width="40.44" height="9.03"
+                        rx="1.92" />
+                    <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="121.33" width="80.09" height="9.03"
+                        rx="1.92" />
+                    <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="52.47" y="157.83" width="177.53"
+                        height="41.42" rx="4" />
+                    <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="74.93" cy="178.54" r="9.29" />
+                    <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="168.46" width="40.44" height="9.03"
+                        rx="1.92" />
+                    <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="179.87" width="80.09" height="9.03"
+                        rx="1.92" />
                 </svg>
-                Add FLO ID
-            </button>
+                <div class="grid gap-0-5">
+                    <b>No Saved FLO address</b>
+                    <span>Click 'Add FLO address' to add a new FLO address</span>
+                </div>
+            </div>
+            <p id="saved_ids_tip" class="flex align-center justify-center" style="margin: 0 auto;">
+                <svg class="icon margin-right-0-5" style="fill: #ffc107;" xmlns="http://www.w3.org/2000/svg"
+                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path
+                        d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z" />
+                </svg>
+                <span>Tap on saved IDs to see transaction history</span>
+            </p>
         </section>
         <section id="contact" class="inner-page hide">
             <div class="flex align-center">
@@ -486,26 +610,41 @@
                     <h1>Settings</h1>
                 </div>
             </div>
-            <section class="grid gap-2">
-                <div class="grid gap-1">
-                    <div class="grid">
-                        <h5>My FLO ID</h5>
-                        <sm-copy class="logged-in-user-id" style="font-size: 0.9rem;"></sm-copy>
+            <section class="grid gap-0-5">
+                <div class="grid gap-1-5 card">
+                    <div class="grid gap-0-5">
+                        <h4>
+                            BTC integrated with FLO
+                        </h4>
+                        <p>
+                            You can use your FLO private key to perform transactions on the BTC network within our app
+                            ecosystem. The private key is the same for both.
+                        </p>
                     </div>
-                    <sm-switch id="flo_id_visibility_switcher">
+                    <div class="grid gap-0-5">
+                        <b>My FLO address</b>
+                        <sm-copy id="user_flo_id"></sm-copy>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <b>My Bitcoin address</b>
+                        <sm-copy id="user_btc_id"></sm-copy>
+                    </div>
+                    <sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
+                </div>
+                <div class="card">
+                    <sm-switch id="flo_id_visibility_switcher" class="w-100">
                         <div class="flex flex-direction-column gap-0-3" slot="left">
-                            <b>FLO ID visibility</b>
+                            <b>Hide address</b>
                             <p>
-                                Don't show my FLO ID on homepage. *Only applies to this device.
+                                Don't show my address on header. *Only applies to this device.
                             </p>
                         </div>
                     </sm-switch>
-                    <sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
                 </div>
-                <div class="grid gap-1 user-element">
+                <div class="grid gap-1 user-element card">
                     <h4>My UPI IDs</h4>
                     <ul id="saved_upi_ids_list" class="observe-empty-state"></ul>
-                    <div class="empty-state">
+                    <div class="empty-state" style="padding: 0;">
                         <p>Add your UPI IDs for easier access during transactions.</p>
                     </div>
                     <button class="button justify-self-start" onclick="openPopup('save_upi_popup')">
@@ -540,23 +679,6 @@
                         <span class="nav-item__title">Home</span>
                     </a>
                 </li>
-                <li>
-                    <a href="#/history" class="nav-item interact" title='View payment requests'>
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <path d="M0,0h24v24H0V0z" fill="none" />
-                            <g>
-                                <path
-                                    d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
-                                <rect height="2" width="6" x="9" y="7" />
-                                <rect height="2" width="2" x="16" y="7" />
-                                <rect height="2" width="6" x="9" y="10" />
-                                <rect height="2" width="2" x="16" y="10" />
-                            </g>
-                        </svg>
-                        <span class="nav-item__title">History</span>
-                    </a>
-                </li>
                 <li class="user-element hide">
                     <a href="#/contacts" class="nav-item interact" title='View payment requests'>
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -607,11 +729,11 @@
                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
             </button>
-            <h4>Save FLO ID</h4>
+            <h3>Save FLO address</h3>
         </header>
         <sm-form>
-            <sm-input id="flo_id_to_save" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id animate required
-                autofocus>
+            <sm-input id="flo_id_to_save" placeholder="FLO address" error-text="Invalid FLO address" data-flo-id animate
+                required autofocus>
             </sm-input>
             <sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input>
             <div class="multi-state-button">
@@ -636,13 +758,13 @@
         </header>
         <section class="grid gap-1-5">
             <div class="grid gap-0-5">
-                <h5>FLO ID</h5>
+                <h5>FLO address</h5>
                 <sm-copy id="edit_saved_id"></sm-copy>
             </div>
             <sm-form>
                 <sm-input id="get_new_title" placeholder="Name" autofocus animate required></sm-input>
                 <div class="flex align-center space-between">
-                    <button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSavedId()">
+                    <button class="button icon-only" title="Delete this FLO address?" onclick="deleteSavedId()">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                             width="24px" fill="#000000">
                             <path d="M0 0h24v24H0z" fill="none" />
@@ -664,12 +786,12 @@
                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
             </button>
-            <h4 id="token_transfer__title"></h4>
+            <h3 id="token_transfer__title"></h3>
         </header>
         <section class="grid gap-2">
             <sm-form>
-                <sm-input id="token_transfer__receiver" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id
-                    animate required autofocus>
+                <sm-input id="token_transfer__receiver" placeholder="FLO address" error-text="Invalid FLO address"
+                    data-flo-id animate required autofocus>
                     <button slot="right" class="icon-only" onclick="openPopup('saved_ids_popup')"
                         title="Select from saved IDs">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -980,7 +1102,7 @@
                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
             </button>
-            <h4>Save UPI ID</h4>
+            <h3>Save UPI ID</h3>
         </header>
         <sm-form>
             <sm-input id="get_upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9.\-_]{2,49}@[a-zA-Z._]{2,49}"
@@ -988,6 +1110,109 @@
             <button class="button button--primary cta" onclick="saveUpiId()" type="submit">Save</button>
         </sm-form>
     </sm-popup>
+    <sm-popup id="send_btc_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h3>Send BTC</h3>
+        </header>
+        <sm-form id="send_tx">
+            <div>
+                <h4 class="margin-bottom-0-5">Receivers</h4>
+                <div id="receiver_container">
+                    <fieldset class="receiver-card">
+                        <sm-input class="receiver-input" placeholder="Receiver address" data-btc-address
+                            error-text="Invalid BTC address" animate required></sm-input>
+                        <div class="flex align-start gap-0-5 remove-card-wrapper">
+                            <sm-input type="number" class="amount-input w-100" placeholder="Amount" min="0.0000001"
+                                step="0.00000001" error-text="Invalid amount" animate required>
+                                <div class="currency-symbol flex" slot="icon">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg"
+                                        enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
+                                        fill="#000000">
+                                        <g>
+                                            <rect fill="none" height="24" width="24"></rect>
+                                        </g>
+                                        <g>
+                                            <path
+                                                d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z">
+                                            </path>
+                                        </g>
+                                    </svg>
+                                </div>
+                            </sm-input>
+                        </div>
+                    </fieldset>
+                </div>
+                <button id="add_receiver" class="button button--small">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                    </svg>
+                    Add receiver</button>
+            </div>
+            <div class="grid gap-0-5">
+                <div class="flex align-center space-between">
+                    <h4>Fees</h4>
+                    <strip-select id="fees_selector">
+                        <strip-option value="suggested" selected>Suggested</strip-option>
+                        <strip-option value="custom">Custom</strip-option>
+                    </strip-select>
+                </div>
+                <p id="selected_fee_tip">Estimated time of confirmation is 1hr</p>
+                <sm-input type="number" id="send_fee" placeholder="Fee" min="0.00000001" step="0.00000001"
+                    error-text="Please enter valid fees" readonly animate required>
+                    <div class="currency-symbol flex" slot="icon">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <g>
+                                <rect fill="none" height="24" width="24"></rect>
+                            </g>
+                            <g>
+                                <path
+                                    d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z">
+                                </path>
+                            </g>
+                        </svg>
+                    </div>
+                </sm-input>
+            </div>
+            <div class="multi-state-button margin-bottom-1-5">
+                <button id="send_transaction" type="submit" class="button button--primary cta w-100"
+                    disabled>Send</button>
+            </div>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="txid_popup">
+        <header slot="header" class="popup__header">
+            <div class="flex align-center">
+                <button class="popup__header__close" onclick="closePopup()">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                    </svg>
+                </button>
+            </div>
+        </header>
+        <div class="grid gap-0-5 justify-center text-center">
+            <svg class="icon user-action-result__icon success" xmlns="http://www.w3.org/2000/svg" height="24px"
+                viewBox="0 0 24 24" width="24px" fill="#000000">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+            </svg>
+            <h4>Transaction sent</h4>
+            <sm-copy id="txid"></sm-copy>
+        </div>
+    </sm-popup>
     <sm-popup id="change_cashier_upi_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close justify-self-start">
@@ -998,7 +1223,7 @@
                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
             </button>
-            <h4>Change UPI ID</h4>
+            <h3>Change UPI ID</h3>
         </header>
         <sm-form>
             <sm-input id="upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9.\-_]{2,49}@[a-zA-Z._]{2,49}"
@@ -1068,7 +1293,7 @@
                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
             </button>
-            <h4>Confirm top-up</h4>
+            <h3>Confirm top-up</h3>
         </header>
         <div id="confirm_topup_wrapper">
             <div class="grid gap-1-5">
@@ -1120,39 +1345,6 @@
     </sm-popup>
 
     <!-- templates -->
-    <template id="saved_id_template">
-        <li class="saved-id grid interact" tabindex="0">
-            <button class="interact edit-saved icon-only" title="Edit name">
-                <div class="saved-id__initials"></div>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                    fill="#000000">
-                    <path d="M0 0h24v24H0z" fill="none" />
-                    <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-                </svg>
-            </button>
-            <div class="saved-id__title"></div>
-            <div class="grid align-center" style="grid-template-columns: 1fr auto;">
-                <div class="saved-id__flo-id overflow-ellipsis"></div>
-                <button class="copy-saved-id icon-only margin-left-0-5" title="Copy FLO ID">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                        fill="#000000">
-                        <path d="M0 0h24v24H0z" fill="none" />
-                        <path
-                            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
-                    </svg>
-                </button>
-            </div>
-        </li>
-    </template>
-    <template id="transaction_template">
-        <li class="transaction grid">
-            <div class="transaction__icon"></div>
-            <div class="transaction__receiver breakable"></div>
-            <time class="transaction__time"></time>
-            <div class="transaction__amount"></div>
-        </li>
-    </template>
     <template id="cashier_request_template">
         <li class="cashier-request flex-wrap">
             <div class="cashier-request__mode"></div>
@@ -1160,7 +1352,7 @@
             <div class="flex flex-wrap align-center gap-0-5 flex-1">
                 <time class="cashier-request__time"></time>
                 <div class="bullet-point"></div>
-                <div class="cashier-request__requestor breakable"></div>
+                <div class="cashier-request__requestor wrap-around"></div>
             </div>
             <div class="cashier-request__status"></div>
         </li>
@@ -1183,7 +1375,7 @@
     <template id="pending_payment_request_template">
         <li class="payment-request payment-request--pending">
             <div class="grid gap-0-5 flex-1">
-                <div class="payment-request__requestor breakable"></div>
+                <div class="payment-request__requestor wrap-around"></div>
                 <div class="payment-request__remark"></div>
             </div>
             <div class="payment-request__amount"></div>
@@ -1200,7 +1392,7 @@
         <li>
             <a href="" class="payment-request payment-request--processed interact">
                 <div class="grid gap-0-5 flex-1">
-                    <b class="payment-request__requestor breakable"></b>
+                    <b class="payment-request__requestor wrap-around"></b>
                     <div class="payment-request__remark"></div>
                 </div>
                 <div class="payment-request__amount"></div>
@@ -1218,19 +1410,6 @@
             <time class="transaction-message__time"></time>
         </li>
     </template>
-
-    <template id="saved_upi_template">
-        <li class="saved-upi">
-            <div class="saved-upi__id"></div>
-            <button class="delete-upi" title="Delete this UPI ID">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                    fill="#000000">
-                    <path d="M0 0h24v24H0z" fill="none" />
-                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-                </svg>
-            </button>
-        </li>
-    </template>
     <template id="conditional_steps_template">
         <li class="conditional">
             <p>Enter <b class="amount"></b> as amount</p>
@@ -1246,6 +1425,39 @@
             </div>
         </li>
     </template>
+    <template id="receiver_template">
+        <fieldset class="receiver-card">
+            <sm-input class="receiver-input" placeholder="Receiver address" data-btc-address
+                error-text="Invalid BTC address" animate required></sm-input>
+            <div class="flex align-start gap-0-5 remove-card-wrapper">
+                <sm-input type="number" class="amount-input w-100" placeholder="Amount" min="0.0000001"
+                    step="0.00000001" error-text="Invalid amount" animate required>
+                    <div class="currency-symbol flex" slot="icon">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <g>
+                                <rect fill="none" height="24" width="24"></rect>
+                            </g>
+                            <g>
+                                <path
+                                    d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z">
+                                </path>
+                            </g>
+                        </svg>
+                    </div>
+                </sm-input>
+                <button class="remove-card button--small">
+                    <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+                    </svg>
+                    Remove
+                </button>
+            </div>
+        </fieldset>
+    </template>
     <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="scripts/components.js"></script>
     <script src="scripts/std_ui.js"></script>
@@ -1259,8 +1471,10 @@
     <script src="scripts/fn_ui.js"></script>
     <script src="scripts/floTokenAPI.js"></script>
     <script src="scripts/floExchangeAPI.js"></script>
+    <script src="scripts/lib_btc.js"></script>
     <script src="scripts/qrcode.min.js"></script>
     <script id="onLoadStartUp">
+        let isShowingFloID = false;
         async function onLoadStartUp() {
             showPage('loading')
             console.log("Starting the app! Please Wait!")
@@ -1270,6 +1484,8 @@
             console.log('Exchange API initialized!')
             floDapps.launchStartUp().then(result => {
                 console.log(`Welcome ${myFloID}`);
+                getRef('user_flo_id').value = myFloID
+                getRef('user_btc_id').value = btc_api.convert.legacy2bech(myFloID)
                 getRef('flo_id_visibility_switcher').checked = localStorage.getItem(`${myFloID}_id_visibility`) === 'true'
                 toggleFloIDVisibility(localStorage.getItem(`${myFloID}_id_visibility`) === 'true')
                 getRef('flo_id_visibility_switcher').addEventListener('change', e => {
@@ -1280,7 +1496,27 @@
                 floGlobals.savedUserData = {
                     upiIds: {}
                 }
-                document.querySelectorAll('.logged-in-user-id').forEach(elem => elem.value = myFloID);
+                document.querySelectorAll('.logged-in-user-id').forEach(elem => {
+                    renderElem(elem, html`
+                        <svg class="icon margin-right-0-5" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3" width="58" height="58"> <rect fill="white" x="3" y="3" width="58" height="58" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" /> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" /> <path d="M31.946 43.6019L32.6728 42.915L31.918 42.1163L31.1938 42.943L31.946 43.6019ZM31.9811 55.1957L31.2716 55.9004L31.9657 56.5992L32.6749 55.9159L31.9811 55.1957ZM31.9487 10.6835L32.7051 11.3376L32.9487 11.0559V10.6835H31.9487ZM31.9433 37.4108L31.18 38.0569L31.9442 38.9597L32.7074 38.056L31.9433 37.4108ZM31.9487 10.6808L32.7068 10.0287L30.9487 7.98495V10.6808H31.9487ZM59 28.7654L59.9166 29.1651L60.4326 27.9819L59.158 27.778L59 28.7654ZM45.7214 42.53L45.1042 41.7432L46.0802 43.4634L45.7214 42.53ZM49.7984 39.3089L49.1332 38.5622L49.1326 38.5628L49.7984 39.3089ZM54.0293 32.6075L53.0647 32.3439L53.0646 32.3441L54.0293 32.6075ZM53.1896 31.406L53.3484 30.4187L53.348 30.4186L53.1896 31.406ZM45.1733 32.702L45.588 33.612L45.5881 33.6119L45.1733 32.702ZM34.1735 40.8938L33.467 40.1861L33.4585 40.1946L33.4501 40.2033L34.1735 40.8938ZM33.9899 41.2259L33.114 40.7435L32.3319 42.1635L33.9519 42.2252L33.9899 41.2259ZM48.119 49.9064L48.3359 50.8826L49.5751 50.6072L49.0173 49.4669L48.119 49.9064ZM37.778 48.5213L38.0715 47.5653L37.2372 49.3625L37.778 48.5213ZM45.176 48.5483L45.6045 49.4518L46.6008 48.9794L46.0335 48.0338L45.176 48.5483ZM44.231 47.0228L44.8645 46.2491L44.8637 46.2484L44.231 47.0228ZM40.505 44.3498L40.9866 43.4734L40.9845 43.4723L40.505 44.3498ZM33.5768 42.1682L33.7777 41.1886L31.6127 40.7446L32.7083 42.664L33.5768 42.1682ZM31.946 59L31.1626 59.6216L31.9457 60.6085L32.7292 59.6218L31.946 59ZM28.2389 50.8946L29.2314 50.7725L29.2314 50.7721L28.2389 50.8946ZM30.1991 42.3896L31.0736 42.8747L31.7652 41.6279L30.3574 41.4022L30.1991 42.3896ZM18.7916 48.5645L17.855 48.2141L17.5413 49.0527L18.3402 49.4568L18.7916 48.5645ZM26.33 48.3161L27.0473 49.0128L25.9814 47.3788L26.33 48.3161ZM15.8108 49.8335L14.9131 49.393L14.4073 50.4237L15.4977 50.7832L15.8108 49.8335ZM30.0263 41.2286L30.0635 42.2279L32.3372 42.1433L30.7373 40.5255L30.0263 41.2286ZM28.8167 40.0082L28.1226 40.7281L28.1228 40.7282L28.8167 40.0082ZM19.823 33.2366L19.3644 34.1252L19.3645 34.1253L19.823 33.2366ZM10.9481 31.3871L10.8001 30.3981L10.7998 30.3982L10.9481 31.3871ZM9.6656 31.6436L9.46564 30.6638L8.49474 30.8619L8.68401 31.8346L9.6656 31.6436ZM18.1274 42.3464L18.0073 43.3392L18.6607 41.5005L18.1274 42.3464ZM5 28.7546L4.84003 27.7675L3.75363 27.9435L4.03268 29.0082L5 28.7546ZM26.897 35.2319L26.173 35.9217L27.8093 34.8223L26.897 35.2319ZM31.946 5L32.7265 4.37488L31.9461 3.40036L31.1655 4.37483L31.946 5ZM31.1938 42.943C27.7974 46.8199 27.6566 52.261 31.2716 55.9004L32.6906 54.491C29.9012 51.6828 29.9116 47.4417 32.6982 44.2609L31.1938 42.943ZM32.6749 55.9159C36.1304 52.5867 36.081 46.5214 32.6728 42.915L31.2192 44.2888C33.94 47.1678 33.8852 51.9727 31.2873 54.4755L32.6749 55.9159ZM31.1923 10.0294C27.4048 14.4092 25.5379 19.2455 25.5737 24.1102C25.6095 28.971 27.5438 33.7608 31.18 38.0569L32.7066 36.7647C29.3201 32.7637 27.6054 28.4127 27.5736 24.0955C27.5419 19.7822 29.1891 15.4034 32.7051 11.3376L31.1923 10.0294ZM32.7074 38.056C36.4083 33.6729 38.31 28.8504 38.3133 23.9938C38.3165 19.1359 36.42 14.3451 32.7068 10.0287L31.1906 11.3329C34.6405 15.3433 36.3161 19.6839 36.3133 23.9925C36.3104 28.3024 34.6279 32.6815 31.1792 36.7656L32.7074 38.056ZM30.9487 10.6808V10.6835H32.9487V10.6808H30.9487ZM37.8259 35.7503C43.6131 29.8345 50.6632 28.444 58.842 29.7528L59.158 27.778C50.532 26.3976 42.7591 27.8475 36.3963 34.3517L37.8259 35.7503ZM58.0834 28.3657C55.4402 34.4268 51.7791 39.1301 45.3626 41.5966L46.0802 43.4634C53.1637 40.7405 57.1436 35.524 59.9166 29.1651L58.0834 28.3657ZM46.3386 43.3168C47.7733 42.1914 49.2057 41.178 50.4642 40.055L49.1326 38.5628C47.9341 39.6322 46.6503 40.5304 45.1042 41.7432L46.3386 43.3168ZM50.4636 40.0556C52.6466 38.111 54.2121 35.7338 54.994 32.871L53.0646 32.3441C52.3939 34.8002 51.0542 36.851 49.1332 38.5622L50.4636 40.0556ZM54.9939 32.8711C55.1262 32.3872 55.2248 31.6946 54.7698 31.1186C54.3643 30.6053 53.7257 30.4794 53.3484 30.4187L53.0308 32.3933C53.1086 32.4058 53.17 32.4181 53.2184 32.43C53.2671 32.442 53.2955 32.4518 53.3091 32.4572C53.3227 32.4626 53.3139 32.4606 53.2926 32.4461C53.2699 32.4307 53.2353 32.4025 53.2004 32.3583C53.1832 32.3366 53.1677 32.3132 53.1543 32.2886C53.1409 32.264 53.1307 32.2402 53.1231 32.2182C53.1079 32.1742 53.1053 32.144 53.1049 32.1366C53.1046 32.1302 53.1059 32.1427 53.1007 32.1797C53.0955 32.2165 53.0849 32.27 53.0647 32.3439L54.9939 32.8711ZM53.348 30.4186C50.274 29.9254 47.4176 30.5801 44.7585 31.7921L45.5881 33.6119C47.9996 32.5127 50.4514 31.9794 53.0312 32.3934L53.348 30.4186ZM44.7586 31.792C40.3293 33.8104 36.7535 36.9051 33.467 40.1861L34.88 41.6015C38.1113 38.3755 41.4853 35.4816 45.588 33.612L44.7586 31.792ZM33.4501 40.2033C33.3063 40.354 33.2291 40.5156 33.2033 40.5674C33.1672 40.64 33.1517 40.6749 33.114 40.7435L34.8658 41.7083C34.9307 41.5906 34.9786 41.4891 34.9945 41.4572C35.0049 41.4363 35.0004 41.4467 34.9882 41.4667C34.9731 41.4914 34.9435 41.5355 34.8969 41.5843L33.4501 40.2033ZM33.9519 42.2252C37.0233 42.3421 39.6629 43.0109 41.8597 44.3098C44.0485 45.6039 45.857 47.5582 47.2207 50.3459L49.0173 49.4669C47.5001 46.3659 45.4368 44.1014 42.8776 42.5882C40.3265 41.0798 37.342 40.3527 34.0279 40.2266L33.9519 42.2252ZM47.9021 48.9302C44.3241 49.7253 41.1983 49.5313 38.3188 47.6801L37.2372 49.3625C40.7081 51.5937 44.4295 51.7507 48.3359 50.8826L47.9021 48.9302ZM37.4845 49.4773C39.9089 50.2215 42.6205 50.8669 45.6045 49.4518L44.7475 47.6448C42.4935 48.7137 40.4315 48.2899 38.0715 47.5653L37.4845 49.4773ZM46.0335 48.0338C45.8849 47.7862 45.8212 47.6158 45.6292 47.2504C45.4736 46.9544 45.2423 46.5584 44.8645 46.2491L43.5975 47.7965C43.6517 47.8409 43.7309 47.9377 43.8588 48.181C43.9503 48.3549 44.1431 48.7704 44.3185 49.0628L46.0335 48.0338ZM44.8637 46.2484C43.6913 45.2906 42.4149 44.2582 40.9866 43.4734L40.0234 45.2262C41.2681 45.9102 42.4109 46.8272 43.5983 47.7972L44.8637 46.2484ZM40.9845 43.4723C38.7711 42.2628 36.3236 41.7107 33.7777 41.1886L33.3759 43.1478C35.9384 43.6733 38.1079 44.1796 40.0255 45.2273L40.9845 43.4723ZM32.7083 42.664C34.346 45.5328 34.9255 48.203 34.6411 50.7474C34.3555 53.3015 33.1882 55.8274 31.1628 58.3782L32.7292 59.6218C34.9185 56.8644 36.2905 53.9944 36.6287 50.9696C36.9679 47.9351 36.2555 44.8435 34.4453 41.6724L32.7083 42.664ZM32.7294 58.3784C30.8397 55.9968 29.577 53.5818 29.2314 50.7725L27.2464 51.0167C27.6514 54.3094 29.1319 57.0622 31.1626 59.6216L32.7294 58.3784ZM29.2314 50.7721C28.8877 47.9881 29.6602 45.4224 31.0736 42.8747L29.3247 41.9045C27.7842 44.6812 26.8341 47.6775 27.2464 51.0171L29.2314 50.7721ZM30.3574 41.4022C29.3303 41.2375 28.1125 41.4187 26.9159 41.7622C25.6987 42.1117 24.4105 42.6564 23.2045 43.307C21.999 43.9574 20.8488 44.728 19.9166 45.543C19.005 46.3399 18.2137 47.2553 17.855 48.2141L19.7282 48.9149C19.9149 48.4157 20.4139 47.7647 21.233 47.0487C22.0314 46.3507 23.0524 45.6616 24.1541 45.0672C25.2552 44.4732 26.4102 43.9882 27.4678 43.6846C28.5458 43.3751 29.4344 43.2798 30.0408 43.377L30.3574 41.4022ZM18.3402 49.4568C21.2702 50.939 24.0958 50.214 26.6786 49.2534L25.9814 47.3788C23.4828 48.3082 21.3728 48.7496 19.243 47.6722L18.3402 49.4568ZM25.6127 47.6194C24.9334 48.3187 23.4333 48.9382 21.5294 49.2141C19.6667 49.484 17.6562 49.3889 16.1239 48.8838L15.4977 50.7832C17.3971 51.4094 19.7336 51.4952 21.8162 51.1934C23.8578 50.8976 25.9014 50.1927 27.0473 49.0128L25.6127 47.6194ZM16.7085 50.274C18.0554 47.5292 19.8486 45.5942 22.044 44.3081C24.2482 43.0169 26.918 42.345 30.0635 42.2279L29.9891 40.2293C26.606 40.3552 23.5923 41.0832 21.0331 42.5824C18.4649 44.0869 16.4147 46.3328 14.9131 49.393L16.7085 50.274ZM30.7373 40.5255C30.2757 40.0586 29.8942 39.6578 29.5106 39.2882L28.1228 40.7282C28.4844 41.0768 28.8157 41.4266 29.3153 41.9317L30.7373 40.5255ZM29.5108 39.2883C26.7637 36.6396 23.7967 34.1615 20.2815 32.3479L19.3645 34.1253C22.6317 35.8109 25.4373 38.1388 28.1226 40.7281L29.5108 39.2883ZM20.2816 32.348C17.4111 30.8666 14.2829 29.877 10.8001 30.3981L11.0961 32.3761C14.0015 31.9414 16.6891 32.7446 19.3644 34.1252L20.2816 32.348ZM10.7998 30.3982C10.388 30.4599 9.94468 30.566 9.46564 30.6638L9.86556 32.6234C10.4449 32.5052 10.7522 32.4277 11.0964 32.376L10.7998 30.3982ZM8.68401 31.8346C9.73479 37.2345 13.3673 40.5279 17.5941 43.1923L18.6607 41.5005C14.6039 38.9431 11.5404 36.0427 10.6472 31.4526L8.68401 31.8346ZM18.2475 41.3536C17.3819 41.2489 16.2594 40.7693 14.9918 39.9335C13.742 39.1093 12.427 37.9891 11.1875 36.7057C8.68437 34.1137 6.62095 30.9947 5.96732 28.5011L4.03268 29.0082C4.81005 31.9739 7.13413 35.3875 9.74885 38.095C11.0683 39.4613 12.4947 40.6825 13.8908 41.6031C15.2691 42.512 16.6967 43.1806 18.0073 43.3392L18.2475 41.3536ZM5.15997 29.7417C13.3246 28.4186 20.4108 29.874 26.173 35.9217L27.621 34.5421C21.2872 27.8944 13.4694 26.369 4.84003 27.7675L5.15997 29.7417ZM27.8093 34.8223C25.3851 29.4232 24.8341 24.3801 25.7561 19.5859C26.6809 14.7778 29.1009 10.1516 32.7265 5.62517L31.1655 4.37483C27.4012 9.07433 24.7952 13.9927 23.7921 19.2082C22.7863 24.4378 23.4058 29.8977 25.9847 35.6415L27.8093 34.8223ZM31.1655 5.62512C34.7619 10.1157 37.1747 14.7077 38.1168 19.4869C39.0562 24.2523 38.5469 29.2701 36.1948 34.6504L38.0274 35.4515C40.5299 29.7268 41.1033 24.2956 40.0791 19.1001C39.0576 13.9183 36.4606 9.03731 32.7265 4.37488L31.1655 5.62512Z" mask="url(#path-1-outside-1_16_6)" /> </svg>
+                        <div class='overflow-ellipsis'>${myFloID}</div>
+                        `)
+                    setInterval(() => {
+                        if (!isShowingFloID) {
+                            renderElem(elem, html`
+                        <svg class="icon margin-right-0-5" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3" width="58" height="58"> <rect fill="white" x="3" y="3" width="58" height="58" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" /> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" /> <path d="M31.946 43.6019L32.6728 42.915L31.918 42.1163L31.1938 42.943L31.946 43.6019ZM31.9811 55.1957L31.2716 55.9004L31.9657 56.5992L32.6749 55.9159L31.9811 55.1957ZM31.9487 10.6835L32.7051 11.3376L32.9487 11.0559V10.6835H31.9487ZM31.9433 37.4108L31.18 38.0569L31.9442 38.9597L32.7074 38.056L31.9433 37.4108ZM31.9487 10.6808L32.7068 10.0287L30.9487 7.98495V10.6808H31.9487ZM59 28.7654L59.9166 29.1651L60.4326 27.9819L59.158 27.778L59 28.7654ZM45.7214 42.53L45.1042 41.7432L46.0802 43.4634L45.7214 42.53ZM49.7984 39.3089L49.1332 38.5622L49.1326 38.5628L49.7984 39.3089ZM54.0293 32.6075L53.0647 32.3439L53.0646 32.3441L54.0293 32.6075ZM53.1896 31.406L53.3484 30.4187L53.348 30.4186L53.1896 31.406ZM45.1733 32.702L45.588 33.612L45.5881 33.6119L45.1733 32.702ZM34.1735 40.8938L33.467 40.1861L33.4585 40.1946L33.4501 40.2033L34.1735 40.8938ZM33.9899 41.2259L33.114 40.7435L32.3319 42.1635L33.9519 42.2252L33.9899 41.2259ZM48.119 49.9064L48.3359 50.8826L49.5751 50.6072L49.0173 49.4669L48.119 49.9064ZM37.778 48.5213L38.0715 47.5653L37.2372 49.3625L37.778 48.5213ZM45.176 48.5483L45.6045 49.4518L46.6008 48.9794L46.0335 48.0338L45.176 48.5483ZM44.231 47.0228L44.8645 46.2491L44.8637 46.2484L44.231 47.0228ZM40.505 44.3498L40.9866 43.4734L40.9845 43.4723L40.505 44.3498ZM33.5768 42.1682L33.7777 41.1886L31.6127 40.7446L32.7083 42.664L33.5768 42.1682ZM31.946 59L31.1626 59.6216L31.9457 60.6085L32.7292 59.6218L31.946 59ZM28.2389 50.8946L29.2314 50.7725L29.2314 50.7721L28.2389 50.8946ZM30.1991 42.3896L31.0736 42.8747L31.7652 41.6279L30.3574 41.4022L30.1991 42.3896ZM18.7916 48.5645L17.855 48.2141L17.5413 49.0527L18.3402 49.4568L18.7916 48.5645ZM26.33 48.3161L27.0473 49.0128L25.9814 47.3788L26.33 48.3161ZM15.8108 49.8335L14.9131 49.393L14.4073 50.4237L15.4977 50.7832L15.8108 49.8335ZM30.0263 41.2286L30.0635 42.2279L32.3372 42.1433L30.7373 40.5255L30.0263 41.2286ZM28.8167 40.0082L28.1226 40.7281L28.1228 40.7282L28.8167 40.0082ZM19.823 33.2366L19.3644 34.1252L19.3645 34.1253L19.823 33.2366ZM10.9481 31.3871L10.8001 30.3981L10.7998 30.3982L10.9481 31.3871ZM9.6656 31.6436L9.46564 30.6638L8.49474 30.8619L8.68401 31.8346L9.6656 31.6436ZM18.1274 42.3464L18.0073 43.3392L18.6607 41.5005L18.1274 42.3464ZM5 28.7546L4.84003 27.7675L3.75363 27.9435L4.03268 29.0082L5 28.7546ZM26.897 35.2319L26.173 35.9217L27.8093 34.8223L26.897 35.2319ZM31.946 5L32.7265 4.37488L31.9461 3.40036L31.1655 4.37483L31.946 5ZM31.1938 42.943C27.7974 46.8199 27.6566 52.261 31.2716 55.9004L32.6906 54.491C29.9012 51.6828 29.9116 47.4417 32.6982 44.2609L31.1938 42.943ZM32.6749 55.9159C36.1304 52.5867 36.081 46.5214 32.6728 42.915L31.2192 44.2888C33.94 47.1678 33.8852 51.9727 31.2873 54.4755L32.6749 55.9159ZM31.1923 10.0294C27.4048 14.4092 25.5379 19.2455 25.5737 24.1102C25.6095 28.971 27.5438 33.7608 31.18 38.0569L32.7066 36.7647C29.3201 32.7637 27.6054 28.4127 27.5736 24.0955C27.5419 19.7822 29.1891 15.4034 32.7051 11.3376L31.1923 10.0294ZM32.7074 38.056C36.4083 33.6729 38.31 28.8504 38.3133 23.9938C38.3165 19.1359 36.42 14.3451 32.7068 10.0287L31.1906 11.3329C34.6405 15.3433 36.3161 19.6839 36.3133 23.9925C36.3104 28.3024 34.6279 32.6815 31.1792 36.7656L32.7074 38.056ZM30.9487 10.6808V10.6835H32.9487V10.6808H30.9487ZM37.8259 35.7503C43.6131 29.8345 50.6632 28.444 58.842 29.7528L59.158 27.778C50.532 26.3976 42.7591 27.8475 36.3963 34.3517L37.8259 35.7503ZM58.0834 28.3657C55.4402 34.4268 51.7791 39.1301 45.3626 41.5966L46.0802 43.4634C53.1637 40.7405 57.1436 35.524 59.9166 29.1651L58.0834 28.3657ZM46.3386 43.3168C47.7733 42.1914 49.2057 41.178 50.4642 40.055L49.1326 38.5628C47.9341 39.6322 46.6503 40.5304 45.1042 41.7432L46.3386 43.3168ZM50.4636 40.0556C52.6466 38.111 54.2121 35.7338 54.994 32.871L53.0646 32.3441C52.3939 34.8002 51.0542 36.851 49.1332 38.5622L50.4636 40.0556ZM54.9939 32.8711C55.1262 32.3872 55.2248 31.6946 54.7698 31.1186C54.3643 30.6053 53.7257 30.4794 53.3484 30.4187L53.0308 32.3933C53.1086 32.4058 53.17 32.4181 53.2184 32.43C53.2671 32.442 53.2955 32.4518 53.3091 32.4572C53.3227 32.4626 53.3139 32.4606 53.2926 32.4461C53.2699 32.4307 53.2353 32.4025 53.2004 32.3583C53.1832 32.3366 53.1677 32.3132 53.1543 32.2886C53.1409 32.264 53.1307 32.2402 53.1231 32.2182C53.1079 32.1742 53.1053 32.144 53.1049 32.1366C53.1046 32.1302 53.1059 32.1427 53.1007 32.1797C53.0955 32.2165 53.0849 32.27 53.0647 32.3439L54.9939 32.8711ZM53.348 30.4186C50.274 29.9254 47.4176 30.5801 44.7585 31.7921L45.5881 33.6119C47.9996 32.5127 50.4514 31.9794 53.0312 32.3934L53.348 30.4186ZM44.7586 31.792C40.3293 33.8104 36.7535 36.9051 33.467 40.1861L34.88 41.6015C38.1113 38.3755 41.4853 35.4816 45.588 33.612L44.7586 31.792ZM33.4501 40.2033C33.3063 40.354 33.2291 40.5156 33.2033 40.5674C33.1672 40.64 33.1517 40.6749 33.114 40.7435L34.8658 41.7083C34.9307 41.5906 34.9786 41.4891 34.9945 41.4572C35.0049 41.4363 35.0004 41.4467 34.9882 41.4667C34.9731 41.4914 34.9435 41.5355 34.8969 41.5843L33.4501 40.2033ZM33.9519 42.2252C37.0233 42.3421 39.6629 43.0109 41.8597 44.3098C44.0485 45.6039 45.857 47.5582 47.2207 50.3459L49.0173 49.4669C47.5001 46.3659 45.4368 44.1014 42.8776 42.5882C40.3265 41.0798 37.342 40.3527 34.0279 40.2266L33.9519 42.2252ZM47.9021 48.9302C44.3241 49.7253 41.1983 49.5313 38.3188 47.6801L37.2372 49.3625C40.7081 51.5937 44.4295 51.7507 48.3359 50.8826L47.9021 48.9302ZM37.4845 49.4773C39.9089 50.2215 42.6205 50.8669 45.6045 49.4518L44.7475 47.6448C42.4935 48.7137 40.4315 48.2899 38.0715 47.5653L37.4845 49.4773ZM46.0335 48.0338C45.8849 47.7862 45.8212 47.6158 45.6292 47.2504C45.4736 46.9544 45.2423 46.5584 44.8645 46.2491L43.5975 47.7965C43.6517 47.8409 43.7309 47.9377 43.8588 48.181C43.9503 48.3549 44.1431 48.7704 44.3185 49.0628L46.0335 48.0338ZM44.8637 46.2484C43.6913 45.2906 42.4149 44.2582 40.9866 43.4734L40.0234 45.2262C41.2681 45.9102 42.4109 46.8272 43.5983 47.7972L44.8637 46.2484ZM40.9845 43.4723C38.7711 42.2628 36.3236 41.7107 33.7777 41.1886L33.3759 43.1478C35.9384 43.6733 38.1079 44.1796 40.0255 45.2273L40.9845 43.4723ZM32.7083 42.664C34.346 45.5328 34.9255 48.203 34.6411 50.7474C34.3555 53.3015 33.1882 55.8274 31.1628 58.3782L32.7292 59.6218C34.9185 56.8644 36.2905 53.9944 36.6287 50.9696C36.9679 47.9351 36.2555 44.8435 34.4453 41.6724L32.7083 42.664ZM32.7294 58.3784C30.8397 55.9968 29.577 53.5818 29.2314 50.7725L27.2464 51.0167C27.6514 54.3094 29.1319 57.0622 31.1626 59.6216L32.7294 58.3784ZM29.2314 50.7721C28.8877 47.9881 29.6602 45.4224 31.0736 42.8747L29.3247 41.9045C27.7842 44.6812 26.8341 47.6775 27.2464 51.0171L29.2314 50.7721ZM30.3574 41.4022C29.3303 41.2375 28.1125 41.4187 26.9159 41.7622C25.6987 42.1117 24.4105 42.6564 23.2045 43.307C21.999 43.9574 20.8488 44.728 19.9166 45.543C19.005 46.3399 18.2137 47.2553 17.855 48.2141L19.7282 48.9149C19.9149 48.4157 20.4139 47.7647 21.233 47.0487C22.0314 46.3507 23.0524 45.6616 24.1541 45.0672C25.2552 44.4732 26.4102 43.9882 27.4678 43.6846C28.5458 43.3751 29.4344 43.2798 30.0408 43.377L30.3574 41.4022ZM18.3402 49.4568C21.2702 50.939 24.0958 50.214 26.6786 49.2534L25.9814 47.3788C23.4828 48.3082 21.3728 48.7496 19.243 47.6722L18.3402 49.4568ZM25.6127 47.6194C24.9334 48.3187 23.4333 48.9382 21.5294 49.2141C19.6667 49.484 17.6562 49.3889 16.1239 48.8838L15.4977 50.7832C17.3971 51.4094 19.7336 51.4952 21.8162 51.1934C23.8578 50.8976 25.9014 50.1927 27.0473 49.0128L25.6127 47.6194ZM16.7085 50.274C18.0554 47.5292 19.8486 45.5942 22.044 44.3081C24.2482 43.0169 26.918 42.345 30.0635 42.2279L29.9891 40.2293C26.606 40.3552 23.5923 41.0832 21.0331 42.5824C18.4649 44.0869 16.4147 46.3328 14.9131 49.393L16.7085 50.274ZM30.7373 40.5255C30.2757 40.0586 29.8942 39.6578 29.5106 39.2882L28.1228 40.7282C28.4844 41.0768 28.8157 41.4266 29.3153 41.9317L30.7373 40.5255ZM29.5108 39.2883C26.7637 36.6396 23.7967 34.1615 20.2815 32.3479L19.3645 34.1253C22.6317 35.8109 25.4373 38.1388 28.1226 40.7281L29.5108 39.2883ZM20.2816 32.348C17.4111 30.8666 14.2829 29.877 10.8001 30.3981L11.0961 32.3761C14.0015 31.9414 16.6891 32.7446 19.3644 34.1252L20.2816 32.348ZM10.7998 30.3982C10.388 30.4599 9.94468 30.566 9.46564 30.6638L9.86556 32.6234C10.4449 32.5052 10.7522 32.4277 11.0964 32.376L10.7998 30.3982ZM8.68401 31.8346C9.73479 37.2345 13.3673 40.5279 17.5941 43.1923L18.6607 41.5005C14.6039 38.9431 11.5404 36.0427 10.6472 31.4526L8.68401 31.8346ZM18.2475 41.3536C17.3819 41.2489 16.2594 40.7693 14.9918 39.9335C13.742 39.1093 12.427 37.9891 11.1875 36.7057C8.68437 34.1137 6.62095 30.9947 5.96732 28.5011L4.03268 29.0082C4.81005 31.9739 7.13413 35.3875 9.74885 38.095C11.0683 39.4613 12.4947 40.6825 13.8908 41.6031C15.2691 42.512 16.6967 43.1806 18.0073 43.3392L18.2475 41.3536ZM5.15997 29.7417C13.3246 28.4186 20.4108 29.874 26.173 35.9217L27.621 34.5421C21.2872 27.8944 13.4694 26.369 4.84003 27.7675L5.15997 29.7417ZM27.8093 34.8223C25.3851 29.4232 24.8341 24.3801 25.7561 19.5859C26.6809 14.7778 29.1009 10.1516 32.7265 5.62517L31.1655 4.37483C27.4012 9.07433 24.7952 13.9927 23.7921 19.2082C22.7863 24.4378 23.4058 29.8977 25.9847 35.6415L27.8093 34.8223ZM31.1655 5.62512C34.7619 10.1157 37.1747 14.7077 38.1168 19.4869C39.0562 24.2523 38.5469 29.2701 36.1948 34.6504L38.0274 35.4515C40.5299 29.7268 41.1033 24.2956 40.0791 19.1001C39.0576 13.9183 36.4606 9.03731 32.7265 4.37488L31.1655 5.62512Z" mask="url(#path-1-outside-1_16_6)" /> </svg>
+                        <div class='overflow-ellipsis'>${myFloID}</div>
+                        `)
+                            isShowingFloID = true
+                        } else {
+                            renderElem(elem, html`
+                        <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z"/></g></svg>
+                        <div class='overflow-ellipsis'>${btc_api.convert.legacy2bech(myFloID)}</div>
+                        `)
+                            isShowingFloID = false
+                        }
+                    }, 1000 * 60);
+                });
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
                 refreshBalance()
                 if (floGlobals.isSubAdmin) {
diff --git a/scripts/components.js b/scripts/components.js
index b5cbb52..b19787c 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -140,26 +140,26 @@ customElements.define('sm-button',
     })
 const smForm = document.createElement('template');
 smForm.innerHTML = `
-    <style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    }
-    :host{
-        display: flex;
-        width: 100%;
-    }
-    form{
-        display: grid;
-        gap: var(--gap, 1.5rem);
-        width: 100%;
-    }
-    </style>
-	<form part="form" onsubmit="return false">
-		<slot></slot>
-	</form>
-`;
+        <style>
+        *{
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+        :host{
+            display: grid;
+            width: 100%;
+        }
+        form{
+            display: inherit;
+            gap: var(--gap, 1.5rem);
+            width: 100%;
+        }
+        </style>
+        <form part="form" onsubmit="return false">
+            <slot></slot>
+        </form>
+    `;
 
 customElements.define('sm-form', class extends HTMLElement {
     constructor() {
@@ -173,7 +173,7 @@ customElements.define('sm-form', class extends HTMLElement {
         this.requiredElements
         this.submitButton
         this.resetButton
-        this.allRequiredValid = false;
+        this.invalidFields = false;
 
         this.debounce = this.debounce.bind(this)
         this._checkValidity = this._checkValidity.bind(this)
@@ -191,18 +191,13 @@ customElements.define('sm-form', class extends HTMLElement {
         };
     }
     _checkValidity() {
-        this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
         if (!this.submitButton) return;
-        if (this.allRequiredValid) {
-            this.submitButton.disabled = false;
-        }
-        else {
-            this.submitButton.disabled = true;
-        }
+        this.invalidFields = this.requiredElements.filter(elem => !elem.isValid)
+        this.submitButton.disabled = this.invalidFields.length;
     }
     handleKeydown(e) {
         if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) {
-            if (this.allRequiredValid) {
+            if (!this.invalidFields.length) {
                 if (this.submitButton) {
                     this.submitButton.click()
                 }
@@ -210,9 +205,8 @@ customElements.define('sm-form', class extends HTMLElement {
                     bubbles: true,
                     composed: true,
                 }))
-            }
-            else {
-                this.requiredElements.find(elem => !elem.isValid).vibrate()
+            } else {
+                this.requiredElements.forEach(elem => { if (!elem.isValid) elem.vibrate() })
             }
         }
     }
@@ -230,220 +224,230 @@ customElements.define('sm-form', class extends HTMLElement {
         this._checkValidity()
     }
     connectedCallback() {
-        const slot = this.shadowRoot.querySelector('slot')
-        slot.addEventListener('slotchange', this.elementsChanged)
+        this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged)
         this.addEventListener('input', this.debounce(this._checkValidity, 100));
         this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
+        const mutationObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'childList') {
+                    this.elementsChanged()
+                }
+            })
+        })
+        mutationObserver.observe(this, { childList: true, subtree: true })
     }
     disconnectedCallback() {
         this.removeEventListener('input', this.debounce(this._checkValidity, 100));
         this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
+        mutationObserver.disconnect()
     }
 })
 
+//Input
 const smInput = document.createElement('template')
 smInput.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration { display: none; }
-input[type=number] {
--moz-appearance:textfield;
-}
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0; 
-}
-input::-ms-reveal,
-input::-ms-clear {
-  display: none;
-}
-input:invalid{
-    outline: none;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-}
-::-moz-focus-inner{
-border: none;
-}
-:host{
-    display: flex;
-    --success-color: #00C853;
-    --danger-color: red;
-    --width: 100%;
-    --icon-gap: 0.5rem;
-    --background: rgba(var(--text-color, (17,17,17)), 0.06);
-}
-.hide{
-   display: none !important;
-}
-button{
-    display: flex;
-    border: none;
-    background: none;
-    padding: 0;
-    border-radius: 1rem;
-    min-width: 0;
-    cursor: pointer;
-}
-button:focus{
-    outline: var(--accent-color, teal) solid medium;
-}
-.icon {
-    height: 1.4rem;
-    width: 1.4rem;
-    fill: rgba(var(--text-color, (17,17,17)), 0.6);
-}
-
-:host(.round) .input{
-    border-radius: 10rem;
-}
-.input {
-    display: flex;
-    cursor: text;
-    min-width: 0;
-    text-align: left;
-            align-items: center;
-    position: relative;
-    gap: var(--icon-gap);
-    padding: var(--padding, 0.6rem 0.8rem);
-    border-radius: var(--border-radius,0.3rem);
-    transition: opacity 0.3s, box-shadow 0.2s;
-    background: var(--background);
-    width: 100%;
-    outline: none;
-    min-height: 3.5rem;
-}
-.input.readonly .clear{
-    opacity: 0 !important;
-    margin-right: -2rem;
-    pointer-events: none !important;
-}
-.readonly{
-    pointer-events: none;
-}
-.input:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
-}
-.disabled{
-    pointer-events: none;
-    opacity: 0.6;
-}
-.label {
-    grid-area: 1/1/2/2;
-    font-size: inherit;
-    opacity: .7;
-    font-weight: 400;
-    transition: -webkit-transform 0.3s;
-    transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s, color .03;
-        transform-origin: left;
-    pointer-events: none;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100%;
-    user-select: none;
-    will-change: transform;
-}
-.outer-container{
-    position: relative;
-    width: var(--width);
-}
-.container{
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    position: relative;
-    align-items: center;
-}    
-input{
-    grid-area: 1/1/2/2;
-    font-size: inherit;
-    border: none;
-    background: transparent;
-    outline: none;
-    color: inherit;
-    font-family: inherit;
-    width: 100%;
-    caret-color: var(--accent-color, teal);
-}
-:host([animate]) .input:focus-within .container input,
-.animate-placeholder .container input {
-    -webkit-transform: translateY(0.6rem);
-            -ms-transform: translateY(0.6rem);
-        transform: translateY(0.6rem);
+    <style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-results-button,
+    input[type="search"]::-webkit-search-results-decoration { display: none; }
+    input[type=number] {
+    -moz-appearance:textfield;
     }
-  
-    :host([animate]) .input:focus-within .label,
-    .animate-placeholder .label {
-    -webkit-transform: translateY(-0.7em) scale(0.8);
-            -ms-transform: translateY(-0.7em) scale(0.8);
-        transform: translateY(-0.7em) scale(0.8);
-    opacity: 1;
-    color: var(--accent-color,teal)
-}
-:host([variant="outlined"]) .input {
-    box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
-    background: rgba(var(--background-color, (255,255,255)), 1);
-}
-.animate-placeholder:focus-within:not(.readonly) .label{
-    color: var(--accent-color,teal)
-}
-.feedback-text:not(:empty){
-    display: flex;
-    width: 100%;
-    text-align: left;
-    font-size: 0.9rem;
-    align-items: center;
-    padding: 0.8rem 0;
-    color: rgba(var(--text-color, (17,17,17)), 0.8);
-}
-.success{
-    color: var(--success-color);
-}
-.error{
-    color: var(--danger-color);
-}
-.status-icon{
-    margin-right: 0.2rem;
-}
-.status-icon--error{
-    fill: var(--danger-color);
-}
-.status-icon--success{
-    fill: var(--success-color);
-}
-@media (any-hover: hover){
-    .icon:hover{
-        background: rgba(var(--text-color, (17,17,17)), 0.1);
+    input[type=number]::-webkit-inner-spin-button, 
+    input[type=number]::-webkit-outer-spin-button { 
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin: 0; 
     }
-}
-</style>
-<div class="outer-container">
-    <label part="input" class="input">
-        <slot name="icon"></slot>
-        <div class="container">
-            <input type="text"/>
-            <div part="placeholder" class="label"></div>
-            <button class="clear hide" title="Clear" tabindex="-1">
-                <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 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
-            </button>
-        </div>
-        <slot name="right"></slot>
-    </label>
-    <p class="feedback-text"></p>
-</div>
-`;
+    input::-ms-reveal,
+    input::-ms-clear {
+      display: none;
+    }
+    input:invalid{
+        outline: none;
+        -webkit-box-shadow: none;
+                box-shadow: none;
+    }
+    ::-moz-focus-inner{
+    border: none;
+    }
+    :host{
+        display: flex;
+        --success-color: #00C853;
+        --danger-color: red;
+        --width: 100%;
+        --icon-gap: 0.5rem;
+        --min-height: 3.2rem;
+        --background: rgba(var(--text-color, (17,17,17)), 0.06);
+    }
+    .hide{
+       display: none !important;
+    }
+    button{
+        display: flex;
+        border: none;
+        background: none;
+        padding: 0;
+        border-radius: 1rem;
+        min-width: 0;
+        cursor: pointer;
+    }
+    button:focus{
+        outline: var(--accent-color, teal) solid medium;
+    }
+    .icon {
+        height: 1.2rem;
+        width: 1.2rem;
+        fill: rgba(var(--text-color, (17,17,17)), 0.6);
+    }
+    
+    :host(.round) .input{
+        border-radius: 10rem;
+    }
+    .input {
+        display: flex;
+        cursor: text;
+        min-width: 0;
+        text-align: left;
+                align-items: center;
+        position: relative;
+        gap: var(--icon-gap);
+        padding: var(--padding, 0.6rem 0.8rem);
+        border-radius: var(--border-radius,0.3rem);
+        transition: opacity 0.3s, box-shadow 0.2s;
+        background: var(--background);
+        width: 100%;
+        outline: none;
+        min-height: var(--min-height);
+    }
+    .input.readonly .clear{
+        opacity: 0 !important;
+        margin-right: -2rem;
+        pointer-events: none !important;
+    }
+    .readonly{
+        pointer-events: none;
+    }
+    .input:focus-within:not(.readonly){
+        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
+    }
+    .disabled{
+        pointer-events: none;
+        opacity: 0.6;
+    }
+    .label {
+        grid-area: 1/1/2/2;
+        font-size: inherit;
+        opacity: .7;
+        font-weight: 400;
+        transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s, color .03;
+            transform-origin: left;
+        pointer-events: none;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 100%;
+        user-select: none;
+        will-change: transform;
+    }
+    .outer-container{
+        position: relative;
+        width: var(--width);
+    }
+    .container{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        position: relative;
+        align-items: center;
+    }    
+    input{
+        grid-area: 1/1/2/2;
+        font-size: inherit;
+        border: none;
+        background: transparent;
+        outline: none;
+        color: inherit;
+        font-family: inherit;
+        width: 100%;
+        caret-color: var(--accent-color, teal);
+    }
+    :host([animate]) .input:focus-within .container input,
+    .animate-placeholder .container input {
+        -webkit-transform: translateY(0.6rem);
+                -ms-transform: translateY(0.6rem);
+            transform: translateY(0.6rem);
+        }
+      
+        :host([animate]) .input:focus-within .label,
+        .animate-placeholder .label {
+        -webkit-transform: translateY(-0.7em) scale(0.8);
+                -ms-transform: translateY(-0.7em) scale(0.8);
+            transform: translateY(-0.7em) scale(0.8);
+        opacity: 1;
+        color: var(--accent-color,teal)
+    }
+    :host([variant="outlined"]) .input {
+        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
+        background: rgba(var(--background-color, (255,255,255)), 1);
+    }
+    .animate-placeholder:focus-within:not(.readonly) .label{
+        color: var(--accent-color,teal)
+    }
+    .feedback-text:not(:empty){
+        display: flex;
+        width: 100%;
+        text-align: left;
+        font-size: 0.9rem;
+        align-items: center;
+        padding: 0.8rem 0;
+        color: rgba(var(--text-color, (17,17,17)), 0.8);
+    }
+    .success{
+        color: var(--success-color);
+    }
+    .error{
+        color: var(--danger-color);
+    }
+    .status-icon{
+        margin-right: 0.2rem;
+    }
+    .status-icon--error{
+        fill: var(--danger-color);
+    }
+    .status-icon--success{
+        fill: var(--success-color);
+    }
+    @media (any-hover: hover){
+        .icon:hover{
+            background: rgba(var(--text-color, (17,17,17)), 0.1);
+        }
+    }
+    </style>
+    <div class="outer-container">
+        <label part="input" class="input">
+            <slot name="icon"></slot>
+            <div class="container">
+                <input type="text"/>
+                <div part="placeholder" class="label"></div>
+                <button class="clear hide" title="Clear" tabindex="-1">
+                    <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 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
+                </button>
+            </div>
+            <slot name="right"></slot>
+        </label>
+        <p class="feedback-text"></p>
+    </div>
+    `;
 customElements.define('sm-input',
     class extends HTMLElement {
 
@@ -471,6 +475,7 @@ customElements.define('sm-input',
             this.focusOut = this.focusOut.bind(this);
             this.fireEvent = this.fireEvent.bind(this);
             this.checkInput = this.checkInput.bind(this);
+            this.handleKeydown = this.handleKeydown.bind(this);
             this.vibrate = this.vibrate.bind(this);
         }
 
@@ -552,9 +557,9 @@ customElements.define('sm-input',
                         this.feedbackText.classList.add('error');
                         this.feedbackText.classList.remove('success');
                         this.feedbackText.innerHTML = `
-                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
-                        ${this._errorText}
-                        `;
+                                <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
+                            ${this._errorText}
+                            `;
                     }
                 }
                 return (_isValid && _customValid);
@@ -607,6 +612,15 @@ customElements.define('sm-input',
                 this.feedbackText.textContent = '';
             }
         }
+        handleKeydown(e) {
+            if (e.key.length === 1) {
+                if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'].includes(e.key)) {
+                    e.preventDefault();
+                } else if (e.key === '.' && e.target.value.includes('.')) {
+                    e.preventDefault();
+                }
+            }
+        }
         vibrate() {
             this.outerContainer.animate([
                 { transform: 'translateX(-1rem)' },
@@ -648,6 +662,10 @@ customElements.define('sm-input',
                 else if (name === 'type') {
                     if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
                         this.input.setAttribute('inputmode', 'decimal');
+                        this.input.addEventListener('keydown', this.handleKeydown);
+                    } else {
+                        this.input.removeEventListener('keydown', this.handleKeydown);
+
                     }
                 }
                 else if (name === 'helper-text') {
@@ -685,6 +703,7 @@ customElements.define('sm-input',
         disconnectedCallback() {
             this.input.removeEventListener('input', this.checkInput);
             this.clearBtn.removeEventListener('click', this.clear);
+            this.input.removeEventListener('keydown', this.handleKeydown);
         }
     })
 
@@ -3081,4 +3100,426 @@ customElements.define('sm-option', class extends HTMLElement {
         this.setAttribute('role', 'option')
         this.setAttribute('tabindex', '0')
     }
+})
+
+const smCarousel = document.createElement('template')
+smCarousel.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    --arrow-left: 1rem;
+    --arrow-right: 1rem;
+    --arrow-top: auto;
+    --arrow-bottom: auto;
+    --nav-icon-fill: rgba(var(--background-color, (255,255,255)), 1);
+    --nav-background-color: rgba(var(--text-color, (17,17,17)), 1);
+    --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
+    --indicator-top: auto;
+    --indicator-bottom: -1.5rem;
+    --indicator-height: 0.4rem;
+    --indicator-width: 0.4rem;
+    --indicator-border-radius: 0.4rem;
+    --indicators-gap: 0.5rem;
+    --active-indicator-color: var(--accent-color, teal);
+}
+.carousel__button{
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    cursor: pointer;
+    min-width: 0;
+    top:  var(--arrow-top);
+    bottom:  var(--arrow-bottom);
+    border: none;
+    background: var(--nav-background-color);
+    -webkit-box-shadow: var(--nav-box-shadow);
+            box-shadow:  var(--nav-box-shadow); 
+    -webkit-tap-highlight-color: transparent;
+    transition: transform 0.3s, opacity 0.3s;
+    z-index: 1;
+    border-radius: 3rem;
+    padding: 0.5rem;
+}
+button:focus{
+    outline: none;
+}
+button:focus-visible{
+    outline: rgba(var(--text-color, (17,17,17)), 1) 0.1rem solid;
+}
+.carousel__button:active{
+    transform: scale(0.9);
+}
+.carousel__button--left{
+    left: var(--arrow-left);
+}
+.carousel__button--right{
+    right: var(--arrow-right);
+}
+.icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    fill: var(--nav-icon-fill);
+}
+.hide{
+    display: none !important;
+}
+:host([indicator]) .carousel-container{
+    margin-bottom: 2rem;
+}
+.carousel-container{
+    position: relative;
+    display: grid;
+    width: 100%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.carousel{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    max-width: 100%;
+    width: 100%;
+    overflow: auto hidden;
+    -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: x mandatory;
+}
+.indicators{
+    display: -ms-grid;
+    display: grid;
+    grid-auto-flow: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    position: absolute;
+    padding: 0.5rem 0;
+    top: var(--indicator-top);
+    bottom: var(--indicator-bottom);
+    gap: var(--indicators-gap);
+    width: 100%;
+}
+.indicator{
+    position: relative;
+    height: var(--indicator-height);
+    width: var(--indicator-width);
+    background: rgba(var(--text-color), 0.3);
+    border-radius: var(--indicator-border-radius);
+    -webkit-transition: 0.2s;
+    -o-transition: 0.2s;
+    transition: 0.2s;
+    cursor: pointer;
+}
+.indicator.active{
+    background: var(--active-indicator-color);
+    transform: scale(1.2);
+}
+slot::slotted(*){
+    scroll-snap-align: center;
+}
+:host([align-items="start"]) slot::slotted(*){
+    scroll-snap-align: start;
+}
+:host([align-items="center"]) slot::slotted(*){
+    scroll-snap-align: center;
+}
+:host([align-items="end"]) slot::slotted(*){
+    scroll-snap-align: end;
+}
+@media (hover: hover){
+    .carousel{
+        overflow: hidden;
+    }
+    .carousel__button{
+        opacity: 0.8;
+    }
+    :host(:hover) .carousel__button{
+        opacity: 1;
+    }
+    .left,.right{
+        display: none;
+    }
+}
+@media (hover: none){
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent !important;
+    }
+    ::-webkit-scrollbar {
+        height: 0;
+        background-color: transparent;
+    }
+    .carousel{
+        overflow: auto none;
+    }
+    .carousel__button{
+        display: none;
+    }
+    .left,.right{
+        display: block;
+    }
+}
+</style>
+<div class="carousel-container">
+    <button class="carousel__button carousel__button--left hide">
+        <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.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
+    </button>
+    <div part="carousel" class="carousel">
+        <slot></slot>
+    </div>
+    <button class="carousel__button carousel__button--right hide">
+        <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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
+    </button>
+    <div class="indicators"></div>
+</div>
+`;
+
+customElements.define('sm-carousel', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smCarousel.content.cloneNode(true))
+
+        this.isAutoPlaying = false
+        this.autoPlayInterval = 5000
+        this.autoPlayTimeout
+        this.initialTimeout
+        this.activeSlideNum = 0
+        this.carouselItems
+        this.indicators
+        this.showIndicator = false
+        this.carousel = this.shadowRoot.querySelector('.carousel')
+        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
+        this.carouselSlot = this.shadowRoot.querySelector('slot')
+        this.navButtonRight = this.shadowRoot.querySelector('.carousel__button--right')
+        this.navButtonLeft = this.shadowRoot.querySelector('.carousel__button--left')
+        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
+
+        this.scrollLeft = this.scrollLeft.bind(this)
+        this.scrollRight = this.scrollRight.bind(this)
+        this.handleIndicatorClick = this.handleIndicatorClick.bind(this)
+        this.showSlide = this.showSlide.bind(this)
+        this.nextSlide = this.nextSlide.bind(this)
+        this.autoPlay = this.autoPlay.bind(this)
+        this.startAutoPlay = this.startAutoPlay.bind(this)
+        this.stopAutoPlay = this.stopAutoPlay.bind(this)
+    }
+
+    static get observedAttributes() {
+        return ['indicator', 'autoplay', 'interval']
+    }
+
+    scrollLeft() {
+        this.carousel.scrollBy({
+            left: -this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    scrollRight() {
+        this.carousel.scrollBy({
+            left: this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    showSlide(slideNum) {
+        this.carousel.scrollTo({
+            left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
+            behavior: 'smooth'
+        })
+    }
+
+    nextSlide() {
+        if (!this.carouselItems) return
+        let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
+        this.showSlide(showSlideNo)
+    }
+
+    autoPlay() {
+        this.nextSlide()
+        if (this.isAutoPlaying) {
+            this.autoPlayTimeout = setTimeout(() => {
+                this.autoPlay()
+            }, this.autoPlayInterval);
+        }
+    }
+
+    startAutoPlay() {
+        this.setAttribute('autoplay', '')
+    }
+
+    stopAutoPlay() {
+        this.removeAttribute('autoplay')
+    }
+
+    createIndicator(index) {
+        let indicator = document.createElement('div')
+        indicator.classList.add('indicator')
+        indicator.dataset.rank = index
+        return indicator
+    }
+
+    handleIndicatorClick(e) {
+        if (e.target.closest('.indicator')) {
+            const slideNum = parseInt(e.target.closest('.indicator').dataset.rank)
+            if (this.activeSlideNum !== slideNum) {
+                this.showSlide(slideNum)
+            }
+        }
+    }
+
+    handleKeyDown(e) {
+        if (e.code === 'ArrowLeft')
+            this.scrollRight()
+        else if (e.code === 'ArrowRight')
+            this.scrollRight()
+    }
+
+    connectedCallback() {
+        let frag = document.createDocumentFragment();
+
+        this.carouselSlot.addEventListener('slotchange', e => {
+            this.carouselItems = this.carouselSlot.assignedElements()
+            this.carouselItems.forEach(item => allElementsObserver.observe(item))
+            if (this.carouselItems.length > 0) {
+                firstOptionObserver.observe(this.carouselItems[0])
+                lastOptionObserver.observe(this.carouselItems[this.carouselItems.length - 1])
+            }
+            else {
+                navButtonLeft.classList.add('hide')
+                navButtonRight.classList.add('hide')
+                firstOptionObserver.disconnect()
+                lastOptionObserver.disconnect()
+            }
+            if (this.showIndicator) {
+                this.indicatorsContainer.innerHTML = ``
+                this.carouselItems.forEach((item, index) => {
+                    frag.append(
+                        this.createIndicator(index)
+                    )
+                    item.dataset.rank = index
+                })
+                this.indicatorsContainer.append(frag)
+                this.indicators = this.indicatorsContainer.children
+            }
+        })
+
+        const ioOptions = {
+            threshold: 0.9,
+            root: this
+        }
+        let activeElements = new Set()
+        const allElementsObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (this.showIndicator) {
+                    const activeRank = parseInt(entry.target.dataset.rank)
+                    if (entry.isIntersecting) {
+                        this.indicators[activeRank].classList.add('active')
+                        this.activeSlideNum = activeRank
+                        activeElements.add(activeRank)
+                    } else {
+                        this.indicators[activeRank].classList.remove('active')
+                        activeElements.delete(activeRank)
+                    }
+                }
+            })
+            if (activeElements.size === this.carouselItems.length) {
+                this.indicatorsContainer.classList.add('hide')
+            } else {
+                this.indicatorsContainer.classList.remove('hide')
+            }
+        }, ioOptions)
+
+
+        const firstOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.navButtonLeft.classList.add('hide')
+                }
+                else {
+                    this.navButtonLeft.classList.remove('hide')
+                }
+            })
+        },
+            ioOptions
+        )
+        const lastOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.navButtonRight.classList.add('hide')
+                }
+                else {
+                    this.navButtonRight.classList.remove('hide')
+                }
+            })
+        },
+            ioOptions
+        )
+
+        const resObs = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.contentBoxSize) {
+                    // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+                    const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+
+                    this.scrollDistance = contentBoxSize.inlineSize * 0.6
+                } else {
+                    this.scrollDistance = entry.contentRect.width * 0.6
+                }
+            })
+        })
+        resObs.observe(this)
+
+        this.addEventListener('keydown', this.handleKeyDown)
+
+        this.navButtonRight.addEventListener('click', this.scrollRight)
+        this.navButtonLeft.addEventListener('click', this.scrollLeft)
+        this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'indicator') {
+                this.showIndicator = this.hasAttribute('indicator')
+            }
+            if (name === 'autoplay') {
+                if (this.hasAttribute('autoplay')) {
+                    this.initialTimeout = setTimeout(() => {
+                        this.isAutoPlaying = true
+                        this.autoPlay()
+                    }, this.autoPlayInterval);
+                }
+                else {
+                    this.isAutoPlaying = false
+                    clearTimeout(this.autoPlayTimeout)
+                    clearTimeout(this.initialTimeout)
+                }
+
+            }
+            if (name === 'interval') {
+                if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
+                    this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
+                }
+                else {
+                    this.autoPlayInterval = 5000
+                }
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        this.navButtonRight.removeEventListener('click', this.scrollRight)
+        this.navButtonLeft.removeEventListener('click', this.scrollLeft)
+        this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick)
+    }
 })
\ No newline at end of file
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index a5e5a19..96d4c9e 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -140,12 +140,11 @@ function transferToExchange() {
 }
 
 async function renderSavedUpiIds() {
-    const frag = document.createDocumentFragment();
+    let savedUpiIds = []
     for (const upiId in floGlobals.savedUserData.upiIds) {
-        frag.append(render.savedUpiId(upiId));
+        savedUpiIds.push(render.savedUpiId(upiId))
     }
-    getRef('saved_upi_ids_list').innerHTML = '';
-    getRef('saved_upi_ids_list').append(frag);
+    renderElem(getRef('saved_upi_ids_list'), html`${savedUpiIds}`)
 }
 function saveUpiId() {
     const frag = document.createDocumentFragment();
@@ -158,10 +157,8 @@ function saveUpiId() {
     syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
         notify(`Saved ${upiId}`, 'success');
         if (pagesData.lastPage === 'settings') {
-            getRef('saved_upi_ids_list').append(render.savedUpiId(upiId));
+            getRef('saved_upi_ids_list').append(html.node`${render.savedUpiId(upiId)}`);
         } else if (pagesData.lastPage === 'home') {
-            // getRef('select_topup_upi_id').append(render.savedUpiIdOption(upiId));
-            // getRef('select_topup_upi_id').parentNode.classList.remove('hide')
             getRef('select_withdraw_upi_id').append(render.savedUpiIdOption(upiId));
             getRef('select_withdraw_upi_id').parentNode.classList.remove('hide')
         }
@@ -511,10 +508,10 @@ function getFloIdTitle(floID) {
     return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
 }
 
-function formatAmount(amount = 0) {
+function formatAmount(amount = 0, currency = 'inr') {
     if (!amount)
         return '₹0.00';
-    return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+    return amount.toLocaleString(currency === 'inr'? `en-IN`: 'en-US', { style: 'currency', currency })
 }
 
 const cashierRejectionErrors = {
@@ -525,34 +522,49 @@ const cashierRejectionErrors = {
 }
 
 const render = {
-    savedId(floID, details) {
+    savedId(floID, details,ref) {
         const { title } = details;
-        const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild;
-        clone.dataset.floId = floID;
-        clone.querySelector('.saved-id__initials').textContent = title.charAt(0);
-        clone.querySelector('.saved-id__title').textContent = title;
-        clone.querySelector('.saved-id__flo-id').textContent = floID;
-        return clone;
+        return html.for(ref,floID)`
+            <li class="saved-id grid interact" tabindex="0" data-flo-id="${floID}">
+                <button class="interact edit-saved icon-only" title="Edit name">
+                    <div class="saved-id__initials">${title.charAt(0)}</div>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /> </svg>
+                </button>
+                <div class="saved-id__title">${title}</div>
+                <div class="grid align-center" style="grid-template-columns: 1fr auto;">
+                    <div class="saved-id__flo-id overflow-ellipsis">${floID}</div>
+                    <button class="copy-saved-id icon-only margin-left-0-5" title="Copy FLO ID">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" /> </svg>
+                    </button>
+                </div>
+            </li>
+        `;
+        
     },
-    transactionCard(transactionDetails) {
+    rupeeTxCard(transactionDetails) {
         const { txid, time, sender, receiver, tokenAmount } = transactionDetails;
-        const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
-        clone.dataset.txid = txid;
-        clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
-        clone.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount);
+        let transactionReceiver 
+        let className 
+        let icon
         if (sender === myFloID) {
-            clone.classList.add('sent');
-            clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdTitle(receiver) || 'Myself'}`;
-            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
+            className = 'transaction grid sent'
+            transactionReceiver = `Sent to ${getFloIdTitle(receiver) || 'Myself'}`;
+            icon = svg`<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
         } else if (receiver === myFloID) {
-            clone.classList.add('received');
-            clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdTitle(sender)}`;
-            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
+            className = 'transaction grid received'
+            transactionReceiver = `Received from ${getFloIdTitle(sender)}`;
+            icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
         } else { //This should not happen unless API returns transaction that does not involve myFloID
-            row.insertCell().textContent = tx.sender;
-            row.insertCell().textContent = tx.receiver;
+            return html`sender: ${sender} | receiver: ${receiver}`;
         }
-        return clone;
+        return html.node`
+            <li class="${className}" data-txid="${txid}">
+                <div class="transaction__icon">${icon}</div>
+                <div class="transaction__receiver wrap-around">${transactionReceiver}</div>
+                <time class="transaction__time">${getFormattedTime(time * 1000)}</time>
+                <div class="transaction__amount">${formatAmount(tokenAmount)}</div>
+            </li>
+        `;
     },
     cashierRequestCard(details) {
         const { time, senderID, message: { mode, amount = 0 }, note, tag, vectorClock } = details;
@@ -633,23 +645,24 @@ const render = {
         return clone;
     },
     savedUpiId(upiId) {
-        const clone = getRef('saved_upi_template').content.cloneNode(true).firstElementChild;
-        clone.dataset.upiId = upiId;
-        clone.querySelector('.saved-upi__id').textContent = upiId;
-        return clone;
+        return html`
+            <li class="saved-upi" data-upi-id="${upiId}">
+                <div class="saved-upi__id">${upiId}</div>
+                <button class="delete-upi" title="Delete this UPI ID">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /> </svg>
+                </button>
+            </li>
+        `;
     },
     savedIdPickerCard(floID, { title }) {
-        return createElement('li', {
-            className: 'saved-id grid interact',
-            attributes: { 'tabindex': '0', 'data-flo-id': floID },
-            innerHTML: `
-                            <div class="saved-id__initials">${title[0]}</div>
-                            <div class="grid gap-0-5">
-                                <h4 class="saved-id__title">${title}</h4>
-                                <div class="saved-id__flo-id overflow-ellipsis">${floID}</div>
-                            </div>
-                            `
-        })
+        return html`
+            <li class="saved-id grid interact" tabindex="0" data-flo-id="${floID}">
+                <div class="saved-id__initials">${title[0]}</div>
+                <div class="grid gap-0-5">
+                    <h4 class="saved-id__title">${title}</h4>
+                    <div class="saved-id__flo-id overflow-ellipsis">${floID}</div>
+                </div>
+            </li>`
     },
     savedUpiIdOption(upiId) {
         return createElement('sm-option', {
@@ -659,10 +672,10 @@ const render = {
             }
         })
     },
-    paymentsHistory() {
+    rupeeHistory() {
         let paymentTransactions = []
-        if (paymentsHistoryLoader)
-            paymentsHistoryLoader.clear()
+        if (rupeeHistoryLoader)
+            rupeeHistoryLoader.clear()
         getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>';
         floTokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
             for (const transactionId in transactions) {
@@ -678,23 +691,77 @@ const render = {
             }
             // solve sorting issue at backend
             paymentTransactions.sort((a, b) => b.time - a.time);
-            if (paymentsHistoryLoader) {
-                paymentsHistoryLoader.update(paymentTransactions);
+            if (rupeeHistoryLoader) {
+                rupeeHistoryLoader.update(paymentTransactions);
             } else {
-                paymentsHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.transactionCard);
+                rupeeHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.rupeeTxCard);
             }
-            paymentsHistoryLoader.init();
+            rupeeHistoryLoader.init();
         }).catch(e => {
             console.error(e)
         })
     },
+    btcTxCard(transactionDetails) {
+        let { amount, time, txid, sender, receiver, type, block } = transactionDetails;
+        let transactionReceiver
+        let icon
+        // block = null
+        if (block) {
+            if (type === 'out') {
+                transactionReceiver = `Sent to ${receiver}`;
+                icon = svg`<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
+            } else if (type === 'in') {
+                transactionReceiver = `Received from ${sender}`;
+                icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
+            } else if (type === 'self') {
+                transactionReceiver = `Sent to self`;
+                icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
+            }
+        } else {
+            console.log(transactionDetails)
+            transactionReceiver = (type === 'out' ? `Sent to ${receiver}` : `Received from ${sender}`);
+            icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M6,2l0.01,6L10,12l-3.99,4.01L6,22h12v-6l-4-4l4-3.99V2H6z M16,16.5V20H8v-3.5l4-4L16,16.5z"/></g></svg>`;
+        }
+        const className = `btc-tx grid ${type} ${block === null ? 'unconfirmed-tx' : ''}`
+        return html.node`
+            <li class="${className}" data-txid="${txid}">
+                <div class="btc-tx__icon">${icon}</div>
+                <time class="btc-tx__time">${getFormattedTime(time)}</time>
+                <div class="btc-tx__amount amount-shown" data-btc-amount="${amount}">${formatAmount(amount, 'btc')}</div>
+                <div class="btc-tx__receiver wrap-around">${transactionReceiver}</div>
+                <div class="btc-tx__id wrap-around">TXID: ${txid}</div>
+                </li>
+                `;
+    },
+    btcHistory() {
+        try {
+            // render transactions
+            getRef('payments_history').innerHTML = '<sm-spinner class="justify-self-center margin-top-1-5"></sm-spinner>';
+            getAddressDetails( btc_api.convert.legacy2bech(myFloID)).then(result => {
+                if (result.txs.length) {
+                    let allTransactions = result.txs;
+                    const filter = getRef('payments_type_filter').querySelector('input:checked').value;
+                    if (filter !== 'all') {
+                        allTransactions = allTransactions.filter(t => filter === 'sent' ? t.type === 'out' : t.type === 'in')
+                    }
+                    console.log(allTransactions)
+                    if (btcHistoryLoader) {
+                        btcHistoryLoader.update(allTransactions)
+                    } else {
+                        btcHistoryLoader = new LazyLoader('#payments_history', allTransactions, render.btcTxCard)
+                    }
+                    btcHistoryLoader.init()
+                } else {
+                    getRef('payments_history').textContent = 'No transactions found';
+                }
+            }).catch(error => console.error(error))
+        } catch (err) {
+            notify(err, 'error');
+        }
+    },
     async savedIds() {
-        const frag = document.createDocumentFragment();
         await organizeSyncedData('savedIds');
-        getArrayOfSavedIds().forEach(({ floID, details }) => {
-            frag.append(render.savedId(floID, details));
-        })
-        getRef('saved_ids_list').append(frag);
+        renderElem(getRef('saved_ids_list'), html`${getArrayOfSavedIds().map(({floID, details}) => render.savedId(floID, details, getRef('saved_ids_list')))}`)
     },
     conditionalSteps() {
         if (getRef('topup_wallet__qr_wrapper').open) {
@@ -765,6 +832,14 @@ async function refreshBalance(button) {
     } catch (e) {
         console.error(e)
     }
+    btc_api.getBalance(btc_api.convert.legacy2bech(myFloID)).then(btcBalance => { 
+        if(btcBalance) {
+        const [beforeDecimal, afterDecimal = '00'] = String(btcBalance).split('.')
+        renderElem(getRef('btc_balance'), html`<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`)
+        } else {
+            renderElem(getRef('btc_balance'), html`<span><b>0</b></span>`)
+        }
+    })
 }
 
 function getArrayOfSavedIds() {
@@ -785,7 +860,7 @@ async function saveFloId() {
     floGlobals.savedIds[floID] = { title }
     buttonLoader('save_flo_id_button', true);
     syncUserData('savedIds', floGlobals.savedIds).then(() => {
-        insertElementAlphabetically(title, render.savedId(floID, { title }))
+        render.savedIds()
         notify(`Saved ${floID}`, 'success');
         closePopup();
     }).catch(error => {
@@ -797,6 +872,7 @@ async function saveFloId() {
 delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
     if (e.target.closest('.edit-saved')) {
         const target = e.target.closest('.saved-id');
+        console.log(target)
         getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
         getRef('get_new_title').value = getFloIdTitle(target.dataset.floId);
         openPopup('edit_saved_popup');
@@ -821,15 +897,7 @@ function saveIdChanges() {
         title = 'Unknown';
     floGlobals.savedIds[floID] = { title }
     syncUserData('savedIds', floGlobals.savedIds).then(() => {
-        const potentialTarget = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${floID}"]`)
-        if (potentialTarget) {
-            potentialTarget.querySelector('.saved-id__title').textContent = title;
-            potentialTarget.querySelector('.saved-id__initials').textContent = title.charAt(0).toUpperCase();
-            // place the renamed card in alphabetically correct position
-            const clone = potentialTarget.cloneNode(true);
-            potentialTarget.remove();
-            insertElementAlphabetically(title, clone)
-        }
+        render.savedIds()
         closePopup();
     }).catch(error => {
         notify(error, 'error');
@@ -855,7 +923,7 @@ function deleteSavedId() {
 }
 const savedIdsObserver = new MutationObserver((mutationList) => {
     mutationList.forEach(mutation => {
-        getRef('saved_ids_tip').textContent = mutation.target.children.length === 0 ? `Click 'Add FLO ID' to add a new FLO ID.` : `Tap on saved IDs to see transaction history.`
+        conditionalClassToggle(getRef('saved_ids_tip'), 'hide', !mutation.target.children.length);
     })
 })
 
@@ -883,11 +951,7 @@ getRef('search_saved_ids_picker').addEventListener('input', debounce(async e =>
         const fuse = new Fuse(allSavedIds, { keys: ['floID', 'details.title'] })
         allSavedIds = fuse.search(searchKey).map(v => v.item)
     }
-    allSavedIds.forEach(({ floID, details }) => {
-        frag.append(render.savedIdPickerCard(floID, details))
-    })
-    getRef('saved_ids_picker_list').innerHTML = '';
-    getRef('saved_ids_picker_list').append(frag);
+    renderElem(getRef('saved_ids_picker_list'), html`${allSavedIds.map(({ floID, details }) => render.savedIdPickerCard(floID, details))}`)
     if (searchKey !== '') {
         const potentialTarget = getRef('saved_ids_picker_list').firstElementChild
         if (potentialTarget) {
@@ -1028,7 +1092,6 @@ function toggleFilters() {
 
 function applyPaymentsFilters() {
     const filter = getRef('payments_type_filter').querySelector('input:checked').value;
-    getRef('history_applied_filters').innerHTML = ``;
     if (filter !== 'all') {
         renderElem(getRef('history_applied_filters'),
             html`
@@ -1042,21 +1105,33 @@ function applyPaymentsFilters() {
             </button>`);
     }
     toggleFilters()
-    render.paymentsHistory()
+    if (pagesData.params.asset == 'rupee') {
+        render.rupeeHistory()
+    } else {
+        render.btcHistory()
+    }
     closePopup()
 }
 function resetPaymentsFilters() {
     getRef('payments_type_filter').querySelector('input[value="all"]').checked = true;
-    render.paymentsHistory()
+    if (pagesData.params.asset == 'rupee') {
+        render.rupeeHistory()
+    } else {
+        render.btcHistory()
+    }
     closePopup()
     toggleFilters()
 }
 
 delegate(getRef('history_applied_filters'), 'click', '.applied-filter', e => {
-    const filter = e.delegateTarget.dataset.filter
-    const filterValue = e.delegateTarget.dataset.value
+    // const filter = e.delegateTarget.dataset.filter
+    // const filterValue = e.delegateTarget.dataset.value
     e.delegateTarget.remove()
-    render.paymentsHistory()
+    if (pagesData.params.asset == 'rupee') {
+        render.rupeeHistory()
+    } else {
+        render.btcHistory()
+    }
     toggleFilters()
 })
 
@@ -1110,4 +1185,166 @@ function signOut() {
             }
         });
 }
-    
\ No newline at end of file
+function getAddressDetails(address) {
+    return new Promise((resolve, reject) => {
+        btc_api.getAddressData(address).then(data => {
+            console.debug(data);
+            let details = {};
+            details.balance = data.balance;
+            details.address = data.address;
+            details.txs = data.txs.map(tx => {
+                let d = {
+                    txid: tx.txid,
+                    time: tx.time,
+                    block: tx.block_no
+                }
+                if (tx.outgoing) {
+                    d.type = "out";
+                    d.amount = 0;
+                    d.receiver = new Set();
+                    let change = 0;
+                    tx.outgoing.outputs.forEach(o => {
+                        if (o.address !== address) {
+                            d.receiver.add(o.address)
+                            d.amount += parseFloat(o.value)
+                        } else
+                            change += parseFloat(o.value)
+                    });
+                    d.receiver = Array.from(d.receiver);
+                    d.amount = parseFloat(d.amount.toFixed(8))
+                    d.fee = parseFloat((tx.outgoing.value - (d.amount + change)).toFixed(8))
+                    if (!d.amount && change > 0) {
+                        d.type = "self";
+                        d.amount = change
+                        delete d.receiver;
+                        d.address = address;
+                    }
+                } else if (tx.incoming) {
+                    d.type = "in";
+                    d.amount = parseFloat(tx.incoming.value);
+                    d.sender = Array.from(new Set(tx.incoming.inputs.map(i => i.address)));
+                }
+                return d;
+            })
+            resolve(details);
+        }).catch(error => reject(error))
+    })
+}
+function calculateBtcFees() {
+    fetch('https://bitcoiner.live/api/fees/estimates/latest').then(res => res.json()).then(data => {
+        const satPerByte = data.estimates['60'].sat_per_vbyte;
+        const legacyBytes = 200;
+        const segwitBytes = 77;
+        const fees = (legacyBytes * satPerByte + (0.25 * satPerByte) * segwitBytes) / Math.pow(10, 8);
+        getRef('send_fee').value = fees.toFixed(8);
+    }).catch(e => {
+        console.error(e)
+    })
+}
+
+function togglePrivateKeyVisibility(input) {
+    const target = input.closest('sm-input')
+    target.type = target.type === 'password' ? 'text' : 'password';
+    target.focusIn()
+}
+const txParticipantsObserver = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+        if (mutation.type === 'childList') {
+            if (mutation.addedNodes.length > 0 && mutation.target.children.length > 1) {
+                const removeButton = mutation.target.firstElementChild.querySelector('.remove-card')
+                if (!removeButton) {
+                    const newRemoveButton = html.node`
+                        <button class="remove-card button--small">
+                            <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0V0z" fill="none"></path>
+                                <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>
+                            </svg>
+                            Remove
+                        </button>
+                    `
+                    mutation.target.firstElementChild.querySelector('.remove-card-wrapper').appendChild(newRemoveButton)
+                }
+            } else if (mutation.removedNodes.length > 0 && mutation.target.children.length === 1) {
+                const removeButton = mutation.target.firstElementChild.querySelector('.remove-card')
+                if (removeButton) {
+                    removeButton.remove()
+                }
+            }
+        }
+    })
+})
+txParticipantsObserver.observe(getRef('receiver_container'), {
+    childList: true
+})
+let globalExchangeRate = {}
+async function getExchangeRate() {
+    return new Promise((resolve, reject) => {
+        Promise.all(['usd', 'inr'].map(cur => fetch(`https://bitpay.com/api/rates/btc/${cur}`))).then(responses => {
+            Promise.all(responses.map(res => res.json())).then(rates => {
+                rates.forEach(rate => {
+                    globalExchangeRate[rate.code.toLowerCase()] = rate.rate
+                })
+                globalExchangeRate.btc = 1
+                resolve(globalExchangeRate)
+            }).catch(err => console.log(err))
+        }).catch(err => console.log(err))
+    })
+}
+getRef('add_receiver').onclick = evt => {
+    let receiverCard = getRef('receiver_template').content.cloneNode(true)
+    if (!getRef('receiver_container').children.length) {
+        receiverCard.querySelector('.remove-card').remove()
+    }
+    receiverCard.querySelector('.currency-symbol').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <path d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z"> </path> </g> </svg>`
+    getRef('receiver_container').appendChild(receiverCard);
+    getRef('receiver_container').querySelectorAll('sm-input[data-btc-address]').forEach(input => input.customValidation = btc_api.validateAddress)
+}
+delegate(getRef('receiver_container'), 'click', '.remove-card', e => {
+        e.target.closest('.receiver-card').remove()
+})
+
+getRef('fees_selector').addEventListener('change', e => {
+    if (e.target.value !== 'custom') {
+        getRef('send_fee').readOnly = true;
+    }
+    switch (e.target.value) {
+        case 'custom':
+            getRef('send_fee').readOnly = false;
+            getRef('send_fee').focusIn();
+            getRef('selected_fee_tip').textContent = 'Set custom fee';
+            break;
+        case 'suggested':
+            getRef('selected_fee_tip').textContent = 'Estimated time of confirmation is 1hr'
+            calculateBtcFees();
+            break;
+    }
+})
+
+
+getRef('send_transaction').onclick = evt => {
+    buttonLoader('send_transaction', true)
+    const senders = btc_api.convert.legacy2bech(myFloID);
+    const privKeys = btc_api.convert.wif(myPrivKey);
+    const receivers = [...getRef('receiver_container').querySelectorAll('.receiver-input')].map(input => input.value.trim());
+    const amounts = [...getRef('receiver_container').querySelectorAll('.amount-input')].map(input => {
+        return parseFloat(input.value.trim())
+    });
+    const fee = parseFloat(getRef('send_fee').value.trim());
+    console.debug(senders, receivers, amounts, fee);
+    btc_api.sendTx(senders, privKeys, receivers, amounts, fee).then(result => {
+        console.log(result);
+        closePopup();
+        getRef('txid').value = result.txid;
+        openPopup('txid_popup');
+        getRef('send_tx').reset()
+        getExchangeRate().then(() => {
+            calculateBtcFees()
+        }).catch(e => {
+            console.error(e)
+        })
+    }).catch(error => {
+        notify(`Error sending transaction \n ${error}`, 'error');
+    }).finally(_ => {
+        buttonLoader('send_transaction', false)
+    })
+}
\ No newline at end of file
diff --git a/scripts/lib_btc.js b/scripts/lib_btc.js
new file mode 100644
index 0000000..a960481
--- /dev/null
+++ b/scripts/lib_btc.js
@@ -0,0 +1,2883 @@
+(function (GLOBAL) { //lib_btc v1.0.1
+    /* Utility Libraries required
+     * All credits for these codes belong to their respective creators, moderators and owners.
+     * For more info (including license and terms of use), please visit respective source.
+     */
+
+    //sha512.js
+    (function () {
+        /*
+            A JavaScript implementation of the SHA family of hashes, as defined in FIPS
+            PUB 180-2 as well as the corresponding HMAC implementation as defined in
+            FIPS PUB 198a
+           
+            Copyright Brian Turek 2008-2012
+            Distributed under the BSD License
+            See http://caligatio.github.com/jsSHA/ for more information
+           
+            Several functions taken from Paul Johnson
+           */
+        function n(a) {
+            throw a;
+        }
+        var q = null;
+
+        function s(a, b) {
+            this.a = a;
+            this.b = b
+        }
+
+        function u(a, b) {
+            var d = [],
+                h = (1 << b) - 1,
+                f = a.length * b,
+                g;
+            for (g = 0; g < f; g += b) d[g >>> 5] |= (a.charCodeAt(g / b) & h) << 32 - b - g % 32;
+            return {
+                value: d,
+                binLen: f
+            }
+        }
+
+        function x(a) {
+            var b = [],
+                d = a.length,
+                h, f;
+            0 !== d % 2 && n("String of HEX type must be in byte increments");
+            for (h = 0; h < d; h += 2) f = parseInt(a.substr(h, 2), 16), isNaN(f) && n("String of HEX type contains invalid characters"), b[h >>> 3] |= f << 24 - 4 * (h % 8);
+            return {
+                value: b,
+                binLen: 4 * d
+            }
+        }
+
+        function B(a) {
+            var b = [],
+                d = 0,
+                h, f, g, k, m; - 1 === a.search(/^[a-zA-Z0-9=+\/]+$/) && n("Invalid character in base-64 string");
+            h = a.indexOf("=");
+            a = a.replace(/\=/g, ""); - 1 !== h && h < a.length && n("Invalid '=' found in base-64 string");
+            for (f = 0; f < a.length; f += 4) {
+                m = a.substr(f, 4);
+                for (g = k = 0; g < m.length; g += 1) h = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".indexOf(m[g]), k |= h << 18 - 6 * g;
+                for (g = 0; g < m.length - 1; g += 1) b[d >> 2] |= (k >>> 16 - 8 * g & 255) << 24 - 8 * (d % 4), d += 1
+            }
+            return {
+                value: b,
+                binLen: 8 * d
+            }
+        }
+
+        function E(a, b) {
+            var d = "",
+                h = 4 * a.length,
+                f, g;
+            for (f = 0; f < h; f += 1) g = a[f >>> 2] >>> 8 * (3 - f % 4), d += "0123456789abcdef".charAt(g >>> 4 & 15) + "0123456789abcdef".charAt(g & 15);
+            return b.outputUpper ? d.toUpperCase() : d
+        }
+
+        function F(a, b) {
+            var d = "",
+                h = 4 * a.length,
+                f, g, k;
+            for (f = 0; f < h; f += 3) {
+                k = (a[f >>> 2] >>> 8 * (3 - f % 4) & 255) << 16 | (a[f + 1 >>> 2] >>> 8 * (3 - (f + 1) % 4) & 255) << 8 | a[f + 2 >>> 2] >>> 8 * (3 - (f + 2) % 4) & 255;
+                for (g = 0; 4 > g; g += 1) d = 8 * f + 6 * g <= 32 * a.length ? d + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".charAt(k >>> 6 * (3 - g) & 63) : d + b.b64Pad
+            }
+            return d
+        }
+
+        function G(a) {
+            var b = {
+                outputUpper: !1,
+                b64Pad: "="
+            };
+            try {
+                a.hasOwnProperty("outputUpper") && (b.outputUpper = a.outputUpper), a.hasOwnProperty("b64Pad") && (b.b64Pad = a.b64Pad)
+            } catch (d) { }
+            "boolean" !== typeof b.outputUpper && n("Invalid outputUpper formatting option");
+            "string" !== typeof b.b64Pad && n("Invalid b64Pad formatting option");
+            return b
+        }
+
+        function H(a, b) {
+            var d = q,
+                d = new s(a.a, a.b);
+            return d = 32 >= b ? new s(d.a >>> b | d.b << 32 - b & 4294967295, d.b >>> b | d.a << 32 - b & 4294967295) : new s(d.b >>> b - 32 | d.a << 64 - b & 4294967295, d.a >>> b - 32 | d.b << 64 - b & 4294967295)
+        }
+
+        function I(a, b) {
+            var d = q;
+            return d = 32 >= b ? new s(a.a >>> b, a.b >>> b | a.a << 32 - b & 4294967295) : new s(0, a.a >>> b - 32)
+        }
+
+        function J(a, b, d) {
+            return new s(a.a & b.a ^ ~a.a & d.a, a.b & b.b ^ ~a.b & d.b)
+        }
+
+        function U(a, b, d) {
+            return new s(a.a & b.a ^ a.a & d.a ^ b.a & d.a, a.b & b.b ^ a.b & d.b ^ b.b & d.b)
+        }
+
+        function V(a) {
+            var b = H(a, 28),
+                d = H(a, 34);
+            a = H(a, 39);
+            return new s(b.a ^ d.a ^ a.a, b.b ^ d.b ^ a.b)
+        }
+
+        function W(a) {
+            var b = H(a, 14),
+                d = H(a, 18);
+            a = H(a, 41);
+            return new s(b.a ^ d.a ^ a.a, b.b ^ d.b ^ a.b)
+        }
+
+        function X(a) {
+            var b = H(a, 1),
+                d = H(a, 8);
+            a = I(a, 7);
+            return new s(b.a ^ d.a ^ a.a, b.b ^ d.b ^ a.b)
+        }
+
+        function Y(a) {
+            var b = H(a, 19),
+                d = H(a, 61);
+            a = I(a, 6);
+            return new s(b.a ^ d.a ^ a.a, b.b ^ d.b ^ a.b)
+        }
+
+        function Z(a, b) {
+            var d, h, f;
+            d = (a.b & 65535) + (b.b & 65535);
+            h = (a.b >>> 16) + (b.b >>> 16) + (d >>> 16);
+            f = (h & 65535) << 16 | d & 65535;
+            d = (a.a & 65535) + (b.a & 65535) + (h >>> 16);
+            h = (a.a >>> 16) + (b.a >>> 16) + (d >>> 16);
+            return new s((h & 65535) << 16 | d & 65535, f)
+        }
+
+        function aa(a, b, d, h) {
+            var f, g, k;
+            f = (a.b & 65535) + (b.b & 65535) + (d.b & 65535) + (h.b & 65535);
+            g = (a.b >>> 16) + (b.b >>> 16) + (d.b >>> 16) + (h.b >>> 16) + (f >>> 16);
+            k = (g & 65535) << 16 | f & 65535;
+            f = (a.a & 65535) + (b.a & 65535) + (d.a & 65535) + (h.a & 65535) + (g >>> 16);
+            g = (a.a >>> 16) + (b.a >>> 16) + (d.a >>> 16) + (h.a >>> 16) + (f >>> 16);
+            return new s((g & 65535) << 16 | f & 65535, k)
+        }
+
+        function ba(a, b, d, h, f) {
+            var g, k, m;
+            g = (a.b & 65535) + (b.b & 65535) + (d.b & 65535) + (h.b & 65535) + (f.b & 65535);
+            k = (a.b >>> 16) + (b.b >>> 16) + (d.b >>> 16) + (h.b >>> 16) + (f.b >>> 16) + (g >>> 16);
+            m = (k & 65535) << 16 | g & 65535;
+            g = (a.a & 65535) + (b.a & 65535) + (d.a & 65535) + (h.a & 65535) + (f.a & 65535) + (k >>> 16);
+            k = (a.a >>> 16) + (b.a >>> 16) + (d.a >>> 16) + (h.a >>> 16) + (f.a >>> 16) + (g >>> 16);
+            return new s((k & 65535) << 16 | g & 65535, m)
+        }
+
+        function $(a, b, d) {
+            var h, f, g, k, m, j, A, C, K, e, L, v, l, M, t, p, y, z, r, N, O, P, Q, R, c, S, w = [],
+                T, D;
+            "SHA-384" === d || "SHA-512" === d ? (L = 80, h = (b + 128 >>> 10 << 5) + 31, M = 32, t = 2, c = s, p = Z, y = aa, z = ba, r = X, N = Y, O = V, P = W, R = U, Q = J, S = [new c(1116352408, 3609767458), new c(1899447441, 602891725), new c(3049323471, 3964484399), new c(3921009573, 2173295548), new c(961987163, 4081628472), new c(1508970993, 3053834265), new c(2453635748, 2937671579), new c(2870763221, 3664609560), new c(3624381080, 2734883394), new c(310598401, 1164996542), new c(607225278, 1323610764),
+            new c(1426881987, 3590304994), new c(1925078388, 4068182383), new c(2162078206, 991336113), new c(2614888103, 633803317), new c(3248222580, 3479774868), new c(3835390401, 2666613458), new c(4022224774, 944711139), new c(264347078, 2341262773), new c(604807628, 2007800933), new c(770255983, 1495990901), new c(1249150122, 1856431235), new c(1555081692, 3175218132), new c(1996064986, 2198950837), new c(2554220882, 3999719339), new c(2821834349, 766784016), new c(2952996808, 2566594879), new c(3210313671, 3203337956), new c(3336571891,
+                1034457026), new c(3584528711, 2466948901), new c(113926993, 3758326383), new c(338241895, 168717936), new c(666307205, 1188179964), new c(773529912, 1546045734), new c(1294757372, 1522805485), new c(1396182291, 2643833823), new c(1695183700, 2343527390), new c(1986661051, 1014477480), new c(2177026350, 1206759142), new c(2456956037, 344077627), new c(2730485921, 1290863460), new c(2820302411, 3158454273), new c(3259730800, 3505952657), new c(3345764771, 106217008), new c(3516065817, 3606008344), new c(3600352804, 1432725776), new c(4094571909,
+                    1467031594), new c(275423344, 851169720), new c(430227734, 3100823752), new c(506948616, 1363258195), new c(659060556, 3750685593), new c(883997877, 3785050280), new c(958139571, 3318307427), new c(1322822218, 3812723403), new c(1537002063, 2003034995), new c(1747873779, 3602036899), new c(1955562222, 1575990012), new c(2024104815, 1125592928), new c(2227730452, 2716904306), new c(2361852424, 442776044), new c(2428436474, 593698344), new c(2756734187, 3733110249), new c(3204031479, 2999351573), new c(3329325298, 3815920427), new c(3391569614,
+                        3928383900), new c(3515267271, 566280711), new c(3940187606, 3454069534), new c(4118630271, 4000239992), new c(116418474, 1914138554), new c(174292421, 2731055270), new c(289380356, 3203993006), new c(460393269, 320620315), new c(685471733, 587496836), new c(852142971, 1086792851), new c(1017036298, 365543100), new c(1126000580, 2618297676), new c(1288033470, 3409855158), new c(1501505948, 4234509866), new c(1607167915, 987167468), new c(1816402316, 1246189591)
+            ], e = "SHA-384" === d ? [new c(3418070365, 3238371032), new c(1654270250, 914150663),
+            new c(2438529370, 812702999), new c(355462360, 4144912697), new c(1731405415, 4290775857), new c(41048885895, 1750603025), new c(3675008525, 1694076839), new c(1203062813, 3204075428)
+            ] : [new c(1779033703, 4089235720), new c(3144134277, 2227873595), new c(1013904242, 4271175723), new c(2773480762, 1595750129), new c(1359893119, 2917565137), new c(2600822924, 725511199), new c(528734635, 4215389547), new c(1541459225, 327033209)]) : n("Unexpected error in SHA-2 implementation");
+            a[b >>> 5] |= 128 << 24 - b % 32;
+            a[h] = b;
+            T = a.length;
+            for (v = 0; v <
+                T; v += M) {
+                b = e[0];
+                h = e[1];
+                f = e[2];
+                g = e[3];
+                k = e[4];
+                m = e[5];
+                j = e[6];
+                A = e[7];
+                for (l = 0; l < L; l += 1) w[l] = 16 > l ? new c(a[l * t + v], a[l * t + v + 1]) : y(N(w[l - 2]), w[l - 7], r(w[l - 15]), w[l - 16]), C = z(A, P(k), Q(k, m, j), S[l], w[l]), K = p(O(b), R(b, h, f)), A = j, j = m, m = k, k = p(g, C), g = f, f = h, h = b, b = p(C, K);
+                e[0] = p(b, e[0]);
+                e[1] = p(h, e[1]);
+                e[2] = p(f, e[2]);
+                e[3] = p(g, e[3]);
+                e[4] = p(k, e[4]);
+                e[5] = p(m, e[5]);
+                e[6] = p(j, e[6]);
+                e[7] = p(A, e[7])
+            }
+            "SHA-384" === d ? D = [e[0].a, e[0].b, e[1].a, e[1].b, e[2].a, e[2].b, e[3].a, e[3].b, e[4].a, e[4].b, e[5].a, e[5].b] : "SHA-512" === d ? D = [e[0].a, e[0].b,
+            e[1].a, e[1].b, e[2].a, e[2].b, e[3].a, e[3].b, e[4].a, e[4].b, e[5].a, e[5].b, e[6].a, e[6].b, e[7].a, e[7].b
+            ] : n("Unexpected error in SHA-2 implementation");
+            return D
+        }
+        GLOBAL.jsSHA = function (a, b, d) {
+            var h = q,
+                f = q,
+                g = 0,
+                k = [0],
+                m = 0,
+                j = q,
+                m = "undefined" !== typeof d ? d : 8;
+            8 === m || 16 === m || n("charSize must be 8 or 16");
+            "HEX" === b ? (0 !== a.length % 2 && n("srcString of HEX type must be in byte increments"), j = x(a), g = j.binLen, k = j.value) : "ASCII" === b || "TEXT" === b ? (j = u(a, m), g = j.binLen, k = j.value) : "B64" === b ? (j = B(a), g = j.binLen, k = j.value) : n("inputFormat must be HEX, TEXT, ASCII, or B64");
+            this.getHash = function (a, b, d) {
+                var e = q,
+                    m = k.slice(),
+                    j = "";
+                switch (b) {
+                    case "HEX":
+                        e = E;
+                        break;
+                    case "B64":
+                        e = F;
+                        break;
+                    default:
+                        n("format must be HEX or B64")
+                }
+                "SHA-384" ===
+                    a ? (q === h && (h = $(m, g, a)), j = e(h, G(d))) : "SHA-512" === a ? (q === f && (f = $(m, g, a)), j = e(f, G(d))) : n("Chosen SHA variant is not supported");
+                return j
+            };
+            this.getHMAC = function (a, b, d, e, f) {
+                var h, l, j, t, p, y = [],
+                    z = [],
+                    r = q;
+                switch (e) {
+                    case "HEX":
+                        h = E;
+                        break;
+                    case "B64":
+                        h = F;
+                        break;
+                    default:
+                        n("outputFormat must be HEX or B64")
+                }
+                "SHA-384" === d ? (j = 128, p = 384) : "SHA-512" === d ? (j = 128, p = 512) : n("Chosen SHA variant is not supported");
+                "HEX" === b ? (r = x(a), t = r.binLen, l = r.value) : "ASCII" === b || "TEXT" === b ? (r = u(a, m), t = r.binLen, l = r.value) : "B64" === b ? (r = B(a),
+                    t = r.binLen, l = r.value) : n("inputFormat must be HEX, TEXT, ASCII, or B64");
+                a = 8 * j;
+                b = j / 4 - 1;
+                j < t / 8 ? (l = $(l, t, d), l[b] &= 4294967040) : j > t / 8 && (l[b] &= 4294967040);
+                for (j = 0; j <= b; j += 1) y[j] = l[j] ^ 909522486, z[j] = l[j] ^ 1549556828;
+                d = $(z.concat($(y.concat(k), a + g, d)), a + p, d);
+                return h(d, G(f))
+            }
+        };
+    })();
+
+    //coin.js
+    (function () {
+        /*
+                Coinjs 0.01 beta by OutCast3k{at}gmail.com
+                A bitcoin framework.
+                http://github.com/OutCast3k/coinjs or http://coinb.in/coinjs
+        */
+        var coinjs = GLOBAL.coinjs = function () { };
+
+        /* public vars */
+        coinjs.pub = 0x00;
+        coinjs.priv = 0x80;
+        coinjs.multisig = 0x05;
+        coinjs.hdkey = {
+            'prv': 0x0488ade4,
+            'pub': 0x0488b21e
+        };
+        coinjs.bech32 = {
+            'charset': 'qpzry9x8gf2tvdw0s3jn54khce6mua7l',
+            'version': 0,
+            'hrp': 'bc'
+        };
+
+        coinjs.compressed = false;
+
+        /* other vars */
+        coinjs.developer = '33tht1bKDgZVxb39MnZsWa8oxHXHvUYE4G'; //bitcoin
+
+        /* bit(coinb.in) api vars */
+        coinjs.hostname = ((document.location.hostname.split(".")[(document.location.hostname.split(".")).length - 1]) == 'onion') ? 'coinbin3ravkwb24f7rmxx6w3snkjw45jhs5lxbh3yfeg3vpt6janwqd.onion' : 'coinb.in';
+        coinjs.host = ('https:' == document.location.protocol ? 'https://' : 'http://') + coinjs.hostname + '/api/';
+        coinjs.uid = '1';
+        coinjs.key = '12345678901234567890123456789012';
+
+        /* start of address functions */
+
+        /* generate a private and public keypair, with address and WIF address */
+        coinjs.newKeys = function (input) {
+            var privkey = (input) ? Crypto.SHA256(input) : this.newPrivkey();
+            var pubkey = this.newPubkey(privkey);
+            return {
+                'privkey': privkey,
+                'pubkey': pubkey,
+                'address': this.pubkey2address(pubkey),
+                'wif': this.privkey2wif(privkey),
+                'compressed': this.compressed
+            };
+        }
+
+        /* generate a new random private key */
+        coinjs.newPrivkey = function () {
+            var x = GLOBAL.location;
+            x += (GLOBAL.screen.height * GLOBAL.screen.width * GLOBAL.screen.colorDepth);
+            x += coinjs.random(64);
+            x += (GLOBAL.screen.availHeight * GLOBAL.screen.availWidth * GLOBAL.screen.pixelDepth);
+            x += navigator.language;
+            x += GLOBAL.history.length;
+            x += coinjs.random(64);
+            x += navigator.userAgent;
+            x += 'coinb.in';
+            x += (Crypto.util.randomBytes(64)).join("");
+            x += x.length;
+            var dateObj = new Date();
+            x += dateObj.getTimezoneOffset();
+            x += coinjs.random(64);
+            x += (document.getElementById("entropybucket")) ? document.getElementById("entropybucket").innerHTML : '';
+            x += x + '' + x;
+            var r = x;
+            for (i = 0; i < (x).length / 25; i++) {
+                r = Crypto.SHA256(r.concat(x));
+            }
+            var checkrBigInt = new BigInteger(r);
+            var orderBigInt = new BigInteger("fffffffffffffffffffffffffffffffebaaedce6af48a03bbfd25e8cd0364141");
+            while (checkrBigInt.compareTo(orderBigInt) >= 0 || checkrBigInt.equals(BigInteger.ZERO) || checkrBigInt.equals(BigInteger.ONE)) {
+                r = Crypto.SHA256(r.concat(x));
+                checkrBigInt = new BigInteger(r);
+            }
+            return r;
+        }
+
+        /* generate a public key from a private key */
+        coinjs.newPubkey = function (hash) {
+            var privateKeyBigInt = BigInteger.fromByteArrayUnsigned(Crypto.util.hexToBytes(hash));
+            var curve = EllipticCurve.getSECCurveByName("secp256k1");
+
+            var curvePt = curve.getG().multiply(privateKeyBigInt);
+            var x = curvePt.getX().toBigInteger();
+            var y = curvePt.getY().toBigInteger();
+
+            var publicKeyBytes = EllipticCurve.integerToBytes(x, 32);
+            publicKeyBytes = publicKeyBytes.concat(EllipticCurve.integerToBytes(y, 32));
+            publicKeyBytes.unshift(0x04);
+
+            if (coinjs.compressed == true) {
+                var publicKeyBytesCompressed = EllipticCurve.integerToBytes(x, 32)
+                if (y.isEven()) {
+                    publicKeyBytesCompressed.unshift(0x02)
+                } else {
+                    publicKeyBytesCompressed.unshift(0x03)
+                }
+                return Crypto.util.bytesToHex(publicKeyBytesCompressed);
+            } else {
+                return Crypto.util.bytesToHex(publicKeyBytes);
+            }
+        }
+
+        /* provide a public key and return address */
+        coinjs.pubkey2address = function (h, byte) {
+            var r = ripemd160(Crypto.SHA256(Crypto.util.hexToBytes(h), {
+                asBytes: true
+            }));
+            r.unshift(byte || coinjs.pub);
+            var hash = Crypto.SHA256(Crypto.SHA256(r, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var checksum = hash.slice(0, 4);
+            return coinjs.base58encode(r.concat(checksum));
+        }
+
+        /* provide a scripthash and return address */
+        coinjs.scripthash2address = function (h) {
+            var x = Crypto.util.hexToBytes(h);
+            x.unshift(coinjs.pub);
+            var r = x;
+            r = Crypto.SHA256(Crypto.SHA256(r, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var checksum = r.slice(0, 4);
+            return coinjs.base58encode(x.concat(checksum));
+        }
+
+        /* new multisig address, provide the pubkeys AND required signatures to release the funds */
+        coinjs.pubkeys2MultisigAddress = function (pubkeys, required) {
+            var s = coinjs.script();
+            s.writeOp(81 + (required * 1) - 1); //OP_1
+            for (var i = 0; i < pubkeys.length; ++i) {
+                s.writeBytes(Crypto.util.hexToBytes(pubkeys[i]));
+            }
+            s.writeOp(81 + pubkeys.length - 1); //OP_1 
+            s.writeOp(174); //OP_CHECKMULTISIG
+            var x = ripemd160(Crypto.SHA256(s.buffer, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            x.unshift(coinjs.multisig);
+            var r = x;
+            r = Crypto.SHA256(Crypto.SHA256(r, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var checksum = r.slice(0, 4);
+            var redeemScript = Crypto.util.bytesToHex(s.buffer);
+            var address = coinjs.base58encode(x.concat(checksum));
+
+            if (s.buffer.length > 520) { // too large
+                address = 'invalid';
+                redeemScript = 'invalid';
+            }
+
+            return {
+                'address': address,
+                'redeemScript': redeemScript,
+                'size': s.buffer.length
+            };
+        }
+
+        /* new time locked address, provide the pubkey and time necessary to unlock the funds.
+           when time is greater than 500000000, it should be a unix timestamp (seconds since epoch),
+           otherwise it should be the block height required before this transaction can be released. 
+
+           may throw a string on failure!
+        */
+        coinjs.simpleHodlAddress = function (pubkey, checklocktimeverify) {
+
+            if (checklocktimeverify < 0) {
+                throw "Parameter for OP_CHECKLOCKTIMEVERIFY is negative.";
+            }
+
+            var s = coinjs.script();
+            if (checklocktimeverify <= 16 && checklocktimeverify >= 1) {
+                s.writeOp(0x50 + checklocktimeverify); //OP_1 to OP_16 for minimal encoding
+            } else {
+                s.writeBytes(coinjs.numToScriptNumBytes(checklocktimeverify));
+            }
+            s.writeOp(177); //OP_CHECKLOCKTIMEVERIFY
+            s.writeOp(117); //OP_DROP
+            s.writeBytes(Crypto.util.hexToBytes(pubkey));
+            s.writeOp(172); //OP_CHECKSIG
+
+            var x = ripemd160(Crypto.SHA256(s.buffer, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            x.unshift(coinjs.multisig);
+            var r = x;
+            r = Crypto.SHA256(Crypto.SHA256(r, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var checksum = r.slice(0, 4);
+            var redeemScript = Crypto.util.bytesToHex(s.buffer);
+            var address = coinjs.base58encode(x.concat(checksum));
+
+            return {
+                'address': address,
+                'redeemScript': redeemScript
+            };
+        }
+
+        /* create a new segwit address */
+        coinjs.segwitAddress = function (pubkey) {
+            var keyhash = [0x00, 0x14].concat(ripemd160(Crypto.SHA256(Crypto.util.hexToBytes(pubkey), {
+                asBytes: true
+            }), {
+                asBytes: true
+            }));
+            var x = ripemd160(Crypto.SHA256(keyhash, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            x.unshift(coinjs.multisig);
+            var r = x;
+            r = Crypto.SHA256(Crypto.SHA256(r, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var checksum = r.slice(0, 4);
+            var address = coinjs.base58encode(x.concat(checksum));
+
+            return {
+                'address': address,
+                'type': 'segwit',
+                'redeemscript': Crypto.util.bytesToHex(keyhash)
+            };
+        }
+
+        /* create a new segwit bech32 encoded address */
+        coinjs.bech32Address = function (pubkey) {
+            var program = ripemd160(Crypto.SHA256(Crypto.util.hexToBytes(pubkey), {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var address = coinjs.bech32_encode(coinjs.bech32.hrp, [coinjs.bech32.version].concat(coinjs.bech32_convert(program, 8, 5, true)));
+            return {
+                'address': address,
+                'type': 'bech32',
+                'redeemscript': Crypto.util.bytesToHex(program)
+            };
+        }
+
+        /* extract the redeemscript from a bech32 address */
+        coinjs.bech32redeemscript = function (address) {
+            var r = false;
+            var decode = coinjs.bech32_decode(address);
+            if (decode) {
+                decode.data.shift();
+                return Crypto.util.bytesToHex(coinjs.bech32_convert(decode.data, 5, 8, false));
+            }
+            return r;
+        }
+
+        /* provide a privkey and return an WIF  */
+        coinjs.privkey2wif = function (h) {
+            var r = Crypto.util.hexToBytes(h);
+
+            if (coinjs.compressed == true) {
+                r.push(0x01);
+            }
+
+            r.unshift(coinjs.priv);
+            var hash = Crypto.SHA256(Crypto.SHA256(r, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
+            var checksum = hash.slice(0, 4);
+
+            return coinjs.base58encode(r.concat(checksum));
+        }
+
+        /* convert a wif key back to a private key */
+        coinjs.wif2privkey = function (wif) {
+            var compressed = false;
+            var decode = coinjs.base58decode(wif);
+            var key = decode.slice(0, decode.length - 4);
+            key = key.slice(1, key.length);
+            if (key.length >= 33 && key[key.length - 1] == 0x01) {
+                key = key.slice(0, key.length - 1);
+                compressed = true;
+            }
+            return {
+                'privkey': Crypto.util.bytesToHex(key),
+                'compressed': compressed
+            };
+        }
+
+        /* convert a wif to a pubkey */
+        coinjs.wif2pubkey = function (wif) {
+            var compressed = coinjs.compressed;
+            var r = coinjs.wif2privkey(wif);
+            coinjs.compressed = r['compressed'];
+            var pubkey = coinjs.newPubkey(r['privkey']);
+            coinjs.compressed = compressed;
+            return {
+                'pubkey': pubkey,
+                'compressed': r['compressed']
+            };
+        }
+
+        /* convert a wif to a address */
+        coinjs.wif2address = function (wif) {
+            var r = coinjs.wif2pubkey(wif);
+            return {
+                'address': coinjs.pubkey2address(r['pubkey']),
+                'compressed': r['compressed']
+            };
+        }
+
+        /* decode or validate an address and return the hash */
+        coinjs.addressDecode = function (addr) {
+            try {
+                var bytes = coinjs.base58decode(addr);
+                var front = bytes.slice(0, bytes.length - 4);
+                var back = bytes.slice(bytes.length - 4);
+                var checksum = Crypto.SHA256(Crypto.SHA256(front, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                }).slice(0, 4);
+                if (checksum + "" == back + "") {
+
+                    var o = {};
+                    o.bytes = front.slice(1);
+                    o.version = front[0];
+
+                    if (o.version == coinjs.pub) { // standard address
+                        o.type = 'standard';
+
+                    } else if (o.version == coinjs.multisig) { // multisig address
+                        o.type = 'multisig';
+
+                    } else if (o.version == coinjs.priv) { // wifkey
+                        o.type = 'wifkey';
+
+                    } else if (o.version == 42) { // stealth address
+                        o.type = 'stealth';
+
+                        o.option = front[1];
+                        if (o.option != 0) {
+                            alert("Stealth Address option other than 0 is currently not supported!");
+                            return false;
+                        };
+
+                        o.scankey = Crypto.util.bytesToHex(front.slice(2, 35));
+                        o.n = front[35];
+
+                        if (o.n > 1) {
+                            alert("Stealth Multisig is currently not supported!");
+                            return false;
+                        };
+
+                        o.spendkey = Crypto.util.bytesToHex(front.slice(36, 69));
+                        o.m = front[69];
+                        o.prefixlen = front[70];
+
+                        if (o.prefixlen > 0) {
+                            alert("Stealth Address Prefixes are currently not supported!");
+                            return false;
+                        };
+                        o.prefix = front.slice(71);
+
+                    } else { // everything else
+                        o.type = 'other'; // address is still valid but unknown version
+                    }
+
+                    return o;
+                } else {
+                    throw "Invalid checksum";
+                }
+            } catch (e) {
+                bech32rs = coinjs.bech32redeemscript(addr);
+                if (bech32rs) {
+                    return {
+                        'type': 'bech32',
+                        'redeemscript': bech32rs
+                    };
+                } else {
+                    return false;
+                }
+            }
+        }
+
+        /* retreive the balance from a given address */
+        coinjs.addressBalance = function (address, callback) {
+            coinjs.ajax(coinjs.host + '?uid=' + coinjs.uid + '&key=' + coinjs.key + '&setmodule=addresses&request=bal&address=' + address + '&r=' + Math.random(), callback, "GET");
+        }
+
+        /* decompress an compressed public key */
+        coinjs.pubkeydecompress = function (pubkey) {
+            if ((typeof (pubkey) == 'string') && pubkey.match(/^[a-f0-9]+$/i)) {
+                var curve = EllipticCurve.getSECCurveByName("secp256k1");
+                try {
+                    var pt = curve.curve.decodePointHex(pubkey);
+                    var x = pt.getX().toBigInteger();
+                    var y = pt.getY().toBigInteger();
+
+                    var publicKeyBytes = EllipticCurve.integerToBytes(x, 32);
+                    publicKeyBytes = publicKeyBytes.concat(EllipticCurve.integerToBytes(y, 32));
+                    publicKeyBytes.unshift(0x04);
+                    return Crypto.util.bytesToHex(publicKeyBytes);
+                } catch (e) {
+                    // console.log(e);
+                    return false;
+                }
+            }
+            return false;
+        }
+
+        coinjs.bech32_polymod = function (values) {
+            var chk = 1;
+            var BECH32_GENERATOR = [0x3b6a57b2, 0x26508e6d, 0x1ea119fa, 0x3d4233dd, 0x2a1462b3];
+            for (var p = 0; p < values.length; ++p) {
+                var top = chk >> 25;
+                chk = (chk & 0x1ffffff) << 5 ^ values[p];
+                for (var i = 0; i < 5; ++i) {
+                    if ((top >> i) & 1) {
+                        chk ^= BECH32_GENERATOR[i];
+                    }
+                }
+            }
+            return chk;
+        }
+
+        coinjs.bech32_hrpExpand = function (hrp) {
+            var ret = [];
+            var p;
+            for (p = 0; p < hrp.length; ++p) {
+                ret.push(hrp.charCodeAt(p) >> 5);
+            }
+            ret.push(0);
+            for (p = 0; p < hrp.length; ++p) {
+                ret.push(hrp.charCodeAt(p) & 31);
+            }
+            return ret;
+        }
+
+        coinjs.bech32_verifyChecksum = function (hrp, data) {
+            return coinjs.bech32_polymod(coinjs.bech32_hrpExpand(hrp).concat(data)) === 1;
+        }
+
+        coinjs.bech32_createChecksum = function (hrp, data) {
+            var values = coinjs.bech32_hrpExpand(hrp).concat(data).concat([0, 0, 0, 0, 0, 0]);
+            var mod = coinjs.bech32_polymod(values) ^ 1;
+            var ret = [];
+            for (var p = 0; p < 6; ++p) {
+                ret.push((mod >> 5 * (5 - p)) & 31);
+            }
+            return ret;
+        }
+
+        coinjs.bech32_encode = function (hrp, data) {
+            var combined = data.concat(coinjs.bech32_createChecksum(hrp, data));
+            var ret = hrp + '1';
+            for (var p = 0; p < combined.length; ++p) {
+                ret += coinjs.bech32.charset.charAt(combined[p]);
+            }
+            return ret;
+        }
+
+        coinjs.bech32_decode = function (bechString) {
+            var p;
+            var has_lower = false;
+            var has_upper = false;
+            for (p = 0; p < bechString.length; ++p) {
+                if (bechString.charCodeAt(p) < 33 || bechString.charCodeAt(p) > 126) {
+                    return null;
+                }
+                if (bechString.charCodeAt(p) >= 97 && bechString.charCodeAt(p) <= 122) {
+                    has_lower = true;
+                }
+                if (bechString.charCodeAt(p) >= 65 && bechString.charCodeAt(p) <= 90) {
+                    has_upper = true;
+                }
+            }
+            if (has_lower && has_upper) {
+                return null;
+            }
+            bechString = bechString.toLowerCase();
+            var pos = bechString.lastIndexOf('1');
+            if (pos < 1 || pos + 7 > bechString.length || bechString.length > 90) {
+                return null;
+            }
+            var hrp = bechString.substring(0, pos);
+            var data = [];
+            for (p = pos + 1; p < bechString.length; ++p) {
+                var d = coinjs.bech32.charset.indexOf(bechString.charAt(p));
+                if (d === -1) {
+                    return null;
+                }
+                data.push(d);
+            }
+            if (!coinjs.bech32_verifyChecksum(hrp, data)) {
+                return null;
+            }
+            return {
+                hrp: hrp,
+                data: data.slice(0, data.length - 6)
+            };
+        }
+
+        coinjs.bech32_convert = function (data, inBits, outBits, pad) {
+            var value = 0;
+            var bits = 0;
+            var maxV = (1 << outBits) - 1;
+
+            var result = [];
+            for (var i = 0; i < data.length; ++i) {
+                value = (value << inBits) | data[i];
+                bits += inBits;
+
+                while (bits >= outBits) {
+                    bits -= outBits;
+                    result.push((value >> bits) & maxV);
+                }
+            }
+
+            if (pad) {
+                if (bits > 0) {
+                    result.push((value << (outBits - bits)) & maxV);
+                }
+            } else {
+                if (bits >= inBits) throw new Error('Excess padding');
+                if ((value << (outBits - bits)) & maxV) throw new Error('Non-zero padding');
+            }
+
+            return result;
+        }
+
+        coinjs.testdeterministicK = function () {
+            // https://github.com/bitpay/bitcore/blob/9a5193d8e94b0bd5b8e7f00038e7c0b935405a03/test/crypto/ecdsa.js
+            // Line 21 and 22 specify digest hash and privkey for the first 2 test vectors.
+            // Line 96-117 tells expected result.
+
+            var tx = coinjs.transaction();
+
+            var test_vectors = [{
+                'message': 'test data',
+                'privkey': 'fee0a1f7afebf9d2a5a80c0c98a31c709681cce195cbcd06342b517970c0be1e',
+                'k_bad00': 'fcce1de7a9bcd6b2d3defade6afa1913fb9229e3b7ddf4749b55c4848b2a196e',
+                'k_bad01': '727fbcb59eb48b1d7d46f95a04991fc512eb9dbf9105628e3aec87428df28fd8',
+                'k_bad15': '398f0e2c9f79728f7b3d84d447ac3a86d8b2083c8f234a0ffa9c4043d68bd258'
+            },
+            {
+                'message': 'Everything should be made as simple as possible, but not simpler.',
+                'privkey': '0000000000000000000000000000000000000000000000000000000000000001',
+                'k_bad00': 'ec633bd56a5774a0940cb97e27a9e4e51dc94af737596a0c5cbb3d30332d92a5',
+                'k_bad01': 'df55b6d1b5c48184622b0ead41a0e02bfa5ac3ebdb4c34701454e80aabf36f56',
+                'k_bad15': 'def007a9a3c2f7c769c75da9d47f2af84075af95cadd1407393dc1e26086ef87'
+            },
+            {
+                'message': 'Satoshi Nakamoto',
+                'privkey': '0000000000000000000000000000000000000000000000000000000000000002',
+                'k_bad00': 'd3edc1b8224e953f6ee05c8bbf7ae228f461030e47caf97cde91430b4607405e',
+                'k_bad01': 'f86d8e43c09a6a83953f0ab6d0af59fb7446b4660119902e9967067596b58374',
+                'k_bad15': '241d1f57d6cfd2f73b1ada7907b199951f95ef5ad362b13aed84009656e0254a'
+            },
+            {
+                'message': 'Diffie Hellman',
+                'privkey': '7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f',
+                'k_bad00': 'c378a41cb17dce12340788dd3503635f54f894c306d52f6e9bc4b8f18d27afcc',
+                'k_bad01': '90756c96fef41152ac9abe08819c4e95f16da2af472880192c69a2b7bac29114',
+                'k_bad15': '7b3f53300ab0ccd0f698f4d67db87c44cf3e9e513d9df61137256652b2e94e7c'
+            },
+            {
+                'message': 'Japan',
+                'privkey': '8080808080808080808080808080808080808080808080808080808080808080',
+                'k_bad00': 'f471e61b51d2d8db78f3dae19d973616f57cdc54caaa81c269394b8c34edcf59',
+                'k_bad01': '6819d85b9730acc876fdf59e162bf309e9f63dd35550edf20869d23c2f3e6d17',
+                'k_bad15': 'd8e8bae3ee330a198d1f5e00ad7c5f9ed7c24c357c0a004322abca5d9cd17847'
+            },
+            {
+                'message': 'Bitcoin',
+                'privkey': 'fffffffffffffffffffffffffffffffebaaedce6af48a03bbfd25e8cd0364140',
+                'k_bad00': '36c848ffb2cbecc5422c33a994955b807665317c1ce2a0f59c689321aaa631cc',
+                'k_bad01': '4ed8de1ec952a4f5b3bd79d1ff96446bcd45cabb00fc6ca127183e14671bcb85',
+                'k_bad15': '56b6f47babc1662c011d3b1f93aa51a6e9b5f6512e9f2e16821a238d450a31f8'
+            },
+            {
+                'message': 'i2FLPP8WEus5WPjpoHwheXOMSobUJVaZM1JPMQZq',
+                'privkey': 'fffffffffffffffffffffffffffffffebaaedce6af48a03bbfd25e8cd0364140',
+                'k_bad00': '6e9b434fcc6bbb081a0463c094356b47d62d7efae7da9c518ed7bac23f4e2ed6',
+                'k_bad01': 'ae5323ae338d6117ce8520a43b92eacd2ea1312ae514d53d8e34010154c593bb',
+                'k_bad15': '3eaa1b61d1b8ab2f1ca71219c399f2b8b3defa624719f1e96fe3957628c2c4ea'
+            },
+            {
+                'message': 'lEE55EJNP7aLrMtjkeJKKux4Yg0E8E1SAJnWTCEh',
+                'privkey': '3881e5286abc580bb6139fe8e83d7c8271c6fe5e5c2d640c1f0ed0e1ee37edc9',
+                'k_bad00': '5b606665a16da29cc1c5411d744ab554640479dd8abd3c04ff23bd6b302e7034',
+                'k_bad01': 'f8b25263152c042807c992eacd2ac2cc5790d1e9957c394f77ea368e3d9923bd',
+                'k_bad15': 'ea624578f7e7964ac1d84adb5b5087dd14f0ee78b49072aa19051cc15dab6f33'
+            },
+            {
+                'message': '2SaVPvhxkAPrayIVKcsoQO5DKA8Uv5X/esZFlf+y',
+                'privkey': '7259dff07922de7f9c4c5720d68c9745e230b32508c497dd24cb95ef18856631',
+                'k_bad00': '3ab6c19ab5d3aea6aa0c6da37516b1d6e28e3985019b3adb388714e8f536686b',
+                'k_bad01': '19af21b05004b0ce9cdca82458a371a9d2cf0dc35a813108c557b551c08eb52e',
+                'k_bad15': '117a32665fca1b7137a91c4739ac5719fec0cf2e146f40f8e7c21b45a07ebc6a'
+            },
+            {
+                'message': '00A0OwO2THi7j5Z/jp0FmN6nn7N/DQd6eBnCS+/b',
+                'privkey': '0d6ea45d62b334777d6995052965c795a4f8506044b4fd7dc59c15656a28f7aa',
+                'k_bad00': '79487de0c8799158294d94c0eb92ee4b567e4dc7ca18addc86e49d31ce1d2db6',
+                'k_bad01': '9561d2401164a48a8f600882753b3105ebdd35e2358f4f808c4f549c91490009',
+                'k_bad15': 'b0d273634129ff4dbdf0df317d4062a1dbc58818f88878ffdb4ec511c77976c0'
+            }
+            ];
+
+            var result_txt = '\n----------------------\nResults\n----------------------\n\n';
+
+            for (i = 0; i < test_vectors.length; i++) {
+                var hash = Crypto.SHA256(test_vectors[i]['message'].split('').map(function (c) {
+                    return c.charCodeAt(0);
+                }), {
+                    asBytes: true
+                });
+                var wif = coinjs.privkey2wif(test_vectors[i]['privkey']);
+
+                var KBigInt = tx.deterministicK(wif, hash);
+                var KBigInt0 = tx.deterministicK(wif, hash, 0);
+                var KBigInt1 = tx.deterministicK(wif, hash, 1);
+                var KBigInt15 = tx.deterministicK(wif, hash, 15);
+
+                var K = Crypto.util.bytesToHex(KBigInt.toByteArrayUnsigned());
+                var K0 = Crypto.util.bytesToHex(KBigInt0.toByteArrayUnsigned());
+                var K1 = Crypto.util.bytesToHex(KBigInt1.toByteArrayUnsigned());
+                var K15 = Crypto.util.bytesToHex(KBigInt15.toByteArrayUnsigned());
+
+                if (K != test_vectors[i]['k_bad00']) {
+                    result_txt += 'Failed Test #' + (i + 1) + '\n       K = ' + K + '\nExpected = ' + test_vectors[i]['k_bad00'] + '\n\n';
+                } else if (K0 != test_vectors[i]['k_bad00']) {
+                    result_txt += 'Failed Test #' + (i + 1) + '\n      K0 = ' + K0 + '\nExpected = ' + test_vectors[i]['k_bad00'] + '\n\n';
+                } else if (K1 != test_vectors[i]['k_bad01']) {
+                    result_txt += 'Failed Test #' + (i + 1) + '\n      K1 = ' + K1 + '\nExpected = ' + test_vectors[i]['k_bad01'] + '\n\n';
+                } else if (K15 != test_vectors[i]['k_bad15']) {
+                    result_txt += 'Failed Test #' + (i + 1) + '\n     K15 = ' + K15 + '\nExpected = ' + test_vectors[i]['k_bad15'] + '\n\n';
+                };
+            };
+
+            if (result_txt.length < 60) {
+                result_txt = 'All Tests OK!';
+            };
+
+            return result_txt;
+        };
+
+        /* start of hd functions, thanks bip32.org */
+        coinjs.hd = function (data) {
+
+            var r = {};
+
+            /* some hd value parsing */
+            r.parse = function () {
+
+                var bytes = [];
+
+                // some quick validation
+                if (typeof (data) == 'string') {
+                    var decoded = coinjs.base58decode(data);
+                    if (decoded.length == 82) {
+                        var checksum = decoded.slice(78, 82);
+                        var hash = Crypto.SHA256(Crypto.SHA256(decoded.slice(0, 78), {
+                            asBytes: true
+                        }), {
+                            asBytes: true
+                        });
+                        if (checksum[0] == hash[0] && checksum[1] == hash[1] && checksum[2] == hash[2] && checksum[3] == hash[3]) {
+                            bytes = decoded.slice(0, 78);
+                        }
+                    }
+                }
+
+                // actual parsing code
+                if (bytes && bytes.length > 0) {
+                    r.version = coinjs.uint(bytes.slice(0, 4), 4);
+                    r.depth = coinjs.uint(bytes.slice(4, 5), 1);
+                    r.parent_fingerprint = bytes.slice(5, 9);
+                    r.child_index = coinjs.uint(bytes.slice(9, 13), 4);
+                    r.chain_code = bytes.slice(13, 45);
+                    r.key_bytes = bytes.slice(45, 78);
+
+                    var c = coinjs.compressed; // get current default
+                    coinjs.compressed = true;
+
+                    if (r.key_bytes[0] == 0x00) {
+                        r.type = 'private';
+                        var privkey = (r.key_bytes).slice(1, 33);
+                        var privkeyHex = Crypto.util.bytesToHex(privkey);
+                        var pubkey = coinjs.newPubkey(privkeyHex);
+
+                        r.keys = {
+                            'privkey': privkeyHex,
+                            'pubkey': pubkey,
+                            'address': coinjs.pubkey2address(pubkey),
+                            'wif': coinjs.privkey2wif(privkeyHex)
+                        };
+
+                    } else if (r.key_bytes[0] == 0x02 || r.key_bytes[0] == 0x03) {
+                        r.type = 'public';
+                        var pubkeyHex = Crypto.util.bytesToHex(r.key_bytes);
+
+                        r.keys = {
+                            'pubkey': pubkeyHex,
+                            'address': coinjs.pubkey2address(pubkeyHex)
+                        };
+                    } else {
+                        r.type = 'invalid';
+                    }
+
+                    r.keys_extended = r.extend();
+
+                    coinjs.compressed = c; // reset to default
+                }
+
+                return r;
+            }
+
+            // extend prv/pub key
+            r.extend = function () {
+                var hd = coinjs.hd();
+                return hd.make({
+                    'depth': (this.depth * 1) + 1,
+                    'parent_fingerprint': this.parent_fingerprint,
+                    'child_index': this.child_index,
+                    'chain_code': this.chain_code,
+                    'privkey': this.keys.privkey,
+                    'pubkey': this.keys.pubkey
+                });
+            }
+
+            // derive from path
+            r.derive_path = function (path) {
+
+                if (path == 'm' || path == 'M' || path == 'm\'' || path == 'M\'') return this;
+
+                var p = path.split('/');
+                var hdp = coinjs.clone(this); // clone hd path
+
+                for (var i in p) {
+
+                    if (((i == 0) && c != 'm') || i == 'remove') {
+                        continue;
+                    }
+
+                    var c = p[i];
+
+                    var use_private = (c.length > 1) && (c[c.length - 1] == '\'');
+                    var child_index = parseInt(use_private ? c.slice(0, c.length - 1) : c) & 0x7fffffff;
+                    if (use_private)
+                        child_index += 0x80000000;
+
+                    hdp = hdp.derive(child_index);
+                    var key = ((hdp.keys_extended.privkey) && hdp.keys_extended.privkey != '') ? hdp.keys_extended.privkey : hdp.keys_extended.pubkey;
+                    hdp = coinjs.hd(key);
+                }
+                return hdp;
+            }
+
+            // derive key from index
+            r.derive = function (i) {
+
+                i = (i) ? i : 0;
+                var blob = (Crypto.util.hexToBytes(this.keys.pubkey)).concat(coinjs.numToBytes(i, 4).reverse());
+
+                var j = new jsSHA(Crypto.util.bytesToHex(blob), 'HEX');
+                var hash = j.getHMAC(Crypto.util.bytesToHex(r.chain_code), "HEX", "SHA-512", "HEX");
+
+                var il = new BigInteger(hash.slice(0, 64), 16);
+                var ir = Crypto.util.hexToBytes(hash.slice(64, 128));
+
+                var ecparams = EllipticCurve.getSECCurveByName("secp256k1");
+                var curve = ecparams.getCurve();
+
+                var k, key, pubkey, o;
+
+                o = coinjs.clone(this);
+                o.chain_code = ir;
+                o.child_index = i;
+
+                if (this.type == 'private') {
+                    // derive key pair from from a xprv key
+                    k = il.add(new BigInteger([0].concat(Crypto.util.hexToBytes(this.keys.privkey)))).mod(ecparams.getN());
+                    key = Crypto.util.bytesToHex(k.toByteArrayUnsigned());
+
+                    pubkey = coinjs.newPubkey(key);
+
+                    o.keys = {
+                        'privkey': key,
+                        'pubkey': pubkey,
+                        'wif': coinjs.privkey2wif(key),
+                        'address': coinjs.pubkey2address(pubkey)
+                    };
+
+                } else if (this.type == 'public') {
+                    // derive xpub key from an xpub key
+                    q = ecparams.curve.decodePointHex(this.keys.pubkey);
+                    var curvePt = ecparams.getG().multiply(il).add(q);
+
+                    var x = curvePt.getX().toBigInteger();
+                    var y = curvePt.getY().toBigInteger();
+
+                    var publicKeyBytesCompressed = EllipticCurve.integerToBytes(x, 32)
+                    if (y.isEven()) {
+                        publicKeyBytesCompressed.unshift(0x02)
+                    } else {
+                        publicKeyBytesCompressed.unshift(0x03)
+                    }
+                    pubkey = Crypto.util.bytesToHex(publicKeyBytesCompressed);
+
+                    o.keys = {
+                        'pubkey': pubkey,
+                        'address': coinjs.pubkey2address(pubkey)
+                    }
+                } else {
+                    // fail
+                }
+
+                o.parent_fingerprint = (ripemd160(Crypto.SHA256(Crypto.util.hexToBytes(r.keys.pubkey), {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                })).slice(0, 4);
+                o.keys_extended = o.extend();
+                return o;
+            }
+
+            // make a master hd xprv/xpub
+            r.master = function (pass) {
+                var seed = (pass) ? Crypto.SHA256(pass) : coinjs.newPrivkey();
+                var hasher = new jsSHA(seed, 'HEX');
+                var I = hasher.getHMAC("Bitcoin seed", "TEXT", "SHA-512", "HEX");
+
+                var privkey = Crypto.util.hexToBytes(I.slice(0, 64));
+                var chain = Crypto.util.hexToBytes(I.slice(64, 128));
+
+                var hd = coinjs.hd();
+                return hd.make({
+                    'depth': 0,
+                    'parent_fingerprint': [0, 0, 0, 0],
+                    'child_index': 0,
+                    'chain_code': chain,
+                    'privkey': I.slice(0, 64),
+                    'pubkey': coinjs.newPubkey(I.slice(0, 64))
+                });
+            }
+
+            // encode data to a base58 string
+            r.make = function (data) { // { (int) depth, (array) parent_fingerprint, (int) child_index, (byte array) chain_code, (hex str) privkey, (hex str) pubkey}
+                var k = [];
+
+                //depth
+                k.push(data.depth * 1);
+
+                //parent fingerprint
+                k = k.concat(data.parent_fingerprint);
+
+                //child index
+                k = k.concat((coinjs.numToBytes(data.child_index, 4)).reverse());
+
+                //Chain code
+                k = k.concat(data.chain_code);
+
+                var o = {}; // results
+
+                //encode xprv key
+                if (data.privkey) {
+                    var prv = (coinjs.numToBytes(coinjs.hdkey.prv, 4)).reverse();
+                    prv = prv.concat(k);
+                    prv.push(0x00);
+                    prv = prv.concat(Crypto.util.hexToBytes(data.privkey));
+                    var hash = Crypto.SHA256(Crypto.SHA256(prv, {
+                        asBytes: true
+                    }), {
+                        asBytes: true
+                    });
+                    var checksum = hash.slice(0, 4);
+                    var ret = prv.concat(checksum);
+                    o.privkey = coinjs.base58encode(ret);
+                }
+
+                //encode xpub key
+                if (data.pubkey) {
+                    var pub = (coinjs.numToBytes(coinjs.hdkey.pub, 4)).reverse();
+                    pub = pub.concat(k);
+                    pub = pub.concat(Crypto.util.hexToBytes(data.pubkey));
+                    var hash = Crypto.SHA256(Crypto.SHA256(pub, {
+                        asBytes: true
+                    }), {
+                        asBytes: true
+                    });
+                    var checksum = hash.slice(0, 4);
+                    var ret = pub.concat(checksum);
+                    o.pubkey = coinjs.base58encode(ret);
+                }
+                return o;
+            }
+
+            return r.parse();
+        }
+
+
+        /* start of script functions */
+        coinjs.script = function (data) {
+            var r = {};
+
+            if (!data) {
+                r.buffer = [];
+            } else if ("string" == typeof data) {
+                r.buffer = Crypto.util.hexToBytes(data);
+            } else if (coinjs.isArray(data)) {
+                r.buffer = data;
+            } else if (data instanceof coinjs.script) {
+                r.buffer = data.buffer;
+            } else {
+                r.buffer = data;
+            }
+
+            /* parse buffer array */
+            r.parse = function () {
+
+                var self = this;
+                r.chunks = [];
+                var i = 0;
+
+                function readChunk(n) {
+                    self.chunks.push(self.buffer.slice(i, i + n));
+                    i += n;
+                };
+
+                while (i < this.buffer.length) {
+                    var opcode = this.buffer[i++];
+                    if (opcode >= 0xF0) {
+                        opcode = (opcode << 8) | this.buffer[i++];
+                    }
+
+                    var len;
+                    if (opcode > 0 && opcode < 76) { //OP_PUSHDATA1
+                        readChunk(opcode);
+                    } else if (opcode == 76) { //OP_PUSHDATA1
+                        len = this.buffer[i++];
+                        readChunk(len);
+                    } else if (opcode == 77) { //OP_PUSHDATA2
+                        len = (this.buffer[i++] << 8) | this.buffer[i++];
+                        readChunk(len);
+                    } else if (opcode == 78) { //OP_PUSHDATA4
+                        len = (this.buffer[i++] << 24) | (this.buffer[i++] << 16) | (this.buffer[i++] << 8) | this.buffer[i++];
+                        readChunk(len);
+                    } else {
+                        this.chunks.push(opcode);
+                    }
+
+                    if (i < 0x00) {
+                        break;
+                    }
+                }
+
+                return true;
+            };
+
+            /* decode the redeemscript of a multisignature transaction */
+            r.decodeRedeemScript = function (script) {
+                var r = false;
+                try {
+                    var s = coinjs.script(Crypto.util.hexToBytes(script));
+                    if ((s.chunks.length >= 3) && s.chunks[s.chunks.length - 1] == 174) { //OP_CHECKMULTISIG
+                        r = {};
+                        r.signaturesRequired = s.chunks[0] - 80;
+                        var pubkeys = [];
+                        for (var i = 1; i < s.chunks.length - 2; i++) {
+                            pubkeys.push(Crypto.util.bytesToHex(s.chunks[i]));
+                        }
+                        r.pubkeys = pubkeys;
+                        var multi = coinjs.pubkeys2MultisigAddress(pubkeys, r.signaturesRequired);
+                        r.address = multi['address'];
+                        r.type = 'multisig__'; // using __ for now to differentiat from the other object .type == "multisig"
+                        var rs = Crypto.util.bytesToHex(s.buffer);
+                        r.redeemscript = rs;
+
+                    } else if ((s.chunks.length == 2) && (s.buffer[0] == 0 && s.buffer[1] == 20)) { // SEGWIT
+                        r = {};
+                        r.type = "segwit__";
+                        var rs = Crypto.util.bytesToHex(s.buffer);
+                        r.address = coinjs.pubkey2address(rs, coinjs.multisig);
+                        r.redeemscript = rs;
+
+                    } else if (s.chunks.length == 5 && s.chunks[1] == 177 && s.chunks[2] == 117 && s.chunks[4] == 172) {
+                        // ^ <unlocktime> OP_CHECKLOCKTIMEVERIFY OP_DROP <pubkey> OP_CHECKSIG ^
+                        r = {}
+                        r.pubkey = Crypto.util.bytesToHex(s.chunks[3]);
+                        r.checklocktimeverify = coinjs.bytesToNum(s.chunks[0].slice());
+                        r.address = coinjs.simpleHodlAddress(r.pubkey, r.checklocktimeverify).address;
+                        var rs = Crypto.util.bytesToHex(s.buffer);
+                        r.redeemscript = rs;
+                        r.type = "hodl__";
+                    }
+                } catch (e) {
+                    // console.log(e);
+                    r = false;
+                }
+                return r;
+            }
+
+            /* create output script to spend */
+            r.spendToScript = function (address) {
+                var addr = coinjs.addressDecode(address);
+                var s = coinjs.script();
+                if (addr.type == "bech32") {
+                    s.writeOp(0);
+                    s.writeBytes(Crypto.util.hexToBytes(addr.redeemscript));
+                } else if (addr.version == coinjs.multisig) { // multisig address
+                    s.writeOp(169); //OP_HASH160
+                    s.writeBytes(addr.bytes);
+                    s.writeOp(135); //OP_EQUAL
+                } else { // regular address
+                    s.writeOp(118); //OP_DUP
+                    s.writeOp(169); //OP_HASH160
+                    s.writeBytes(addr.bytes);
+                    s.writeOp(136); //OP_EQUALVERIFY
+                    s.writeOp(172); //OP_CHECKSIG
+                }
+                return s;
+            }
+
+            /* geneate a (script) pubkey hash of the address - used for when signing */
+            r.pubkeyHash = function (address) {
+                var addr = coinjs.addressDecode(address);
+                var s = coinjs.script();
+                s.writeOp(118); //OP_DUP
+                s.writeOp(169); //OP_HASH160
+                s.writeBytes(addr.bytes);
+                s.writeOp(136); //OP_EQUALVERIFY
+                s.writeOp(172); //OP_CHECKSIG
+                return s;
+            }
+
+            /* write to buffer */
+            r.writeOp = function (op) {
+                this.buffer.push(op);
+                this.chunks.push(op);
+                return true;
+            }
+
+            /* write bytes to buffer */
+            r.writeBytes = function (data) {
+                if (data.length < 76) { //OP_PUSHDATA1
+                    this.buffer.push(data.length);
+                } else if (data.length <= 0xff) {
+                    this.buffer.push(76); //OP_PUSHDATA1
+                    this.buffer.push(data.length);
+                } else if (data.length <= 0xffff) {
+                    this.buffer.push(77); //OP_PUSHDATA2
+                    this.buffer.push(data.length & 0xff);
+                    this.buffer.push((data.length >>> 8) & 0xff);
+                } else {
+                    this.buffer.push(78); //OP_PUSHDATA4
+                    this.buffer.push(data.length & 0xff);
+                    this.buffer.push((data.length >>> 8) & 0xff);
+                    this.buffer.push((data.length >>> 16) & 0xff);
+                    this.buffer.push((data.length >>> 24) & 0xff);
+                }
+                this.buffer = this.buffer.concat(data);
+                this.chunks.push(data);
+                return true;
+            }
+
+            r.parse();
+            return r;
+        }
+
+        /* start of transaction functions */
+
+        /* create a new transaction object */
+        coinjs.transaction = function () {
+
+            var r = {};
+            r.version = 1;
+            r.lock_time = 0;
+            r.ins = [];
+            r.outs = [];
+            r.witness = false;
+            r.timestamp = null;
+            r.block = null;
+
+            /* add an input to a transaction */
+            r.addinput = function (txid, index, script, sequence) {
+                var o = {};
+                o.outpoint = {
+                    'hash': txid,
+                    'index': index
+                };
+                o.script = coinjs.script(script || []);
+                o.sequence = sequence || ((r.lock_time == 0) ? 4294967295 : 0);
+                return this.ins.push(o);
+            }
+
+            /* add an output to a transaction */
+            r.addoutput = function (address, value) {
+                var o = {};
+                o.value = new BigInteger('' + Math.round((value * 1) * 1e8), 10);
+                var s = coinjs.script();
+                o.script = s.spendToScript(address);
+
+                return this.outs.push(o);
+            }
+
+            /* add two outputs for stealth addresses to a transaction */
+            r.addstealth = function (stealth, value) {
+                var ephemeralKeyBigInt = BigInteger.fromByteArrayUnsigned(Crypto.util.hexToBytes(coinjs.newPrivkey()));
+                var curve = EllipticCurve.getSECCurveByName("secp256k1");
+
+                var p = EllipticCurve.fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFC2F");
+                var a = BigInteger.ZERO;
+                var b = EllipticCurve.fromHex("7");
+                var calccurve = new EllipticCurve.CurveFp(p, a, b);
+
+                var ephemeralPt = curve.getG().multiply(ephemeralKeyBigInt);
+                var scanPt = calccurve.decodePointHex(stealth.scankey);
+                var sharedPt = scanPt.multiply(ephemeralKeyBigInt);
+                var stealthindexKeyBigInt = BigInteger.fromByteArrayUnsigned(Crypto.SHA256(sharedPt.getEncoded(true), {
+                    asBytes: true
+                }));
+
+                var stealthindexPt = curve.getG().multiply(stealthindexKeyBigInt);
+                var spendPt = calccurve.decodePointHex(stealth.spendkey);
+                var addressPt = spendPt.add(stealthindexPt);
+
+                var sendaddress = coinjs.pubkey2address(Crypto.util.bytesToHex(addressPt.getEncoded(true)));
+
+
+                var OPRETBytes = [6].concat(Crypto.util.randomBytes(4)).concat(ephemeralPt.getEncoded(true)); // ephemkey data
+                var q = coinjs.script();
+                q.writeOp(106); // OP_RETURN
+                q.writeBytes(OPRETBytes);
+                v = {};
+                v.value = 0;
+                v.script = q;
+
+                this.outs.push(v);
+
+                var o = {};
+                o.value = new BigInteger('' + Math.round((value * 1) * 1e8), 10);
+                var s = coinjs.script();
+                o.script = s.spendToScript(sendaddress);
+
+                return this.outs.push(o);
+            }
+
+            /* add data to a transaction */
+            r.adddata = function (data) {
+                var r = false;
+                if (((data.match(/^[a-f0-9]+$/gi)) && data.length < 160) && (data.length % 2) == 0) {
+                    var s = coinjs.script();
+                    s.writeOp(106); // OP_RETURN
+                    s.writeBytes(Crypto.util.hexToBytes(data));
+                    o = {};
+                    o.value = 0;
+                    o.script = s;
+                    return this.outs.push(o);
+                }
+                return r;
+            }
+
+            /* list unspent transactions */
+            r.listUnspent = function (address, callback) {
+                coinjs.ajax(coinjs.host + '?uid=' + coinjs.uid + '&key=' + coinjs.key + '&setmodule=addresses&request=unspent&address=' + address + '&r=' + Math.random(), callback, "GET");
+            }
+
+            /* list transaction data */
+            r.getTransaction = function (txid, callback) {
+                coinjs.ajax(coinjs.host + '?uid=' + coinjs.uid + '&key=' + coinjs.key + '&setmodule=bitcoin&request=gettransaction&txid=' + txid + '&r=' + Math.random(), callback, "GET");
+            }
+
+            /* add unspent to transaction */
+            r.addUnspent = function (address, callback, script, segwit, sequence) {
+                var self = this;
+                this.listUnspent(address, function (data) {
+                    var s = coinjs.script();
+                    var value = 0;
+                    var total = 0;
+                    var x = {};
+
+                    if (GLOBAL.DOMParser) {
+                        parser = new DOMParser();
+                        xmlDoc = parser.parseFromString(data, "text/xml");
+                    } else {
+                        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
+                        xmlDoc.async = false;
+                        xmlDoc.loadXML(data);
+                    }
+
+                    var unspent = xmlDoc.getElementsByTagName("unspent")[0];
+
+                    if (unspent) {
+                        for (i = 1; i <= unspent.childElementCount; i++) {
+                            var u = xmlDoc.getElementsByTagName("unspent_" + i)[0]
+                            var txhash = (u.getElementsByTagName("tx_hash")[0].childNodes[0].nodeValue).match(/.{1,2}/g).reverse().join("") + '';
+                            var n = u.getElementsByTagName("tx_output_n")[0].childNodes[0].nodeValue;
+                            var scr = script || u.getElementsByTagName("script")[0].childNodes[0].nodeValue;
+
+                            if (segwit) {
+                                /* this is a small hack to include the value with the redeemscript to make the signing procedure smoother. 
+                                It is not standard and removed during the signing procedure. */
+
+                                s = coinjs.script();
+                                s.writeBytes(Crypto.util.hexToBytes(script));
+                                s.writeOp(0);
+                                s.writeBytes(coinjs.numToBytes(u.getElementsByTagName("value")[0].childNodes[0].nodeValue * 1, 8));
+                                scr = Crypto.util.bytesToHex(s.buffer);
+                            }
+
+                            var seq = sequence || false;
+                            self.addinput(txhash, n, scr, seq);
+                            value += u.getElementsByTagName("value")[0].childNodes[0].nodeValue * 1;
+                            total++;
+                        }
+                    }
+
+                    x.result = xmlDoc.getElementsByTagName("result")[0].childNodes[0].nodeValue;
+                    x.unspent = unspent;
+                    x.value = value;
+                    x.total = total;
+                    x.response = xmlDoc.getElementsByTagName("response")[0].childNodes[0].nodeValue;
+
+                    return callback(x);
+                });
+            }
+
+            /* add unspent and sign */
+            r.addUnspentAndSign = function (wif, callback) {
+                var self = this;
+                var address = coinjs.wif2address(wif);
+                self.addUnspent(address['address'], function (data) {
+                    self.sign(wif);
+                    return callback(data);
+                });
+            }
+
+            /* broadcast a transaction */
+            r.broadcast = function (callback, txhex) {
+                var tx = txhex || this.serialize();
+                coinjs.ajax(coinjs.host + '?uid=' + coinjs.uid + '&key=' + coinjs.key + '&setmodule=bitcoin&request=sendrawtransaction', callback, "POST", ["rawtx=" + tx]);
+            }
+
+            /* generate the transaction hash to sign from a transaction input */
+            r.transactionHash = function (index, sigHashType) {
+
+                var clone = coinjs.clone(this);
+                var shType = sigHashType || 1;
+
+                /* black out all other ins, except this one */
+                for (var i = 0; i < clone.ins.length; i++) {
+                    if (index != i) {
+                        clone.ins[i].script = coinjs.script();
+                    }
+                }
+
+                var extract = this.extractScriptKey(index);
+                clone.ins[index].script = coinjs.script(extract['script']);
+
+                if ((clone.ins) && clone.ins[index]) {
+
+                    /* SIGHASH : For more info on sig hashs see https://en.bitcoin.it/wiki/OP_CHECKSIG
+                        and https://bitcoin.org/en/developer-guide#signature-hash-type */
+
+                    if (shType == 1) {
+                        //SIGHASH_ALL 0x01
+
+                    } else if (shType == 2) {
+                        //SIGHASH_NONE 0x02
+                        clone.outs = [];
+                        for (var i = 0; i < clone.ins.length; i++) {
+                            if (index != i) {
+                                clone.ins[i].sequence = 0;
+                            }
+                        }
+
+                    } else if (shType == 3) {
+
+                        //SIGHASH_SINGLE 0x03
+                        clone.outs.length = index + 1;
+
+                        for (var i = 0; i < index; i++) {
+                            clone.outs[i].value = -1;
+                            clone.outs[i].script.buffer = [];
+                        }
+
+                        for (var i = 0; i < clone.ins.length; i++) {
+                            if (index != i) {
+                                clone.ins[i].sequence = 0;
+                            }
+                        }
+
+                    } else if (shType >= 128) {
+                        //SIGHASH_ANYONECANPAY 0x80
+                        clone.ins = [clone.ins[index]];
+
+                        if (shType == 129) {
+                            // SIGHASH_ALL + SIGHASH_ANYONECANPAY
+
+                        } else if (shType == 130) {
+                            // SIGHASH_NONE + SIGHASH_ANYONECANPAY
+                            clone.outs = [];
+
+                        } else if (shType == 131) {
+                            // SIGHASH_SINGLE + SIGHASH_ANYONECANPAY
+                            clone.outs.length = index + 1;
+                            for (var i = 0; i < index; i++) {
+                                clone.outs[i].value = -1;
+                                clone.outs[i].script.buffer = [];
+                            }
+                        }
+                    }
+
+                    var buffer = Crypto.util.hexToBytes(clone.serialize());
+                    buffer = buffer.concat(coinjs.numToBytes(parseInt(shType), 4));
+                    var hash = Crypto.SHA256(buffer, {
+                        asBytes: true
+                    });
+                    var r = Crypto.util.bytesToHex(Crypto.SHA256(hash, {
+                        asBytes: true
+                    }));
+                    return r;
+                } else {
+                    return false;
+                }
+            }
+
+            /* generate a segwit transaction hash to sign from a transaction input */
+            r.transactionHashSegWitV0 = function (index, sigHashType) {
+                /* 
+                   Notice: coinb.in by default, deals with segwit transactions in a non-standard way.
+                   Segwit transactions require that input values are included in the transaction hash.
+                   To save wasting resources and potentially slowing down this service, we include the amount with the 
+                   redeem script to generate the transaction hash and remove it after its signed.
+                */
+
+                // start redeem script check
+                var extract = this.extractScriptKey(index);
+                if (extract['type'] != 'segwit') {
+                    return {
+                        'result': 0,
+                        'fail': 'redeemscript',
+                        'response': 'redeemscript missing or not valid for segwit'
+                    };
+                }
+
+                if (extract['value'] == -1) {
+                    return {
+                        'result': 0,
+                        'fail': 'value',
+                        'response': 'unable to generate a valid segwit hash without a value'
+                    };
+                }
+
+                var scriptcode = Crypto.util.hexToBytes(extract['script']);
+
+                // end of redeem script check
+
+                /* P2WPKH */
+                if (scriptcode.length == 20) {
+                    scriptcode = [0x00, 0x14].concat(scriptcode);
+                }
+
+                if (scriptcode.length == 22) {
+                    scriptcode = scriptcode.slice(1);
+                    scriptcode.unshift(25, 118, 169);
+                    scriptcode.push(136, 172);
+                }
+
+                var value = coinjs.numToBytes(extract['value'], 8);
+
+                // start
+
+                var zero = coinjs.numToBytes(0, 32);
+                var version = coinjs.numToBytes(parseInt(this.version), 4);
+
+                var bufferTmp = [];
+                if (!(sigHashType >= 80)) { // not sighash anyonecanpay 
+                    for (var i = 0; i < this.ins.length; i++) {
+                        bufferTmp = bufferTmp.concat(Crypto.util.hexToBytes(this.ins[i].outpoint.hash).reverse());
+                        bufferTmp = bufferTmp.concat(coinjs.numToBytes(this.ins[i].outpoint.index, 4));
+                    }
+                }
+                var hashPrevouts = bufferTmp.length >= 1 ? Crypto.SHA256(Crypto.SHA256(bufferTmp, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                }) : zero;
+
+                var bufferTmp = [];
+                if (!(sigHashType >= 80) && sigHashType != 2 && sigHashType != 3) { // not sighash anyonecanpay & single & none
+                    for (var i = 0; i < this.ins.length; i++) {
+                        bufferTmp = bufferTmp.concat(coinjs.numToBytes(this.ins[i].sequence, 4));
+                    }
+                }
+                var hashSequence = bufferTmp.length >= 1 ? Crypto.SHA256(Crypto.SHA256(bufferTmp, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                }) : zero;
+
+                var outpoint = Crypto.util.hexToBytes(this.ins[index].outpoint.hash).reverse();
+                outpoint = outpoint.concat(coinjs.numToBytes(this.ins[index].outpoint.index, 4));
+
+                var nsequence = coinjs.numToBytes(this.ins[index].sequence, 4);
+                var hashOutputs = zero;
+                var bufferTmp = [];
+                if (sigHashType != 2 && sigHashType != 3) { // not sighash single & none
+                    for (var i = 0; i < this.outs.length; i++) {
+                        bufferTmp = bufferTmp.concat(coinjs.numToBytes(this.outs[i].value, 8));
+                        bufferTmp = bufferTmp.concat(coinjs.numToVarInt(this.outs[i].script.buffer.length));
+                        bufferTmp = bufferTmp.concat(this.outs[i].script.buffer);
+                    }
+                    hashOutputs = Crypto.SHA256(Crypto.SHA256(bufferTmp, {
+                        asBytes: true
+                    }), {
+                        asBytes: true
+                    });
+
+                } else if ((sigHashType == 2) && index < this.outs.length) { // is sighash single
+                    bufferTmp = bufferTmp.concat(coinjs.numToBytes(this.outs[index].value, 8));
+                    bufferTmp = bufferTmp.concat(coinjs.numToVarInt(this.outs[i].script.buffer.length));
+                    bufferTmp = bufferTmp.concat(this.outs[index].script.buffer);
+                    hashOutputs = Crypto.SHA256(Crypto.SHA256(bufferTmp, {
+                        asBytes: true
+                    }), {
+                        asBytes: true
+                    });
+                }
+
+                var locktime = coinjs.numToBytes(this.lock_time, 4);
+                var sighash = coinjs.numToBytes(sigHashType, 4);
+
+                var buffer = [];
+                buffer = buffer.concat(version);
+                buffer = buffer.concat(hashPrevouts);
+                buffer = buffer.concat(hashSequence);
+                buffer = buffer.concat(outpoint);
+                buffer = buffer.concat(scriptcode);
+                buffer = buffer.concat(value);
+                buffer = buffer.concat(nsequence);
+                buffer = buffer.concat(hashOutputs);
+                buffer = buffer.concat(locktime);
+                buffer = buffer.concat(sighash);
+
+                var hash = Crypto.SHA256(buffer, {
+                    asBytes: true
+                });
+                return {
+                    'result': 1,
+                    'hash': Crypto.util.bytesToHex(Crypto.SHA256(hash, {
+                        asBytes: true
+                    })),
+                    'response': 'hash generated'
+                };
+            }
+
+            /* extract the scriptSig, used in the transactionHash() function */
+            r.extractScriptKey = function (index) {
+                if (this.ins[index]) {
+                    if ((this.ins[index].script.chunks.length == 5) && this.ins[index].script.chunks[4] == 172 && coinjs.isArray(this.ins[index].script.chunks[2])) { //OP_CHECKSIG
+                        // regular scriptPubkey (not signed)
+                        return {
+                            'type': 'scriptpubkey',
+                            'signed': 'false',
+                            'signatures': 0,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.buffer)
+                        };
+                    } else if ((this.ins[index].script.chunks.length == 2) && this.ins[index].script.chunks[0][0] == 48 && this.ins[index].script.chunks[1].length == 5 && this.ins[index].script.chunks[1][1] == 177) { //OP_CHECKLOCKTIMEVERIFY
+                        // hodl script (signed)
+                        return {
+                            'type': 'hodl',
+                            'signed': 'true',
+                            'signatures': 1,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.buffer)
+                        };
+                    } else if ((this.ins[index].script.chunks.length == 2) && this.ins[index].script.chunks[0][0] == 48) {
+                        // regular scriptPubkey (probably signed)
+                        return {
+                            'type': 'scriptpubkey',
+                            'signed': 'true',
+                            'signatures': 1,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.buffer)
+                        };
+                    } else if (this.ins[index].script.chunks.length == 5 && this.ins[index].script.chunks[1] == 177) { //OP_CHECKLOCKTIMEVERIFY
+                        // hodl script (not signed)
+                        return {
+                            'type': 'hodl',
+                            'signed': 'false',
+                            'signatures': 0,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.buffer)
+                        };
+                    } else if ((this.ins[index].script.chunks.length <= 3 && this.ins[index].script.chunks.length > 0) && ((this.ins[index].script.chunks[0].length == 22 && this.ins[index].script.chunks[0][0] == 0) || (this.ins[index].script.chunks[0].length == 20 && this.ins[index].script.chunks[1] == 0))) {
+                        var signed = ((this.witness[index]) && this.witness[index].length == 2) ? 'true' : 'false';
+                        var sigs = (signed == 'true') ? 1 : 0;
+                        var value = -1; // no value found
+                        if ((this.ins[index].script.chunks[2]) && this.ins[index].script.chunks[2].length == 8) {
+                            value = coinjs.bytesToNum(this.ins[index].script.chunks[2]); // value found encoded in transaction (THIS IS NON STANDARD)
+                        }
+                        return {
+                            'type': 'segwit',
+                            'signed': signed,
+                            'signatures': sigs,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.chunks[0]),
+                            'value': value
+                        };
+                    } else if (this.ins[index].script.chunks[0] == 0 && this.ins[index].script.chunks[this.ins[index].script.chunks.length - 1][this.ins[index].script.chunks[this.ins[index].script.chunks.length - 1].length - 1] == 174) { // OP_CHECKMULTISIG
+                        // multisig script, with signature(s) included
+                        var sigcount = 0;
+                        for (i = 1; i < this.ins[index].script.chunks.length - 1; i++) {
+                            if (this.ins[index].script.chunks[i] != 0) {
+                                sigcount++;
+                            }
+                        }
+
+                        return {
+                            'type': 'multisig',
+                            'signed': 'true',
+                            'signatures': sigcount,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.chunks[this.ins[index].script.chunks.length - 1])
+                        };
+                    } else if (this.ins[index].script.chunks[0] >= 80 && this.ins[index].script.chunks[this.ins[index].script.chunks.length - 1] == 174) { // OP_CHECKMULTISIG
+                        // multisig script, without signature!
+                        return {
+                            'type': 'multisig',
+                            'signed': 'false',
+                            'signatures': 0,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.buffer)
+                        };
+                    } else if (this.ins[index].script.chunks.length == 0) {
+                        // empty
+                        //bech32 witness check
+                        var signed = ((this.witness[index]) && this.witness[index].length == 2) ? 'true' : 'false';
+                        var sigs = (signed == 'true') ? 1 : 0;
+                        return {
+                            'type': 'empty',
+                            'signed': signed,
+                            'signatures': sigs,
+                            'script': ''
+                        };
+                    } else {
+                        // something else
+                        return {
+                            'type': 'unknown',
+                            'signed': 'false',
+                            'signatures': 0,
+                            'script': Crypto.util.bytesToHex(this.ins[index].script.buffer)
+                        };
+                    }
+                } else {
+                    return false;
+                }
+            }
+
+            /* generate a signature from a transaction hash */
+            r.transactionSig = function (index, wif, sigHashType, txhash) {
+
+                function serializeSig(r, s) {
+                    var rBa = r.toByteArraySigned();
+                    var sBa = s.toByteArraySigned();
+
+                    var sequence = [];
+                    sequence.push(0x02); // INTEGER
+                    sequence.push(rBa.length);
+                    sequence = sequence.concat(rBa);
+
+                    sequence.push(0x02); // INTEGER
+                    sequence.push(sBa.length);
+                    sequence = sequence.concat(sBa);
+
+                    sequence.unshift(sequence.length);
+                    sequence.unshift(0x30); // SEQUENCE
+
+                    return sequence;
+                }
+
+                var shType = sigHashType || 1;
+                var hash = txhash || Crypto.util.hexToBytes(this.transactionHash(index, shType));
+
+                if (hash) {
+                    var curve = EllipticCurve.getSECCurveByName("secp256k1");
+                    var key = coinjs.wif2privkey(wif);
+                    var priv = BigInteger.fromByteArrayUnsigned(Crypto.util.hexToBytes(key['privkey']));
+                    var n = curve.getN();
+                    var e = BigInteger.fromByteArrayUnsigned(hash);
+                    var badrs = 0
+                    do {
+                        var k = this.deterministicK(wif, hash, badrs);
+                        var G = curve.getG();
+                        var Q = G.multiply(k);
+                        var r = Q.getX().toBigInteger().mod(n);
+                        var s = k.modInverse(n).multiply(e.add(priv.multiply(r))).mod(n);
+                        badrs++
+                    } while (r.compareTo(BigInteger.ZERO) <= 0 || s.compareTo(BigInteger.ZERO) <= 0);
+
+                    // Force lower s values per BIP62
+                    var halfn = n.shiftRight(1);
+                    if (s.compareTo(halfn) > 0) {
+                        s = n.subtract(s);
+                    };
+
+                    var sig = serializeSig(r, s);
+                    sig.push(parseInt(shType, 10));
+
+                    return Crypto.util.bytesToHex(sig);
+                } else {
+                    return false;
+                }
+            }
+
+            // https://tools.ietf.org/html/rfc6979#section-3.2
+            r.deterministicK = function (wif, hash, badrs) {
+                // if r or s were invalid when this function was used in signing,
+                // we do not want to actually compute r, s here for efficiency, so,
+                // we can increment badrs. explained at end of RFC 6979 section 3.2
+
+                // wif is b58check encoded wif privkey.
+                // hash is byte array of transaction digest.
+                // badrs is used only if the k resulted in bad r or s.
+
+                // some necessary things out of the way for clarity.
+                badrs = badrs || 0;
+                var key = coinjs.wif2privkey(wif);
+                var x = Crypto.util.hexToBytes(key['privkey'])
+                var curve = EllipticCurve.getSECCurveByName("secp256k1");
+                var N = curve.getN();
+
+                // Step: a
+                // hash is a byteArray of the message digest. so h1 == hash in our case
+
+                // Step: b
+                var v = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
+
+                // Step: c
+                var k = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+                // Step: d
+                k = Crypto.HMAC(Crypto.SHA256, v.concat([0]).concat(x).concat(hash), k, {
+                    asBytes: true
+                });
+
+                // Step: e
+                v = Crypto.HMAC(Crypto.SHA256, v, k, {
+                    asBytes: true
+                });
+
+                // Step: f
+                k = Crypto.HMAC(Crypto.SHA256, v.concat([1]).concat(x).concat(hash), k, {
+                    asBytes: true
+                });
+
+                // Step: g
+                v = Crypto.HMAC(Crypto.SHA256, v, k, {
+                    asBytes: true
+                });
+
+                // Step: h1
+                var T = [];
+
+                // Step: h2 (since we know tlen = qlen, just copy v to T.)
+                v = Crypto.HMAC(Crypto.SHA256, v, k, {
+                    asBytes: true
+                });
+                T = v;
+
+                // Step: h3
+                var KBigInt = BigInteger.fromByteArrayUnsigned(T);
+
+                // loop if KBigInt is not in the range of [1, N-1] or if badrs needs incrementing.
+                var i = 0
+                while (KBigInt.compareTo(N) >= 0 || KBigInt.compareTo(BigInteger.ZERO) <= 0 || i < badrs) {
+                    k = Crypto.HMAC(Crypto.SHA256, v.concat([0]), k, {
+                        asBytes: true
+                    });
+                    v = Crypto.HMAC(Crypto.SHA256, v, k, {
+                        asBytes: true
+                    });
+                    v = Crypto.HMAC(Crypto.SHA256, v, k, {
+                        asBytes: true
+                    });
+                    T = v;
+                    KBigInt = BigInteger.fromByteArrayUnsigned(T);
+                    i++
+                };
+
+                return KBigInt;
+            };
+
+            /* sign a "standard" input */
+            r.signinput = function (index, wif, sigHashType) {
+                var key = coinjs.wif2pubkey(wif);
+                var shType = sigHashType || 1;
+                var signature = this.transactionSig(index, wif, shType);
+                var s = coinjs.script();
+                s.writeBytes(Crypto.util.hexToBytes(signature));
+                s.writeBytes(Crypto.util.hexToBytes(key['pubkey']));
+                this.ins[index].script = s;
+                return true;
+            }
+
+            /* signs a time locked / hodl input */
+            r.signhodl = function (index, wif, sigHashType) {
+                var shType = sigHashType || 1;
+                var signature = this.transactionSig(index, wif, shType);
+                var redeemScript = this.ins[index].script.buffer
+                var s = coinjs.script();
+                s.writeBytes(Crypto.util.hexToBytes(signature));
+                s.writeBytes(redeemScript);
+                this.ins[index].script = s;
+                return true;
+            }
+
+            /* sign a multisig input */
+            r.signmultisig = function (index, wif, sigHashType) {
+
+                function scriptListPubkey(redeemScript) {
+                    var r = {};
+                    for (var i = 1; i < redeemScript.chunks.length - 2; i++) {
+                        r[i] = Crypto.util.hexToBytes(coinjs.pubkeydecompress(Crypto.util.bytesToHex(redeemScript.chunks[i])));
+                    }
+                    return r;
+                }
+
+                function scriptListSigs(scriptSig) {
+                    var r = {};
+                    var c = 0;
+                    if (scriptSig.chunks[0] == 0 && scriptSig.chunks[scriptSig.chunks.length - 1][scriptSig.chunks[scriptSig.chunks.length - 1].length - 1] == 174) {
+                        for (var i = 1; i < scriptSig.chunks.length - 1; i++) {
+                            if (scriptSig.chunks[i] != 0) {
+                                c++;
+                                r[c] = scriptSig.chunks[i];
+                            }
+                        }
+                    }
+                    return r;
+                }
+
+                var redeemScript = (this.ins[index].script.chunks[this.ins[index].script.chunks.length - 1] == 174) ? this.ins[index].script.buffer : this.ins[index].script.chunks[this.ins[index].script.chunks.length - 1];
+
+                var pubkeyList = scriptListPubkey(coinjs.script(redeemScript));
+                var sigsList = scriptListSigs(this.ins[index].script);
+
+                var shType = sigHashType || 1;
+                var sighash = Crypto.util.hexToBytes(this.transactionHash(index, shType));
+                var signature = Crypto.util.hexToBytes(this.transactionSig(index, wif, shType));
+
+                sigsList[coinjs.countObject(sigsList) + 1] = signature;
+
+                var s = coinjs.script();
+
+                s.writeOp(0);
+
+                for (x in pubkeyList) {
+                    for (y in sigsList) {
+                        this.ins[index].script.buffer = redeemScript;
+                        sighash = Crypto.util.hexToBytes(this.transactionHash(index, sigsList[y].slice(-1)[0] * 1));
+                        if (coinjs.verifySignature(sighash, sigsList[y], pubkeyList[x])) {
+                            s.writeBytes(sigsList[y]);
+                        }
+                    }
+                }
+
+                s.writeBytes(redeemScript);
+                this.ins[index].script = s;
+                return true;
+            }
+
+            /* sign segwit input */
+            r.signsegwit = function (index, wif, sigHashType) {
+                var shType = sigHashType || 1;
+
+                var wif2 = coinjs.wif2pubkey(wif);
+                var segwit = coinjs.segwitAddress(wif2['pubkey']);
+                var bech32 = coinjs.bech32Address(wif2['pubkey']);
+
+                if ((segwit['redeemscript'] == Crypto.util.bytesToHex(this.ins[index].script.chunks[0])) || (bech32['redeemscript'] == Crypto.util.bytesToHex(this.ins[index].script.chunks[0]))) {
+                    var txhash = this.transactionHashSegWitV0(index, shType);
+
+                    if (txhash.result == 1) {
+
+                        var segwitHash = Crypto.util.hexToBytes(txhash.hash);
+                        var signature = this.transactionSig(index, wif, shType, segwitHash);
+
+                        // remove any non standard data we store, i.e. input value
+                        var script = coinjs.script();
+                        script.writeBytes(this.ins[index].script.chunks[0]);
+                        this.ins[index].script = script;
+
+                        if (!coinjs.isArray(this.witness)) {
+                            this.witness = new Array(this.ins.length);
+                            this.witness.fill([]);
+                        }
+
+                        this.witness[index] = ([signature, wif2['pubkey']]);
+
+                        // bech32, empty redeemscript
+                        if (bech32['redeemscript'] == Crypto.util.bytesToHex(this.ins[index].script.chunks[0])) {
+                            this.ins[index].script = coinjs.script();
+                        }
+
+                        /* attempt to reorder witness data as best as we can. 
+                           data can't be easily validated at this stage as 
+                           we dont have access to the inputs value and 
+                           making a web call will be too slow. */
+
+                        /*
+                        var witness_order = [];
+                        var witness_used = [];
+                        for (var i = 0; i < this.ins.length; i++) {
+                            for (var y = 0; y < this.witness.length; y++) {
+                                if (!witness_used.includes(y)) {
+                                    var sw = coinjs.segwitAddress(this.witness[y][1]);
+                                    var b32 = coinjs.bech32Address(this.witness[y][1]);
+                                    var rs = '';
+
+                                    if (this.ins[i].script.chunks.length >= 1) {
+                                        rs = Crypto.util.bytesToHex(this.ins[i].script.chunks[0]);
+                                    } else if (this.ins[i].script.chunks.length == 0) {
+                                        rs = b32['redeemscript'];
+                                    }
+
+                                    if ((sw['redeemscript'] == rs) || (b32['redeemscript'] == rs)) {
+                                        witness_order.push(this.witness[y]);
+                                        witness_used.push(y);
+
+                                        // bech32, empty redeemscript
+                                        if (b32['redeemscript'] == rs) {
+                                            this.ins[index].script = coinjs.script();
+                                        }
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+
+                        this.witness = witness_order;
+                        */
+                    }
+                }
+                return true;
+            }
+
+            /* sign inputs */
+            r.sign = function (wif, sigHashType) {
+                var shType = sigHashType || 1;
+                for (var i = 0; i < this.ins.length; i++) {
+                    var d = this.extractScriptKey(i);
+
+                    var w2a = coinjs.wif2address(wif);
+                    var script = coinjs.script();
+                    var pubkeyHash = script.pubkeyHash(w2a['address']);
+
+                    if (((d['type'] == 'scriptpubkey' && d['script'] == Crypto.util.bytesToHex(pubkeyHash.buffer)) || d['type'] == 'empty') && d['signed'] == "false") {
+                        this.signinput(i, wif, shType);
+
+                    } else if (d['type'] == 'hodl' && d['signed'] == "false") {
+                        this.signhodl(i, wif, shType);
+
+                    } else if (d['type'] == 'multisig') {
+                        this.signmultisig(i, wif, shType);
+
+                    } else if (d['type'] == 'segwit') {
+                        this.signsegwit(i, wif, shType);
+
+                    } else {
+                        // could not sign
+                    }
+                }
+                return this.serialize();
+            }
+
+            /* serialize a transaction */
+            r.serialize = function () {
+                var buffer = [];
+                buffer = buffer.concat(coinjs.numToBytes(parseInt(this.version), 4));
+
+                if (coinjs.isArray(this.witness)) {
+                    buffer = buffer.concat([0x00, 0x01]);
+                }
+
+                buffer = buffer.concat(coinjs.numToVarInt(this.ins.length));
+                for (var i = 0; i < this.ins.length; i++) {
+                    var txin = this.ins[i];
+                    buffer = buffer.concat(Crypto.util.hexToBytes(txin.outpoint.hash).reverse());
+                    buffer = buffer.concat(coinjs.numToBytes(parseInt(txin.outpoint.index), 4));
+                    var scriptBytes = txin.script.buffer;
+                    buffer = buffer.concat(coinjs.numToVarInt(scriptBytes.length));
+                    buffer = buffer.concat(scriptBytes);
+                    buffer = buffer.concat(coinjs.numToBytes(parseInt(txin.sequence), 4));
+                }
+                buffer = buffer.concat(coinjs.numToVarInt(this.outs.length));
+
+                for (var i = 0; i < this.outs.length; i++) {
+                    var txout = this.outs[i];
+                    buffer = buffer.concat(coinjs.numToBytes(txout.value, 8));
+                    var scriptBytes = txout.script.buffer;
+                    buffer = buffer.concat(coinjs.numToVarInt(scriptBytes.length));
+                    buffer = buffer.concat(scriptBytes);
+                }
+
+                if ((coinjs.isArray(this.witness)) && this.witness.length >= 1) {
+                    for (var i = 0; i < this.witness.length; i++) {
+                        buffer = buffer.concat(coinjs.numToVarInt(this.witness[i].length));
+                        for (var x = 0; x < this.witness[i].length; x++) {
+                            buffer = buffer.concat(coinjs.numToVarInt(Crypto.util.hexToBytes(this.witness[i][x]).length));
+                            buffer = buffer.concat(Crypto.util.hexToBytes(this.witness[i][x]));
+                        }
+                    }
+                }
+
+                buffer = buffer.concat(coinjs.numToBytes(parseInt(this.lock_time), 4));
+                return Crypto.util.bytesToHex(buffer);
+            }
+
+            /* deserialize a transaction */
+            r.deserialize = function (buffer) {
+                if (typeof buffer == "string") {
+                    buffer = Crypto.util.hexToBytes(buffer)
+                }
+
+                var pos = 0;
+                var witness = false;
+
+                var readAsInt = function (bytes) {
+                    if (bytes == 0) return 0;
+                    pos++;
+                    return buffer[pos - 1] + readAsInt(bytes - 1) * 256;
+                }
+
+                var readVarInt = function () {
+                    pos++;
+                    if (buffer[pos - 1] < 253) {
+                        return buffer[pos - 1];
+                    }
+                    return readAsInt(buffer[pos - 1] - 251);
+                }
+
+                var readBytes = function (bytes) {
+                    pos += bytes;
+                    return buffer.slice(pos - bytes, pos);
+                }
+
+                var readVarString = function () {
+                    var size = readVarInt();
+                    return readBytes(size);
+                }
+
+                var obj = new coinjs.transaction();
+                obj.version = readAsInt(4);
+
+                if (buffer[pos] == 0x00 && buffer[pos + 1] == 0x01) {
+                    // segwit transaction
+                    witness = true;
+                    obj.witness = [];
+                    pos += 2;
+                }
+
+                var ins = readVarInt();
+                for (var i = 0; i < ins; i++) {
+                    obj.ins.push({
+                        outpoint: {
+                            hash: Crypto.util.bytesToHex(readBytes(32).reverse()),
+                            index: readAsInt(4)
+                        },
+                        script: coinjs.script(readVarString()),
+                        sequence: readAsInt(4)
+                    });
+                }
+
+                var outs = readVarInt();
+                for (var i = 0; i < outs; i++) {
+                    obj.outs.push({
+                        value: coinjs.bytesToNum(readBytes(8)),
+                        script: coinjs.script(readVarString())
+                    });
+                }
+
+                if (witness == true) {
+                    for (i = 0; i < ins; ++i) {
+                        var count = readVarInt();
+                        var vector = [];
+                        if (!coinjs.isArray(obj.witness[i])) {
+                            obj.witness[i] = [];
+                        }
+                        for (var y = 0; y < count; y++) {
+                            var slice = readVarInt();
+                            pos += slice;
+                            obj.witness[i].push(Crypto.util.bytesToHex(buffer.slice(pos - slice, pos)));
+                        }
+                    }
+                }
+
+                obj.lock_time = readAsInt(4);
+                return obj;
+            }
+
+            r.size = function () {
+                return ((this.serialize()).length / 2).toFixed(0);
+            }
+
+            return r;
+        }
+
+        /* start of signature vertification functions */
+
+        coinjs.verifySignature = function (hash, sig, pubkey) {
+
+            function parseSig(sig) {
+                var cursor;
+                if (sig[0] != 0x30)
+                    throw new Error("Signature not a valid DERSequence");
+
+                cursor = 2;
+                if (sig[cursor] != 0x02)
+                    throw new Error("First element in signature must be a DERInteger");;
+
+                var rBa = sig.slice(cursor + 2, cursor + 2 + sig[cursor + 1]);
+
+                cursor += 2 + sig[cursor + 1];
+                if (sig[cursor] != 0x02)
+                    throw new Error("Second element in signature must be a DERInteger");
+
+                var sBa = sig.slice(cursor + 2, cursor + 2 + sig[cursor + 1]);
+
+                cursor += 2 + sig[cursor + 1];
+
+                var r = BigInteger.fromByteArrayUnsigned(rBa);
+                var s = BigInteger.fromByteArrayUnsigned(sBa);
+
+                return {
+                    r: r,
+                    s: s
+                };
+            }
+
+            var r, s;
+
+            if (coinjs.isArray(sig)) {
+                var obj = parseSig(sig);
+                r = obj.r;
+                s = obj.s;
+            } else if ("object" === typeof sig && sig.r && sig.s) {
+                r = sig.r;
+                s = sig.s;
+            } else {
+                throw "Invalid value for signature";
+            }
+
+            var Q;
+            if (coinjs.isArray(pubkey)) {
+                var ecparams = EllipticCurve.getSECCurveByName("secp256k1");
+                Q = EllipticCurve.PointFp.decodeFrom(ecparams.getCurve(), pubkey);
+            } else {
+                throw "Invalid format for pubkey value, must be byte array";
+            }
+            var e = BigInteger.fromByteArrayUnsigned(hash);
+
+            return coinjs.verifySignatureRaw(e, r, s, Q);
+        }
+
+        coinjs.verifySignatureRaw = function (e, r, s, Q) {
+            var ecparams = EllipticCurve.getSECCurveByName("secp256k1");
+            var n = ecparams.getN();
+            var G = ecparams.getG();
+
+            if (r.compareTo(BigInteger.ONE) < 0 || r.compareTo(n) >= 0)
+                return false;
+
+            if (s.compareTo(BigInteger.ONE) < 0 || s.compareTo(n) >= 0)
+                return false;
+
+            var c = s.modInverse(n);
+
+            var u1 = e.multiply(c).mod(n);
+            var u2 = r.multiply(c).mod(n);
+
+            var point = G.multiply(u1).add(Q.multiply(u2));
+
+            var v = point.getX().toBigInteger().mod(n);
+
+            return v.equals(r);
+        }
+
+        /* start of privates functions */
+
+        /* base58 encode function */
+        coinjs.base58encode = function (buffer) {
+            var alphabet = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+            var base = BigInteger.valueOf(58);
+
+            var bi = BigInteger.fromByteArrayUnsigned(buffer);
+            var chars = [];
+
+            while (bi.compareTo(base) >= 0) {
+                var mod = bi.mod(base);
+                chars.unshift(alphabet[mod.intValue()]);
+                bi = bi.subtract(mod).divide(base);
+            }
+
+            chars.unshift(alphabet[bi.intValue()]);
+            for (var i = 0; i < buffer.length; i++) {
+                if (buffer[i] == 0x00) {
+                    chars.unshift(alphabet[0]);
+                } else break;
+            }
+            return chars.join('');
+        }
+
+        /* base58 decode function */
+        coinjs.base58decode = function (buffer) {
+            var alphabet = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+            var base = BigInteger.valueOf(58);
+            var validRegex = /^[1-9A-HJ-NP-Za-km-z]+$/;
+
+            var bi = BigInteger.valueOf(0);
+            var leadingZerosNum = 0;
+            for (var i = buffer.length - 1; i >= 0; i--) {
+                var alphaIndex = alphabet.indexOf(buffer[i]);
+                if (alphaIndex < 0) {
+                    throw "Invalid character";
+                }
+                bi = bi.add(BigInteger.valueOf(alphaIndex).multiply(base.pow(buffer.length - 1 - i)));
+
+                if (buffer[i] == "1") leadingZerosNum++;
+                else leadingZerosNum = 0;
+            }
+
+            var bytes = bi.toByteArrayUnsigned();
+            while (leadingZerosNum-- > 0) bytes.unshift(0);
+            return bytes;
+        }
+
+        /* raw ajax function to avoid needing bigger frame works like jquery, mootools etc */
+        coinjs.ajax = function (u, f, m, a) {
+            var x = false;
+            try {
+                x = new ActiveXObject('Msxml2.XMLHTTP')
+            } catch (e) {
+                try {
+                    x = new ActiveXObject('Microsoft.XMLHTTP')
+                } catch (e) {
+                    x = new XMLHttpRequest()
+                }
+            }
+
+            if (x == false) {
+                return false;
+            }
+
+            x.open(m, u, true);
+            x.onreadystatechange = function () {
+                if ((x.readyState == 4) && f)
+                    f(x.responseText);
+            };
+
+            if (m == 'POST') {
+                x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+            }
+
+            x.send(a);
+        }
+
+        /* clone an object */
+        coinjs.clone = function (obj) {
+            if (obj == null || typeof (obj) != 'object') return obj;
+            var temp = new obj.constructor();
+
+            for (var key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    temp[key] = coinjs.clone(obj[key]);
+                }
+            }
+            return temp;
+        }
+
+        coinjs.numToBytes = function (num, bytes) {
+            if (typeof bytes === "undefined") bytes = 8;
+            if (bytes == 0) {
+                return [];
+            } else if (num == -1) {
+                return Crypto.util.hexToBytes("ffffffffffffffff");
+            } else {
+                return [num % 256].concat(coinjs.numToBytes(Math.floor(num / 256), bytes - 1));
+            }
+        }
+
+        function scriptNumSize(i) {
+            return i > 0x7fffffff ? 5 :
+                i > 0x7fffff ? 4 :
+                    i > 0x7fff ? 3 :
+                        i > 0x7f ? 2 :
+                            i > 0x00 ? 1 :
+                                0;
+        }
+
+        coinjs.numToScriptNumBytes = function (_number) {
+            var value = Math.abs(_number);
+            var size = scriptNumSize(value);
+            var result = [];
+            for (var i = 0; i < size; ++i) {
+                result.push(0);
+            }
+            var negative = _number < 0;
+            for (i = 0; i < size; ++i) {
+                result[i] = value & 0xff;
+                value = Math.floor(value / 256);
+            }
+            if (negative) {
+                result[size - 1] |= 0x80;
+            }
+            return result;
+        }
+
+        coinjs.numToVarInt = function (num) {
+            if (num < 253) {
+                return [num];
+            } else if (num < 65536) {
+                return [253].concat(coinjs.numToBytes(num, 2));
+            } else if (num < 4294967296) {
+                return [254].concat(coinjs.numToBytes(num, 4));
+            } else {
+                return [255].concat(coinjs.numToBytes(num, 8));
+            }
+        }
+
+        coinjs.bytesToNum = function (bytes) {
+            if (bytes.length == 0) return 0;
+            else return bytes[0] + 256 * coinjs.bytesToNum(bytes.slice(1));
+        }
+
+        coinjs.uint = function (f, size) {
+            if (f.length < size)
+                throw new Error("not enough data");
+            var n = 0;
+            for (var i = 0; i < size; i++) {
+                n *= 256;
+                n += f[i];
+            }
+            return n;
+        }
+
+        coinjs.isArray = function (o) {
+            return Object.prototype.toString.call(o) === '[object Array]';
+        }
+
+        coinjs.countObject = function (obj) {
+            var count = 0;
+            var i;
+            for (i in obj) {
+                if (obj.hasOwnProperty(i)) {
+                    count++;
+                }
+            }
+            return count;
+        }
+
+        coinjs.random = function (length) {
+            var r = "";
+            var l = length || 25;
+            var chars = "!$%^&*()_+{}:@~?><|\./;'#][=-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
+            for (x = 0; x < l; x++) {
+                r += chars.charAt(Math.floor(Math.random() * 62));
+            }
+            return r;
+        }
+
+    })();
+})(typeof global !== "undefined" ? global : window);
+
+(function (EXPORTS) { //btc_api v1.0.6
+    const btc_api = EXPORTS;
+
+    //This library uses API provided by chain.so (https://chain.so/)
+    const URL = "https://chain.so/api/v2/";
+
+    const fetch_api = btc_api.fetch = function (api) {
+        return new Promise((resolve, reject) => {
+            console.debug(URL + api);
+            fetch(URL + api).then(response => {
+                response.json()
+                    .then(result => result.status === "success" ? resolve(result) : reject(result))
+                    .catch(error => reject(error))
+            }).catch(error => reject(error))
+        })
+    };
+
+    const broadcast = btc_api.broadcast = rawtx => new Promise((resolve, reject) => {
+        $.ajax({
+            type: "POST",
+            url: URL + "send_tx/BTC/",
+            data: {
+                "tx_hex": rawtx
+            },
+            dataType: "json",
+            error: e => reject(e.responseJSON),
+            success: r => r.status === "success" ? resolve(r.data) : reject(r)
+        })
+    });
+
+    Object.defineProperties(btc_api, {
+        newKeys: {
+            get: () => {
+                let r = coinjs.newKeys();
+                r.segwitAddress = coinjs.segwitAddress(r.pubkey).address;
+                r.bech32Address = coinjs.bech32Address(r.pubkey).address;
+                return r;
+            }
+        },
+        pubkey: {
+            value: key => key.length >= 66 ? key : (key.length == 64 ? coinjs.newPubkey(key) : coinjs.wif2pubkey(key).pubkey)
+        },
+        address: {
+            value: (key, prefix = undefined) => coinjs.pubkey2address(btc_api.pubkey(key), prefix)
+        },
+        segwitAddress: {
+            value: key => coinjs.segwitAddress(btc_api.pubkey(key)).address
+        },
+        bech32Address: {
+            value: key => coinjs.bech32Address(btc_api.pubkey(key)).address
+        }
+    });
+
+    coinjs.compressed = true;
+
+    const verifyKey = btc_api.verifyKey = function (addr, key) {
+        if (!addr || !key)
+            return undefined;
+        switch (coinjs.addressDecode(addr).type) {
+            case "standard":
+                return btc_api.address(key) === addr;
+            case "multisig":
+                return btc_api.segwitAddress(key) === addr;
+            case "bech32":
+                return btc_api.bech32Address(key) === addr;
+            default:
+                return null;
+        }
+    }
+
+    const validateAddress = btc_api.validateAddress = function (addr) {
+        if (!addr)
+            return undefined;
+        let type = coinjs.addressDecode(addr).type;
+        if (["standard", "multisig", "bech32"].includes(type))
+            return type;
+        else
+            return false;
+    }
+
+    //convert from one blockchain to another blockchain (target version)
+    btc_api.convert = {};
+
+    btc_api.convert.wif = function (source_wif, target_version = coinjs.priv) {
+        let keyHex = decodeLegacy(source_wif).hex;
+        if (!keyHex || keyHex.length < 66 || !/01$/.test(keyHex))
+            return null;
+        else
+            return encodeLegacy(keyHex, target_version);
+    }
+
+    btc_api.convert.legacy2legacy = function (source_addr, target_version = coinjs.pub) {
+        let rawHex = decodeLegacy(source_addr).hex;
+        if (!rawHex)
+            return null;
+        else
+            return encodeLegacy(rawHex, target_version);
+    }
+
+    btc_api.convert.legacy2bech = function (source_addr, target_version = coinjs.bech32.version, target_hrp = coinjs.bech32.hrp) {
+        let rawHex = decodeLegacy(source_addr).hex;
+        if (!rawHex)
+            return null;
+        else
+            return encodeBech32(rawHex, target_version, target_hrp);
+    }
+
+    btc_api.convert.bech2bech = function (source_addr, target_version = coinjs.bech32.version, target_hrp = coinjs.bech32.hrp) {
+        let rawHex = decodeBech32(source_addr).hex;
+        if (!rawHex)
+            return null;
+        else
+            return encodeBech32(rawHex, target_version, target_hrp);
+    }
+
+    btc_api.convert.bech2legacy = function (source_addr, target_version = coinjs.pub) {
+        let rawHex = decodeBech32(source_addr).hex;
+        if (!rawHex)
+            return null;
+        else
+            return encodeLegacy(rawHex, target_version);
+    }
+
+    function decodeLegacy(source) {
+        var decode = coinjs.base58decode(source);
+        var raw = decode.slice(0, decode.length - 4),
+            checksum = decode.slice(decode.length - 4);
+        var hash = Crypto.SHA256(Crypto.SHA256(raw, {
+            asBytes: true
+        }), {
+            asBytes: true
+        });
+        if (hash[0] != checksum[0] || hash[1] != checksum[1] || hash[2] != checksum[2] || hash[3] != checksum[3])
+            return null;
+        let version = raw.shift();
+        return {
+            version: version,
+            hex: Crypto.util.bytesToHex(raw)
+        }
+    }
+
+    function encodeLegacy(hex, version) {
+        var bytes = Crypto.util.hexToBytes(hex);
+        bytes.unshift(version);
+        var hash = Crypto.SHA256(Crypto.SHA256(bytes, {
+            asBytes: true
+        }), {
+            asBytes: true
+        });
+        var checksum = hash.slice(0, 4);
+        return coinjs.base58encode(bytes.concat(checksum));
+    }
+
+    function decodeBech32(source) {
+        let decode = coinjs.bech32_decode(source);
+        if (!decode)
+            return null;
+        var raw = decode.data;
+        let version = raw.shift();
+        raw = coinjs.bech32_convert(raw, 5, 8, false);
+        return {
+            hrp: decode.hrp,
+            version: version,
+            hex: Crypto.util.bytesToHex(raw)
+        }
+    }
+
+    function encodeBech32(hex, version, hrp) {
+        var bytes = Crypto.util.hexToBytes(hex);
+        bytes = coinjs.bech32_convert(bytes, 8, 5, true);
+        bytes.unshift(version)
+        return coinjs.bech32_encode(hrp, bytes);
+    }
+
+    btc_api.getBalance = addr => new Promise((resolve, reject) => {
+        fetch_api(`get_address_balance/BTC/${addr}`)
+            .then(result => resolve(parseFloat(result.data.confirmed_balance)))
+            .catch(error => reject(error))
+    });
+
+    function _redeemScript(addr, key) {
+        let decode = coinjs.addressDecode(addr);
+        switch (decode.type) {
+            case "standard":
+                return false;
+            case "multisig":
+                return coinjs.segwitAddress(btc_api.pubkey(key)).redeemscript;
+            case "bech32":
+                return decode.redeemscript;
+            default:
+                return null;
+        }
+    }
+
+    function addUTXOs(tx, senders, redeemScripts, required_amount, n = 0) {
+        return new Promise((resolve, reject) => {
+            required_amount = parseFloat(required_amount.toFixed(8));
+            if (required_amount <= 0 || n >= senders.length)
+                return resolve(required_amount);
+            let addr = senders[n],
+                rs = redeemScripts[n];
+            fetch_api(`get_tx_unspent/BTC/${addr}`).then(result => {
+                let utxos = result.data.txs;
+                console.debug("add-utxo", addr, rs, required_amount, utxos);
+                for (let i = 0; i < utxos.length && required_amount > 0; i++) {
+                    if (!utxos[i].confirmations) //ignore unconfirmed utxo
+                        continue;
+                    required_amount -= parseFloat(utxos[i].value);
+                    var script;
+                    if (rs) { //redeemScript for segwit/bech32
+                        let s = coinjs.script();
+                        s.writeBytes(Crypto.util.hexToBytes(rs));
+                        s.writeOp(0);
+                        s.writeBytes(coinjs.numToBytes((utxos[i].value * 100000000).toFixed(0), 8));
+                        script = Crypto.util.bytesToHex(s.buffer);
+                    } else //legacy script
+                        script = utxos[i].script_hex;
+                    tx.addinput(utxos[i].txid, utxos[i].output_no, script, 0xfffffffd /*sequence*/); //0xfffffffd for Replace-by-fee
+                }
+                addUTXOs(tx, senders, redeemScripts, required_amount, n + 1)
+                    .then(result => resolve(result))
+                    .catch(error => reject(error))
+            }).catch(error => reject(error))
+        })
+    }
+
+    btc_api.sendTx = function (senders, privkeys, receivers, amounts, fee, change_addr = null) {
+        return new Promise((resolve, reject) => {
+            //Add values into array (if single values are passed)
+            if (!Array.isArray(senders))
+                senders = [senders];
+            if (!Array.isArray(privkeys))
+                privkeys = [privkeys];
+            if (!Array.isArray(receivers))
+                receivers = [receivers];
+            if (!Array.isArray(amounts))
+                amounts = [amounts];
+
+            let invalids = [];
+            //validate tx-input parameters
+            if (senders.length != privkeys.length)
+                return reject("Array length for senders and privkeys should be equal");
+            const redeemScripts = [],
+                wif_keys = [];
+            for (let i in senders) {
+                if (!verifyKey(senders[i], privkeys[i])) //verify private-key
+                    invalids.push(senders[i]);
+                if (privkeys[i].length === 64) //convert Hex to WIF if needed
+                    privkeys[i] = coinjs.privkey2wif(privkeys[i]);
+                let rs = _redeemScript(senders[i], privkeys[i]); //get redeem-script (segwit/bech32)
+                redeemScripts.push(rs);
+                rs === false ? wif_keys.unshift(privkeys[i]) : wif_keys.push(privkeys[i]); //sorting private-keys (wif)
+            }
+            if (invalids.length)
+                return reject("Invalid keys:" + invalids);
+            if (typeof fee !== "number" || fee <= 0)
+                return reject("Invalid fee:" + fee);
+
+            //validate tx-output parameters
+            if (receivers.length != amounts.length)
+                return reject("Array length for receivers and amounts should be equal");
+            let total_amount = 0;
+            for (let i in receivers)
+                if (!validateAddress(receivers[i]))
+                    invalids.push(receivers[i]);
+            if (invalids.length)
+                return reject("Invalid receivers:" + invalids);
+            for (let i in amounts) {
+                if (typeof amounts[i] !== "number" || amounts[i] <= 0)
+                    invalids.push(amounts[i]);
+                else
+                    total_amount += amounts[i];
+            }
+            if (invalids.length)
+                return reject("Invalid amounts:" + invalids);
+            if (change_addr && !validateAddress(change_addr))
+                return reject("Invalid change_address:" + change_addr);
+
+            //create transaction
+            var tx = coinjs.transaction();
+            total_amount = parseFloat(total_amount.toFixed(8));
+            addUTXOs(tx, senders, redeemScripts, total_amount + fee).then(result => {
+                if (result > 0)
+                    return reject("Insufficient Balance");
+                for (let i in receivers)
+                    tx.addoutput(receivers[i], amounts[i]);
+                let change = parseFloat(Math.abs(result).toFixed(8));
+                if (change > 0)
+                    tx.addoutput(change_addr || senders[0], change);
+                console.debug("amounts (total, fee, change):", total_amount, fee, change);
+                console.debug("Unsigned:", tx.serialize());
+                new Set(wif_keys).forEach(key => console.debug("Signing key:", key, tx.sign(key, 1 /*sighashtype*/))); //Sign the tx using private key WIF
+
+                console.debug("Signed:", tx.serialize());
+                debugger;
+                broadcast(tx.serialize())
+                    .then(result => resolve(result))
+                    .catch(error => reject(error));
+            }).catch(error => reject(error))
+        })
+    };
+
+    btc_api.getTx = txid => new Promise((resolve, reject) => {
+        fetch_api(`get_tx/BTC/${txid}`)
+            .then(result => resolve(result.data))
+            .catch(error => reject(error))
+    });
+
+    btc_api.getAddressData = addr => new Promise((resolve, reject) => {
+        fetch_api(`address/BTC/${addr}`)
+            .then(result => resolve(result.data))
+            .catch(error => reject(error))
+    });
+
+    btc_api.getBlock = block => new Promise((resolve, reject) => {
+        fetch_api(`get_block/BTC/${block}`)
+            .then(result => resolve(result.data))
+            .catch(error => reject(error))
+    });
+
+})('object' === typeof module ? module.exports : window.btc_api = {});
\ No newline at end of file
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index f490140..930d3ae 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -1,8 +1,9 @@
 /*jshint esversion: 9 */
 // Global variables
-const { html, render: renderElem } = uhtml;
+const { html, render: renderElem,svg } = uhtml;
 const domRefs = {};
-let paymentsHistoryLoader = null;
+let rupeeHistoryLoader = null;
+let btcHistoryLoader = null;
 let walletHistoryLoader = null;
 let contactHistoryLoader = null;
 let paymentRequestsLoader = null;
@@ -93,12 +94,10 @@ document.addEventListener('popupopened', async e => {
     const frag = document.createDocumentFragment()
     switch (e.target.id) {
         case 'saved_ids_popup':
-            getArrayOfSavedIds().forEach(({ floID, details }) => {
-                frag.append(render.savedIdPickerCard(floID, details))
-            })
-            getRef('saved_ids_picker_list').innerHTML = ''
-            getRef('saved_ids_picker_list').append(frag)
-            getRef('search_saved_ids_picker').focusIn()
+            renderElem(getRef('saved_ids_picker_list'), html`${getArrayOfSavedIds().map(({ floID, details }) => render.savedIdPickerCard(floID, details))}`)
+            setTimeout(() => {
+                getRef('search_saved_ids_picker').focusIn()
+            }, 0);
             break;
         case 'topup_wallet_popup':
         case 'withdraw_wallet_popup':
@@ -113,6 +112,9 @@ document.addEventListener('popupopened', async e => {
                 getRef('select_withdraw_upi_id').parentNode.classList.remove('hide')
             }
             break;
+        case 'send_btc_popup':
+            calculateBtcFees();
+            break;
     }
 })
 document.addEventListener('popupclosed', e => {
@@ -208,16 +210,13 @@ function notify(message, mode, options = {}) {
     }
 }
 
-function getFormattedTime(time, format) {
+function getFormattedTime(timestamp, format) {
     try {
-        if (String(time).indexOf('_'))
-            time = String(time).split('_')[0]
-        const intTime = parseInt(time)
-        if (String(intTime).length < 13)
-            time *= 1000
-        let [day, month, date, year] = new Date(intTime).toString().split(' '),
-            minutes = new Date(intTime).getMinutes(),
-            hours = new Date(intTime).getHours(),
+        if (String(timestamp).length < 13)
+            timestamp *= 1000
+        let [day, month, date, year] = new Date(timestamp).toString().split(' '),
+            minutes = new Date(timestamp).getMinutes(),
+            hours = new Date(timestamp).getHours(),
             currentTime = new Date().toString().split(' ')
 
         minutes = minutes < 10 ? `0${minutes}` : minutes
@@ -233,15 +232,22 @@ function getFormattedTime(time, format) {
         switch (format) {
             case 'date-only':
                 return `${month} ${date}, ${year}`;
-                break;
+            case 'time-only':
+                return finalHours;
+            case 'relative':
+                // check if timestamp is older than a day
+                if (Date.now() - new Date(timestamp) < 60 * 60 * 24 * 1000)
+                    return `${finalHours}`;
+                else
+                    return relativeTime.from(timestamp)
             default:
                 return `${month} ${date}, ${year} at ${finalHours}`;
         }
     } catch (e) {
         console.error(e);
-        return time;
+        return timestamp;
     }
-}
+}   
 // implement event delegation
 function delegate(el, event, selector, fn) {
     el.addEventListener(event, function (e) {
@@ -277,12 +283,18 @@ window.addEventListener("load", () => {
     })
 });
 function toggleFloIDVisibility(hide) {
-    document.querySelectorAll('.flo-id-wrapper').forEach(elem => {
+    document.querySelectorAll('.logged-in-user-id').forEach(elem => {
         if(hide)
             elem.classList.add('hide')
         else
             elem.classList.remove('hide')
     })
+    document.querySelectorAll('.app-name').forEach(elem => {
+        if(hide)
+            elem.classList.remove('hide')
+        else
+            elem.classList.add('hide')
+    })
 }
 function createRipple(event, target) {
     const circle = document.createElement("span");
@@ -295,6 +307,10 @@ function createRipple(event, target) {
     circle.classList.add("ripple");
     const rippleAnimation = circle.animate(
         [
+            {
+                opacity: 1,
+                transform: `scale(0)`
+            },
             {
                 transform: "scale(4)",
                 opacity: 0,
@@ -386,7 +402,13 @@ async function showPage(targetPage, options = {}) {
                 })
             break;
         case 'history':
-            render.paymentsHistory()
+            if (params.asset) {
+                if (params.asset === 'rupee') {
+                    render.rupeeHistory()
+                }else if(params.asset === 'btc'){
+                    render.btcHistory()
+                }
+            } 
             break;
         case 'wallet':
             const walletTransactions = []
@@ -516,8 +538,10 @@ async function showPage(targetPage, options = {}) {
             break;
     }
     if (pageId !== 'history') {
-        if (paymentsHistoryLoader)
-            paymentsHistoryLoader.clear()
+        if (rupeeHistoryLoader)
+            rupeeHistoryLoader.clear()
+        if (btcHistoryLoader)
+            btcHistoryLoader.clear()
     }
     if (pageId !== 'wallet') {
         if (walletHistoryLoader)
@@ -668,102 +692,121 @@ const indicatorObserver = new IntersectionObserver(entries => {
     threshold: 1
 })
 
-// class based lazy loading
-class LazyLoader {
-    constructor(container, elementsToRender, renderFn, options = {}) {
-        const { batchSize = 10, freshRender, bottomFirst = false } = options
+        // class based lazy loading
+        class LazyLoader {
+            constructor(container, elementsToRender, renderFn, options = {}) {
+                const { batchSize = 10, freshRender, bottomFirst = false, domUpdated } = options
 
-        this.elementsToRender = elementsToRender
-        this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
-        this.renderFn = renderFn
-        this.intersectionObserver
+                this.elementsToRender = elementsToRender
+                this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
+                this.renderFn = renderFn
+                this.intersectionObserver
 
-        this.batchSize = batchSize
-        this.freshRender = freshRender
-        this.bottomFirst = bottomFirst
+                this.batchSize = batchSize
+                this.freshRender = freshRender
+                this.domUpdated = domUpdated
+                this.bottomFirst = bottomFirst
 
-        this.lazyContainer = document.querySelector(container)
+                this.shouldLazyLoad = false
+                this.lastScrollTop = 0
+                this.lastScrollHeight = 0
 
-        this.update = this.update.bind(this)
-        this.render = this.render.bind(this)
-        this.init = this.init.bind(this)
-        this.clear = this.clear.bind(this)
-    }
-    get elements() {
-        return this.arrayOfElements
-    }
-    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) {
-                        if (this.bottomFirst)
-                            this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
-                        else
-                            this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+                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)
+            }
+            get elements() {
+                return this.arrayOfElements
+            }
+            init() {
+                this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            observer.disconnect()
+                            this.render({ lazyLoad: true })
+                        }
+                    })
+                })
+                this.mutationObserver = new MutationObserver(mutationList => {
+                    mutationList.forEach(mutation => {
+                        if (mutation.type === 'childList') {
+                            if (mutation.addedNodes.length) {
+                                if (this.bottomFirst) {
+                                    if (this.lazyContainer.firstElementChild)
+                                        this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
+                                } else {
+                                    if (this.lazyContainer.lastElementChild)
+                                        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 || []
+            }
+            render(options = {}) {
+                let { lazyLoad = false } = options
+                this.shouldLazyLoad = lazyLoad
+                const frag = document.createDocumentFragment();
+                if (lazyLoad) {
+                    if (this.bottomFirst) {
+                        this.updateEndIndex = this.updateStartIndex
+                        this.updateStartIndex = this.updateEndIndex - this.batchSize
+                    } else {
+                        this.updateStartIndex = this.updateEndIndex
+                        this.updateEndIndex = this.updateEndIndex + this.batchSize
                     }
+                } else {
+                    this.intersectionObserver.disconnect()
+                    if (this.bottomFirst) {
+                        this.updateEndIndex = this.arrayOfElements.length
+                        this.updateStartIndex = this.updateEndIndex - this.batchSize - 1
+                    } else {
+                        this.updateStartIndex = 0
+                        this.updateEndIndex = this.batchSize
+                    }
+                    this.lazyContainer.innerHTML = ``;
                 }
-            })
-        })
-        this.mutationObserver.observe(this.lazyContainer, {
-            childList: true,
-        })
-        this.render()
-    }
-    update(elementsToRender) {
-        this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
-    }
-    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
-        }
-        if (this.bottomFirst) {
-            for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
-                frag.prepend(this.renderFn(this.arrayOfElements[index]))
+                this.lastScrollHeight = this.lazyContainer.scrollHeight
+                this.lastScrollTop = this.lazyContainer.scrollTop
+                this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach((element, index) => {
+                    frag.append(this.renderFn(element))
+                })
+                if (this.bottomFirst) {
+                    this.lazyContainer.prepend(frag)
+                    // scroll anchoring for reverse scrolling
+                    this.lastScrollTop += this.lazyContainer.scrollHeight - this.lastScrollHeight
+                    this.lazyContainer.scrollTo({ top: this.lastScrollTop })
+                    this.lastScrollHeight = this.lazyContainer.scrollHeight
+                } else {
+                    this.lazyContainer.append(frag)
+                }
+                if (!lazyLoad && this.bottomFirst) {
+                    this.lazyContainer.scrollTop = this.lazyContainer.scrollHeight
+                }
+                // Callback to be called if elements are updated or rendered for first time
+                if (!lazyLoad && this.freshRender)
+                    this.freshRender()
             }
-            this.lazyContainer.prepend(frag)
-        } else {
-            for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
-                frag.append(this.renderFn(this.arrayOfElements[index]))
+            clear() {
+                this.intersectionObserver.disconnect()
+                this.mutationObserver.disconnect()
+                this.lazyContainer.innerHTML = ``;
+            }
+            reset() {
+                this.arrayOfElements = (typeof this.elementsToRender === 'function') ? this.elementsToRender() : this.elementsToRender || []
+                this.render()
             }
-            this.lazyContainer.append(frag)
         }
-        if (!lazyLoad && this.bottomFirst)
-            this.lazyContainer.scrollTo({
-                top: this.lazyContainer.scrollHeight,
-            })
-        // Callback to be called if elements are updated or rendered for first time
-        if (!lazyLoad && this.freshRender)
-            this.freshRender()
-    }
-    clear() {
-        this.intersectionObserver.disconnect()
-        this.mutationObserver.disconnect()
-        this.lazyContainer.innerHTML = ``;
-    }
-    reset() {
-        this.arrayOfElements = (typeof this.elementsToRender === 'function') ? this.elementsToRender() : this.elementsToRender || []
-        this.render()
-    }
-}
 function animateTo(element, keyframes, options) {
     const anime = element.animate(keyframes, { ...options, fill: 'both' })
     anime.finished.then(() => {
@@ -780,13 +823,31 @@ function handleMobileChange(e) {
 mobileQuery.addEventListener('change', handleMobileChange)
 handleMobileChange(mobileQuery)
 
-function showChildElement(id, index) {
-    [...getRef(id).children].forEach((child, i) => {
-        if (i === index)
-            child.classList.remove('hide')
-        else
-            child.classList.add('hide')
-    })
+function showChildElement(id, index, options = {}) {
+    const { mobileView = false, entry, exit } = options
+    const animOptions = {
+        duration: 150,
+        easing: 'ease',
+        fill: 'forwards'
+    }
+    const visibleElement = [...getRef(id).children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hide'));
+    if (visibleElement === getRef(id).children[index]) return;
+    if (visibleElement) {
+        if (exit) {
+            visibleElement.animate(exit, animOptions).onfinish = () => {
+                visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hide')
+                getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
+                if (entry)
+                    getRef(id).children[index].animate(entry, animOptions)
+            }
+        } else {
+            visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hide')
+            getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
+        }
+    } else {
+        getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
+        getRef(id).children[index].animate(entry, animOptions)
+    }
 }
 
 // Reactivity system
@@ -880,4 +941,12 @@ function handleVisibilityChange() {
         if (floGlobals.loaded && floGlobals.isSubAdmin)
             startStatusInterval()
     }
-}
\ No newline at end of file
+}
+
+
+function conditionalClassToggle(el, className, condition) {
+    if(condition)
+        el.classList.add(className);
+    else
+        el.classList.remove(className);
+}