Update FLO_webWallet_mainnet.html
This commit is contained in:
sairaj mote
GitHub
parent
536afb593e
commit
5280073eb4
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user