From 5280073eb4fa23b8284819560bc3a82760db3443 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sun, 27 Oct 2019 17:27:35 +0530
Subject: [PATCH] Update FLO_webWallet_mainnet.html

---
 FLO_webWallet_mainnet.html | 234 ++++++++++++++++++++++++-------------
 1 file changed, 152 insertions(+), 82 deletions(-)

diff --git a/FLO_webWallet_mainnet.html b/FLO_webWallet_mainnet.html
index 55d5a13..07570d6 100644
--- a/FLO_webWallet_mainnet.html
+++ b/FLO_webWallet_mainnet.html
@@ -4,6 +4,7 @@
 <title>FLO web wallet</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <meta charset="UTF-8">
+<meta name="description" content="This webapp allows monitoring FLO addresses and performing transactions based on blockchain.">
 <style>
 @font-face {
   font-family: 'Roboto', sans-serif;
@@ -58,7 +59,6 @@ button, textarea {
   border-radius: 0.25em;
   border: 1px solid var(--sec-color);
   margin: 1em 0;
-  color: var(--bw);
   font-family: 'Roboto', sans-serif;
 }
 
@@ -129,7 +129,7 @@ svg:active {
   pointer-events: none;
   opacity: 0.6;
   padding: 0 0.4em;
-  margin: 1.1em 1em 1em 0.8em;
+  margin: 1.05em 1em 1em 0.8em;
   -webkit-transition: color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
   transition: color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
   transition: transform 0.2s ease, color 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
@@ -140,7 +140,6 @@ svg:active {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  color: var(--bw);
   -webkit-transform-origin: left;
           transform-origin: left;
   will-change: transform;
@@ -169,6 +168,7 @@ svg:active {
 }
 
 textarea, input {
+  color: inherit;
   width: 100%;
   font-size: 1em;
   display: flexbox;
@@ -177,7 +177,6 @@ textarea, input {
   border-radius: 0.25em;
   margin: 0;
   border: 1px solid var(--sec-color);
-  color: var(--bw);
   font-family: 'Roboto', sans-serif;
   -webkit-transition: border 0.2s ease;
   transition: border 0.2s ease;
@@ -206,9 +205,6 @@ textarea, input {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   background: var(--body-color);
-  -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
-          box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
-  border-radius: 0.25em;
   -webkit-transition: -webkit-transform 0.2s ease;
   transition: -webkit-transform 0.2s ease;
   transition: transform 0.2s ease;
@@ -437,10 +433,10 @@ textarea, input {
 }
 
 #bottom-nav .icons {
+  opacity: 0.8;
   position: relative;
   width: 100%;
   z-index: 2;
-  color: var(--bw);
   -ms-flex-item-align: center;
       -ms-grid-row-align: center;
       align-self: center;
@@ -778,13 +774,10 @@ loading #p2 {
           transform: translateY(1em);
   padding: 1em 2em;
   background: var(--body-color);
-  border-radius: 0.25em;
   -webkit-transition: -webkit-transform 0.2s ease;
   transition: -webkit-transform 0.2s ease;
   transition: transform 0.2s ease;
   transition: transform 0.2s ease, -webkit-transform 0.2s ease;
-  -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
-          box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
 }
 
 #add button, #edit button {
@@ -807,6 +800,30 @@ loading #p2 {
   width: 100% !important;
 }
 
+#edit-container #edit svg {
+  top: 0;
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center;
+  opacity: 0.6;
+  fill: var(--bw);
+  position: absolute;
+  right: 0;
+  height: 2em;
+  width: 2em;
+  padding: 0.5em;
+  margin: 4.8em 1.5em 1em 1.5em;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+  border-radius: 2em;
+  cursor: pointer;
+}
+
+#edit-container #edit svg:hover {
+  background: var(--sec-color);
+}
+
 #edit-container #edit button:nth-of-type(2) {
   margin-left: auto !important;
 }
@@ -815,6 +832,7 @@ loading #p2 {
   word-break: break-all;
   opacity: 0.6;
   margin: 1em 0;
+  padding-right: 2em;
 }
 
 #edit-container #edit h3, #edit-container #edit h4, #edit-container #edit h5 {
@@ -848,7 +866,6 @@ loading #p2 {
       align-self: flex-start;
   width: 100%;
   position: relative;
-  color: var(--bw);
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -883,6 +900,7 @@ loading #p2 {
 }
 
 #monitor-list monitor svg {
+  top: 0;
   -ms-flex-item-align: center;
       -ms-grid-row-align: center;
       align-self: center;
@@ -904,14 +922,34 @@ loading #p2 {
   background: var(--sec-color);
 }
 
-#monitor-list monitor svg:first-of-type {
-  top: 0;
-  bottom: auto;
+#monitor-list monitor badge {
+  position: absolute;
+  pointer-events: none;
+  color: #fff;
+  background: var(--accent-color);
+  border-radius: 2em;
+  padding: 0.5em;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
+  bottom: 0;
+  right: 0;
+  margin: 0.5em;
+  line-height: 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
-#monitor-list monitor svg:last-of-type {
-  top: auto;
-  bottom: 0;
+#monitor-list monitor badge::after {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
 }
 
 #settings-page section {
@@ -938,6 +976,8 @@ loading #p2 {
   -ms-flex-item-align: center;
       -ms-grid-row-align: center;
       align-self: center;
+  font-weight: normal;
+  opacity: 0.9;
 }
 
 #settings-page div {
@@ -961,7 +1001,7 @@ loading #p2 {
 }
 
 #settings-page .border-card {
-  color: var(--bw);
+  color: inherit;
   text-decoration: none;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1041,8 +1081,8 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-  -webkit-transform: translate(1.6em, -1px);
-          transform: translate(1.6em, -1px);
+  -webkit-transform: translate(1.4em, -1px);
+          transform: translate(1.4em, -1px);
 }
 
 .slider.round {
@@ -1233,11 +1273,17 @@ input:checked + .slider:before {
     padding: 1em 4em 1em 1em;
   }
   #monitor-list monitor svg {
+    top: auto;
+    bottom: 0;
     opacity: 0;
   }
   #monitor-list monitor svg:hover {
     opacity: 1 !important;
   }
+  #monitor-list monitor badge {
+    top: 0;
+    bottom: auto;
+  }
   #monitor-list monitor:hover svg {
     opacity: 0.6;
   }
@@ -1247,6 +1293,9 @@ input:checked + .slider:before {
     place-content: center;
   }
   #add, #edit {
+    -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+            box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+    border-radius: 0.25em;
     position: relative;
     width: 400px !important;
   }
@@ -1341,7 +1390,6 @@ input:checked + .slider:before {
     bottom: 0;
   }
   #main-card #bottom-nav .icons {
-    opacity: 0.6;
     padding: 1.2em;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -1395,6 +1443,9 @@ input:checked + .slider:before {
     place-content: center;
   }
   #overlay #popup {
+    -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+            box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
+    border-radius: 0.25em;
     width: 400px !important;
     position: relative;
   }
@@ -1526,7 +1577,7 @@ input:checked + .slider:before {
         <g>
             <path d="M18,4v12c0,1.1-0.9,2-2,2H1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h15C17.1,2,18,2.9,18,4z M16,10
                 c0-1.4-1.1-2.5-2.5-2.5S11,8.6,11,10s1.1,2.5,2.5,2.5S16,11.4,16,10z"/>
-            <path d="M16,2H1l13-2C15.1,0,16,0.9,16,2z"/>
+            <path d="M16,2H1l13-2C15.1,0,16,0.9,16,2z" style="fill: #9e0915"/>
             <circle cx="13.5" cy="10" r="1.5"/>
         </g>
         </svg>
@@ -1598,11 +1649,11 @@ input:checked + .slider:before {
                             <div id="add">
                                 <h4>Add new address to monitoring list</h4> 
                                 <div class="input">
-                                    <input  type="text" oninput="checkAddress(this)" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="floAddr" autocomplete="new-password"/>
+                                    <input aria-label="FLO address"  type="text" oninput="checkAddress(this)" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="floAddr" autocomplete="new-password"/>
                                         <label>FLO Address</label>
                                 </div>
                                 <div class="input">
-                                    <input  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="addrLabel"  autocomplete="new-password"/>
+                                    <input aria-label="Label"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="addrLabel"  autocomplete="new-password"/>
                                         <label>Label</label>
                                 </div>
                                 <button onclick="closeAdd()">Cancel</button>
@@ -1616,9 +1667,15 @@ input:checked + .slider:before {
                                     Flo address
                                 </div>
                                 <div class="input">
-                                    <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="newAddrLabel"/>
+                                    <input aria-label="Label" autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="newAddrLabel"/>
                                         <label>Label</label>
                                 </div>
+                                <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                        <title>Copy FLO address</title>
+                                        <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
+                                        C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
+                                        c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z"/>
+                                </svg>
                                 <button onclick="removedata()" id="removeAddr">Remove</button>
                                 <button onclick="closeEdit()">Cancel</button>
                                 <button id="editdata" onclick="editdata()">Save</button>
@@ -1671,22 +1728,22 @@ input:checked + .slider:before {
                                     <h5 style="opacity: 0.6;font-weight: normal;">To send FLO data, make sure you have enough balance.</h5>
                                 </div>
                                 <div class="input">
-                                        <input autocomplete="new-password" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" type="text" id="getBal_addr" oninput="checkBalAddress(this)"/>
+                                        <input aria-label="FLO address" autocomplete="new-password" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" type="text" id="getBal_addr" oninput="checkBalAddress(this)"/>
                                         <label>FLO address</label>
                                         <button id="getBal_btn" onclick="getBal()" disabled>Check balance</button>
                                 </div>
                         </div>
                         <div id="sdright">
                                 <div class="input">
-                                        <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="receiver"/>
+                                        <input aria-label="Receiver's address" autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="receiver"/>
                                         <label>Receiver's address</label>
                                 </div>
                                 <div class="input">
-                                        <input autocomplete="new-password"  type="number" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="amount"/>
+                                        <input aria-label="Amount" autocomplete="new-password"  type="number" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="amount"/>
                                         <label>Amount</label>
                                 </div>
                                 <div class="text-area">
-                                    <textarea data-gramm_editor="false" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" rows="8" id="flotextdata"></textarea>
+                                    <textarea aria-label="FLO data" data-gramm_editor="false" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" rows="8" id="flotextdata"></textarea>
                                     <label>FLO data</label>
                                 </div>
                                 <button id="sendBtn" onclick="sendMessage()" disabled>Send</button>
@@ -1721,7 +1778,7 @@ input:checked + .slider:before {
                               <span>Dark mode active : 6pm - 6am</span>
                             </span>
                             <label class="switch">
-                              <input autocomplete="new-password"  type="checkbox" id="auto-mode" type="checkbox" onclick="autoMode()"/>
+                              <input aria-label="Toggle automatic dark theme" autocomplete="new-password"  type="checkbox" id="auto-mode" type="checkbox" onclick="autoMode()"/>
                                 <span class="slider round"></span>
                             </label>
                           </div>
@@ -1730,14 +1787,14 @@ input:checked + .slider:before {
                               <span>Dark mode</span>
                             </span>
                             <label class="switch">
-                              <input autocomplete="new-password"  type="checkbox" id="manual-mode" type="checkbox" onclick="theme()"/>
+                              <input aria-label="Toggle manual dark theme" autocomplete="new-password"  type="checkbox" id="manual-mode" type="checkbox" onclick="theme()"/>
                               <span class="slider round"></span>
                             </label>
                           </div>
                         </section>
                         <section id="deleteDB">
                             <h4>Clear all local data</h4>
-                            <h5 style="opacity: 0.8;color: var(--accent-color);">This will delete all local Web Wallet data, please proceed cautiously! </h5>
+                            <h5>This will delete all local Web Wallet data like added addresses and locally stored transactions.After clearing local data you may experience slow loading of newly added address, please proceed cautiously! </h5>
                             <button class="primaryButton" onclick="deleteDB()">Clear data</button>
                         </section>
                         <section>
@@ -1783,7 +1840,7 @@ input:checked + .slider:before {
             <h4>Recover FLO address</h4>
             <h5>Please enter your private key.</h5>
             <div class="input">
-                <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="pop" oninput="checkPrivateKey(this)"/>
+                <input aria-label="Private key" autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="pop" oninput="checkPrivateKey(this)"/>
                 <label>Private key</label>
             </div> 
             <button onclick="fadeout()">Cancel</button>
@@ -1871,7 +1928,8 @@ input:checked + .slider:before {
         document.getElementById('showRecoveryModal').onclick = function(){
             document.getElementById('overlay').classList.add('show');
             document.getElementById('popup').classList.add('slide-up');
-            document.getElementById('pop').focus();  
+            if(window.innerWidth > 768)
+                document.getElementById('pop').focus();  
             let y =document.addEventListener("click", function(event) {
                 if (event.target.closest('#popup') || event.target.closest('#showRecoveryModal')) return;
                 fadeout();
@@ -1937,11 +1995,15 @@ input:checked + .slider:before {
                         monitorData(address, label);
                 showInnerPage('dispMsg');
                 lastClickedAddress = address;
+                setTimeout(() => {
+                    lastClickedAddress = ''
+                }, 30000);
             }
         function showAdd(){
             document.getElementById('add-container').classList.add('show');
             document.getElementById('add').classList.add('slide-up');
-            floAddr.focus();
+            if(window.innerWidth > 768)
+                floAddr.focus();
         }
         function closeAdd(){
             document.getElementById('add-container').classList.remove('show');
@@ -2108,7 +2170,7 @@ input:checked + .slider:before {
             card.innerHTML= `<div>
                                 <h5>New FLO Address</h5>
                                 <h4>${x.floID}</h4>
-                            <svg onclick='copyToClipboard(this.parentNode)' viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                            <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
                                 <title>Copy FLO address</title>
                                 <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
                                 C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
@@ -2117,7 +2179,7 @@ input:checked + .slider:before {
                             </div>
                             <div><h5>Private Key</h5>
                                 <h4>${x.privKey}</h4>
-                                <svg onclick='copyToClipboard(this.parentNode)' viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
                                     <title>Copy private key</title>
                                     <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
                                     C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
@@ -2150,7 +2212,7 @@ input:checked + .slider:before {
                         card.innerHTML=`<div>
                                             <h5>Recovered FLO Address</h5>
                                             <h4>${recoverAddr.floID}</h4>
-                                            <svg onclick='copyToClipboard(this.parentNode)' viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                            <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
                                                 <title>Copy FLO address</title>
                                                 <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
                                                 C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
@@ -2160,7 +2222,7 @@ input:checked + .slider:before {
                                         <div>
                                             <h5>Private Key</h5>
                                             <h4>${recoverAddr.privKey}</h4>
-                                            <svg onclick='copyToClipboard(this.parentNode)' viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
+                                            <svg onclick="copyToClipboard(this.parentNode, '1')" viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
                                             <title>Copy private key</title>
                                             <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
                                                 C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
@@ -2177,18 +2239,19 @@ input:checked + .slider:before {
         function monitorData(address, label){
             let dispMsg = document.getElementById("dispMsg"),
                 dbLabels = floWebWallet.getLabels(),
-                tCont = document.getElementById('transactions-container'); 
-                tCont.innerHTML= `<loading>
-                                        <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-                                        <g>
-                                            <path id='p1' d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
-                                                S11.3,14,8,14z"/>
-                                            <path id='p2' d="M6.5,13.8c-2.2-0.5-3.9-2.3-4.4-4.5c-0.7-3.6,1.7-6.8,5-7.2C7.6,2,8,1.6,8,1.1v0c0-0.6-0.5-1.1-1.1-1
-                                                C2.5,0.7-0.8,4.9,0.2,9.6c0.6,3.1,2.9,5.5,6,6.2c4.8,1.1,9.1-2.2,9.8-6.7C16,8.5,15.5,8,14.9,8h0c-0.5,0-0.9,0.4-1,0.9
-                                                C13.5,12.2,10.2,14.7,6.5,13.8z"/>
-                                        </g>
-                                        </svg>
-                                    </loading>`; 
+                tCont = document.getElementById('transactions-container'),
+                frag = document.createDocumentFragment(); 
+            tCont.innerHTML= `<loading>
+                                    <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+                                    <g>
+                                        <path id='p1' d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
+                                            S11.3,14,8,14z"/>
+                                        <path id='p2' d="M6.5,13.8c-2.2-0.5-3.9-2.3-4.4-4.5c-0.7-3.6,1.7-6.8,5-7.2C7.6,2,8,1.6,8,1.1v0c0-0.6-0.5-1.1-1.1-1
+                                            C2.5,0.7-0.8,4.9,0.2,9.6c0.6,3.1,2.9,5.5,6,6.2c4.8,1.1,9.1-2.2,9.8-6.7C16,8.5,15.5,8,14.9,8h0c-0.5,0-0.9,0.4-1,0.9
+                                            C13.5,12.2,10.2,14.7,6.5,13.8z"/>
+                                    </g>
+                                    </svg>
+                                </loading>`; 
             document.querySelector('loading').children[0].classList.add('spin');
             document.getElementById('addressLabel').textContent = label;
             document.getElementById('fullAddress').textContent = address;                             
@@ -2201,12 +2264,12 @@ input:checked + .slider:before {
                     tCont.innerHTML = '';
                     receivedData.forEach(tx => {
                     let date = new Date(tx.time*1000).toLocaleDateString(),
-                        time = new Date(tx.time*1000).toLocaleTimeString();
-                    var tCard = document.createElement('transaction-card');
+                        time = new Date(tx.time*1000).toLocaleTimeString(),
+                        tCard = document.createElement('transaction-card');
                     if(tx.sender === address){
                         tCard.innerHTML=`<div>
                                             <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-                                            <path class="st0" d="M14.7,0H3.9C3.2,0,2.6,0.6,2.6,1.3s0.6,1.3,1.3,1.3h7.5l-11,11c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.5,1.9,0
+                                            <path d="M14.7,0H3.9C3.2,0,2.6,0.6,2.6,1.3s0.6,1.3,1.3,1.3h7.5l-11,11c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.5,1.9,0
                                                 l11-11v7.5c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3V1.3C16,0.6,15.4,0,14.7,0z"/>
                                             </svg>
                                             ${tx.receiver}</div><div> ${tx.floData}</div><div>${time} ${date}</div>`;
@@ -2214,13 +2277,14 @@ input:checked + .slider:before {
                     else{
                         tCard.innerHTML=`<div>
                                         <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-                                            <path class="st0" d="M16,14.7V3.9c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3v7.5l-11-11c-0.5-0.5-1.4-0.5-1.9,0
+                                            <path d="M16,14.7V3.9c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3v7.5l-11-11c-0.5-0.5-1.4-0.5-1.9,0
                                             c-0.5,0.5-0.5,1.4,0,1.9l11,11H3.9c-0.7,0-1.3,0.6-1.3,1.3S3.2,16,3.9,16h10.7C15.4,16,16,15.4,16,14.7z"/>
                                         </svg>
                                         ${tx.sender}</div><div> ${tx.floData}</div><div>  ${time} ${date}</div>`;
                     }
-                    tCont.insertBefore(tCard,tCont.firstChild);
+                    frag.insertBefore(tCard,frag.firstChild);
                     })
+                    tCont.appendChild(frag)
                 }
             })
         }
@@ -2230,28 +2294,23 @@ input:checked + .slider:before {
         }
 
         function createAddressCards(address, label){
-                    let parentConatainer = document.getElementById('monitor-list'),
-                        monitorCard = document.createElement('monitor');
-                        if(parentConatainer.innerHTML === `<h3 style="text-align: center;width: 100%;">Add a FLO address to start monitoring</h3>`)
-                            parentConatainer.innerHTML = '';
-                            monitorCard.innerHTML= `<div>${label}</div>
-                                                <div>${address}</div>
-                                                <div onclick="clickedAddress(this.parentNode)"></div>
-                                                <svg class='edit-options' onclick="showEdit(this.parentNode)" viewBox="0 0 4 16" style="enable-background:new 0 0 4 16;" xml:space="preserve">
-                                                    <title>Edit address card</title>
-                                                    <g>
-                                                        <circle cx="2" cy="2" r="2"/>
-                                                        <circle cx="2" cy="14" r="2"/>
-                                                        <circle cx="2" cy="8" r="2"/>
-                                                    </g>
-                                                </svg>
-                                                <svg onclick='copyToClipboard(this.parentNode)' viewBox="0 0 13 16" style="enable-background:new 0 0 13 16;" xml:space="preserve">
-                                                    <title>Copy FLO address</title>
-                                                    <path d="M12,0H4C3.4,0,3,0.4,3,1v3H1C0.4,4,0,4.4,0,5v10c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1v-3h2c0.6,0,1-0.4,1-1V1
-                                                    C13,0.4,12.6,0,12,0z M8,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V13z M11,9c0,0.6-0.4,1-1,1V5
-                                                    c0-0.6-0.4-1-1-1H5V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1V9z"/>
-                                                </svg>`;
-                            parentConatainer.appendChild(monitorCard);
+            let parentConatainer = document.getElementById('monitor-list');
+            if(parentConatainer.innerHTML === `<h3 style="text-align: center;width: 100%;">Add a FLO address to start monitoring</h3>`)
+                parentConatainer.innerHTML = '';
+            let monitorCard = document.createElement('monitor');
+            monitorCard.id = address;
+            monitorCard.innerHTML= `<div>${label}</div>
+                                    <div>${address}</div>
+                                    <div onclick="clickedAddress(this.parentNode)"></div>
+                                    <svg class='edit-options' onclick="showEdit(this.parentNode)" viewBox="0 0 4 16" style="enable-background:new 0 0 4 16;" xml:space="preserve">
+                                        <title>Edit address card</title>
+                                        <g>
+                                            <circle cx="2" cy="2" r="2"/>
+                                            <circle cx="2" cy="14" r="2"/>
+                                            <circle cx="2" cy="8" r="2"/>
+                                        </g>
+                                    </svg>`;
+            parentConatainer.appendChild(monitorCard);
         }
 
         function showEdit(parent){
@@ -2302,7 +2361,18 @@ input:checked + .slider:before {
                 else
                     Object.keys(labelAddr).forEach((address) => {
                         createAddressCards(address, labelAddr[address]);   
-                        floWebWallet.syncTransactions(address)                                         
+                        floWebWallet.syncTransactions(address).then((array) => {
+                            if(array.length > 0){
+                                let badge = document.createElement('badge'),
+                                    notifications = array.length
+                                if(notifications > 99)
+                                    notifications = '99+'
+                                badge.textContent = notifications
+                                document.getElementById(address).appendChild(badge)
+                            }
+                        }).catch((error) => {
+                            console.log(error)
+                        })                                 
                     })
             }).catch((error) => {
                 console.log(error);
@@ -2332,13 +2402,13 @@ input:checked + .slider:before {
             })
         }
 
-        function copyToClipboard(parent) {
+        function copyToClipboard(parent, childIndex) {
             let input = document.createElement('textarea'),
                 toast = document.getElementById('textCopied');
             input.setAttribute('readonly', '');
             input.setAttribute('style', 'position: absolute; left: -9999px');
             document.body.appendChild(input);
-            input.value = parent.children[1].textContent;
+            input.value = parent.children[childIndex].textContent;
             input.select();
             document.execCommand('copy');
             document.body.removeChild(input);