0..0.48

components.js

@@ -165,6 +165,10 @@ input[type=number]::-webkit-outer-spin-button {
     appearance: none;
     margin: 0; 
 }
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
 input:invalid{
     outline: none;
     box-shadow: none;

css/main.css

@@ -241,9 +241,12 @@ sm-button[variant=outlined] {
   padding: 0;
   background: none;
 }
-.action[disabled] .primary-btn {
+.action:disabled .primary-btn {
   background: none;
 }
+.action:focus {
+  outline: none;
+}
 .action h4 {
   padding: 0.5rem 1.2rem;
   font-size: 0.9rem;
@@ -639,7 +642,7 @@ details p {
   justify-content: flex-end;
 }
 .balance h4 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-family: "Roboto", sans-serif;
   font-weight: 500;
   text-shadow: 1px 0.1rem 0.2rem #00000040;

css/main.scss

@@ -114,7 +114,6 @@ button {
 ::-moz-focus-inner {
     border: none;
 }
-
 .bottom-padding {
     padding-bottom: 1.5rem;
 }
@@ -241,12 +240,14 @@ sm-button[variant="outlined"]{
     justify-content: center;
     padding: 0;
     background: none;
-    &[disabled] {
+    &:disabled{
         .primary-btn {
             background: none;
         }
     }
-
+    &:focus{
+        outline: none;
+    }
     h4 {
         padding: 0.5rem 1.2rem;
         font-size: 0.9rem;
@@ -660,7 +661,7 @@ details{
     padding: 1rem;
     justify-content: flex-end;
     h4{
-        font-size: 2.5rem;
+        font-size: 2rem;
         font-family: 'Roboto', sans-serif;
         font-weight: 500;
         text-shadow: 1px 0.1rem 0.2rem #00000040;

index.html

@@ -48,7 +48,7 @@
         </div>
         <h4 class="expand light-text">Welcome to RanchiMall Pay.<br>Please enter your FLO private key to
             continue.</h4>
-        <sm-input id="get_priv_key_field" placeholder="Private Key" type="password" required animate></sm-input>
+        <sm-input id="get_priv_key_field" privateKey placeholder="Private Key" type="password" required animate></sm-input>
         <button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
             Sign In
         </button>
@@ -383,12 +383,16 @@
         </header>
         <div class="flex direction-column align-center">
             <h3 id="person_initials"></h3>
+            <h4 class="capitalize" id="show_person_name"></h4>
             <div class="flex space-between align-center">
-                <h4 class="capitalize" id="show_person_name"></h4>
+                <svg tooltip="Edit" id="edit_person_name" class="icon" onclick="setNameEditable()" viewBox="0 0 64 64">
-                <svg id="edit_person_name" class="icon" onclick="setNameEditable()" viewBox="0 0 64 64">
-                    <title>edit</title>
                     <path d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9"/>
                 </svg>
+                <svg id="delete_person" onclick="deletePerson()" class="icon" viewBox="0 0 64 64" title="Remove">
+                    <path d="M47.15,63.5H16.85a3.56,3.56,0,0,1-3.3-3.58L11.27,20a2.06,2.06,0,0,1,2.05-2.18H50.68a2.06,2.06,0,0,1,2,2.18l-2.28,40A3.56,3.56,0,0,1,47.15,63.5Z"/>
+                    <path d="M54.67,6.08a1.25,1.25,0,0,1,1.25,1.25v3.51a1.24,1.24,0,0,1-1.25,1.24H9.33a1.24,1.24,0,0,1-1.25-1.24V7.33A1.25,1.25,0,0,1,9.33,6.08H54.67m0-1H9.33A2.25,2.25,0,0,0,7.08,7.33v3.51a2.24,2.24,0,0,0,2.25,2.24H54.67a2.24,2.24,0,0,0,2.25-2.24V7.33a2.25,2.25,0,0,0-2.25-2.25Z"/>
+                    <path d="M30.48.5h3a3,3,0,0,1,3,3v2a0,0,0,0,1,0,0h-9a0,0,0,0,1,0,0v-2A3,3,0,0,1,30.48.5Z"/>
+                </svg>
             </div>
         </div>
         <h5>FLO ID</h5>
@@ -604,7 +608,7 @@
                     <div class="balance flo-balance-card">
                         <div class="tooltip help"> 
                             <div class="tt-icon">?</div>
-                            <p class="tooltip-text">FLO balance required for each transaction.</p>
+                            <p class="tooltip-text">Your FLO balance. This is required for every transaction.</p>
                         </div>
                         <h5>FLO</h5>
                         <h4 class="flo-balance">0</h4>
@@ -805,10 +809,18 @@
                 </div>
                 <div class="display-balance grid">
                     <div class="balance rupee-balance-card">
+                        <div class="tooltip help">
+                            <div class="tt-icon">?</div>
+                            <p class="tooltip-text">Your wallet balance</p>
+                        </div>
                         <h5>Rupee</h5>
-                        <h4 class="token-balance">0</h3>
+                        <h4 class="token-balance">0</h4>
                     </div>
                     <div class="balance flo-balance-card">
+                        <div class="tooltip help"> 
+                            <div class="tt-icon">?</div>
+                            <p class="tooltip-text">Your FLO balance. This is required for every transaction.</p>
+                        </div>
                         <h5>FLO</h5>
                         <h4 class="flo-balance">0</h4>
                     </div>
@@ -1523,6 +1535,9 @@
                 break;
             }   
         })
+
+        let personPopupOpen = false;
+
         document.addEventListener('popupclosed', e => {
             popupStack = e.detail.popupStack    
             let thisPopup = e.detail.popup,
@@ -1737,6 +1752,9 @@
                     if(input.hasAttribute('floId')){
                         if(floCrypto.validateAddr(input.value.trim())) return true
                     }
+                    else if(input.hasAttribute('privateKey')){
+                        if(floCrypto.getPubKeyHex(input.value.trim())) return true
+                    }
                     else
                         return input.isValid
                 })
@@ -2211,7 +2229,7 @@
 
         async function changePersonName(){
             let contact = await compactIDB.readData('contacts', person.dataset.floId)
-            contact.name = showPersonName.textContent
+            contact.name = showPersonName.textContent.trim()
             if(showPersonName.textContent === '')
                 contact.name = 'Unknown'
             compactIDB.writeData('contacts', contact, person.dataset.floId)
@@ -2225,6 +2243,20 @@
             })
         }
 
+        async function deletePerson(){
+            if(await confirmation('Do you want to remove this person ?', 'No', 'Remove')){
+                compactIDB.removeData('contacts', person.dataset.floId)
+                .then(success => {
+                    notify('Deleted person', 'success')
+                    hidePopup()
+                    renderAllContacts()
+                })
+                .catch(error => {
+                    notify(error, 'error')
+                })
+            }
+        }
+
         function signIn() {
             return new Promise((resolve, reject) => {
                 hideLoader()