RanchiMall/flowallet-testnet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update FLO_webWallet_mainnet.html

Browse Source
This commit is contained in:
sairaj mote 2019-10-22 00:17:12 +05:30 committed by GitHub
parent aabfbd997c
commit 708e0ce4b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
FLO_webWallet_mainnet.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="UTF-8"> <meta charset="UTF-8">
<style> <style>
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
:root { :root {
--sidenav-color: #f0f0f0; --sidenav-color: #f0f0f0;
--accent-color: #D40E1E; --accent-color: #D40E1E;
@ -301,6 +301,12 @@ button:focus, input:focus, textarea:focus {
margin: 0 1em !important; margin: 0 1em !important;
} }
#overlay #popup h4 {
padding: 1em;
margin: 0;
opacity: 0.8;
}
.spacer { .spacer {
display: flexbox; display: flexbox;
-webkit-box-flex: 1 !important; -webkit-box-flex: 1 !important;
@ -893,15 +899,21 @@ loading svg .st1 {
fill: var(--bw); fill: var(--bw);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: auto;
right: 0; right: 0;
height: 2em; height: 2em;
width: 2em; width: 2em;
padding: 0.6em; padding: 0.5em;
margin: 0.5em; margin: 0.5em;
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
transition: all 0.2s ease; transition: all 0.2s ease;
overflow: visible; overflow: visible;
z-index: 2; z-index: 2;
border-radius: 2em;
}
#monitor-list monitor svg:hover {
background: var(--sec-color);
} }
.title-bar { .title-bar {
@ -1234,10 +1246,15 @@ input:checked + .slider:before {
display: flexbox; display: flexbox;
margin: 1em; margin: 1em;
} }
#monitor-list monitor div:first-of-type {
height: 4em;
}
#monitor-list monitor div:nth-of-type(2) { #monitor-list monitor div:nth-of-type(2) {
word-break: break-all; word-break: break-all;
} }
#monitor-list monitor svg { #monitor-list monitor svg {
top: auto;
bottom: 0;
opacity: 0; opacity: 0;
} }
#monitor-list monitor svg:hover { #monitor-list monitor svg:hover {
@ -1558,7 +1575,7 @@ input:checked + .slider:before {
<div id="add"> <div id="add">
<h4>Add new address to monitoring list</h4> <h4>Add new address to monitoring list</h4>
<div class="input"> <div class="input">
<input type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="floAddr" autocomplete="new-password"/> <input type="text" oninput="checkAddress(this)" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="floAddr" autocomplete="new-password"/>
<label>FLO Address</label> <label>FLO Address</label>
<div></div> <div></div>
</div> </div>
@ -1568,7 +1585,7 @@ input:checked + .slider:before {
<div></div> <div></div>
</div> </div>
<button onclick="closeAdd()">Cancel</button> <button onclick="closeAdd()">Cancel</button>
<button id="addAddressToMonitor" onclick="addAddressToMonitoringList()">Add</button> <button id="addAddressToMonitor" onclick="addAddressToMonitoringList()" disabled>Add</button>
</div> </div>
</div> </div>
<div id="edit-container" class="hide"> <div id="edit-container" class="hide">
@ -1677,6 +1694,7 @@ input:checked + .slider:before {
</div> </div>
<div id="overlay"> <div id="overlay">
<div id="popup"> <div id="popup">
<h4>Recover FLO address</h4>
<div class="input"> <div class="input">
<input autocomplete="new-password" type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="pop"/> <input autocomplete="new-password" type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="pop"/>
<label>Private key</label> <label>Private key</label>
@ -1787,8 +1805,12 @@ input:checked + .slider:before {
addrLabel.addEventListener('keypress',function(event){ addrLabel.addEventListener('keypress',function(event){
if(event.keyCode==13) if(event.keyCode==13)
addAddressToMonitoringList(); document.getElementById('addAddressToMonitor').click();
}); });
floAddr.addEventListener('keypress',function(event){
if(event.keyCode==13)
document.getElementById('addAddressToMonitor').click();
});
function closeSidePanel(){ function closeSidePanel(){
if(window.innerWidth > 768) if(window.innerWidth > 768)
{ {
@ -1835,6 +1857,7 @@ input:checked + .slider:before {
document.getElementById('add').classList.remove('slide-up'); document.getElementById('add').classList.remove('slide-up');
floAddr.value=''; floAddr.value='';
addrLabel.value=''; addrLabel.value='';
document.getElementById('addAddressToMonitor').disabled = true;
} }
document.getElementById('addNewAddress').onclick = function(){ document.getElementById('addNewAddress').onclick = function(){
showAdd(); showAdd();
@ -1847,16 +1870,21 @@ input:checked + .slider:before {
function checkAddress(thisInput){ function checkAddress(thisInput){
let x = document.getElementById('addAddressToMonitor'); let x = document.getElementById('addAddressToMonitor');
if (floCrypto.validateAddr(thisInput.value)) if (floCrypto.validateAddr(thisInput.value))
x.disabled ='false'; x.disabled = false;
else else{
x.disabled ='true'; x.disabled = true;
}
} }
function addAddressToMonitoringList(){ function addAddressToMonitoringList(){
compactIDB.addData('labels', addrLabel.value, floAddr.value).then((resolve) => { let label = addrLabel.value;
createAddressCards(floAddr.value, addrLabel.value); if(label == '')
label = 'Unknown'
compactIDB.addData('labels', label, floAddr.value).then((resolve) => {
createAddressCards(floAddr.value, label);
floWebWallet.syncTransactions(floAddr.value); floWebWallet.syncTransactions(floAddr.value);
closeAdd(); closeAdd();
}).catch((error) => { }).catch((error) => {
alert('you are already monitoring this address');
console.log(error); console.log(error);
}) })
} }
@ -1999,16 +2027,16 @@ input:checked + .slider:before {
}); });
function RecoverAddr(){ function RecoverAddr(){
let x= document.getElementById('popup').children[0], let x= document.getElementById('popup').children[1],
wif = document.getElementById('pop').value; wif = document.getElementById('pop').value;
if(wif === ''){ if(wif === ''){
x.classList.add('jitter'); x.classList.add('jitter');
x.addEventListener('animationEnd', function(){ x.addEventListener('animationEnd', function(){
x.classList.remove('jitter'); x.classList.remove('jitter');
}); });
x.addEventListener('webkitAnimationEnd', function(){ x.addEventListener('webkitAnimationEnd', function(){
x.classList.remove('jitter'); x.classList.remove('jitter');
}); });
return; return;
} }
floWebWallet.recoverAddr(wif).then((recoverAddr) => { floWebWallet.recoverAddr(wif).then((recoverAddr) => {
@ -2018,6 +2046,13 @@ input:checked + .slider:before {
par.insertBefore(card, par.firstChild); par.insertBefore(card, par.firstChild);
fadeout(); fadeout();
}).catch((error) => { }).catch((error) => {
x.classList.add('jitter');
x.addEventListener('animationEnd', function(){
x.classList.remove('jitter');
});
x.addEventListener('webkitAnimationEnd', function(){
x.classList.remove('jitter');
});
console.log(error); console.log(error);
}) })
} }
@ -2039,27 +2074,9 @@ input:checked + .slider:before {
let time = new Date(tx.time*1000).toLocaleTimeString(); let time = new Date(tx.time*1000).toLocaleTimeString();
var tCard = document.createElement('transaction-card'); var tCard = document.createElement('transaction-card');
if(tx.sender === address){ if(tx.sender === address){
dbLabels.then((labelAddr) => {
Object.keys(labelAddr).forEach((dbAddress) => {
if(tx.receiver === dbAddress)
tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(3716.586 13.021) rotate(-90)"/></svg>${labelAddr[dbAddress]}</div><div> ${tx.floData}</div><div> ${time} ${date}</div>`;
return;
})
}).catch((error) => {
console.log(error);
})
tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(3716.586 13.021) rotate(-90)"/></svg>${tx.receiver}</div><div> ${tx.floData}</div><div> ${time} ${date}</div>`; tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(3716.586 13.021) rotate(-90)"/></svg>${tx.receiver}</div><div> ${tx.floData}</div><div> ${time} ${date}</div>`;
} }
else{ else{
dbLabels.then((labelAddr) => {
Object.keys(labelAddr).forEach((dbAddress) => {
if(tx.sender === dbAddress)
tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(-0.414 3716.586)"/></svg>${labelAddr[dbAddress]}</div><div> ${tx.floData}</div><div> ${time} ${date}</div>`;
return;
})
}).catch((error) => {
console.log(error);
})
tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(-0.414 3716.586)"/></svg>${tx.sender}</div><div> ${tx.floData}</div><div> ${time} ${date}</div>`; tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(-0.414 3716.586)"/></svg>${tx.sender}</div><div> ${tx.floData}</div><div> ${time} ${date}</div>`;
} }
tCont.insertBefore(tCard,tCont.firstChild); tCont.insertBefore(tCard,tCont.firstChild);
@ -2074,8 +2091,6 @@ input:checked + .slider:before {
function createAddressCards(address, label){ function createAddressCards(address, label){
let parentConatainer = document.getElementById('monitor-list'), let parentConatainer = document.getElementById('monitor-list'),
monitorCard = document.createElement('monitor'); monitorCard = document.createElement('monitor');
if(label == '')
label = 'Unknown'
monitorCard.innerHTML= `<div>${label}</div> monitorCard.innerHTML= `<div>${label}</div>
<div>${address}</div> <div>${address}</div>
<div onclick="clickedAddress(this.parentNode)"></div> <div onclick="clickedAddress(this.parentNode)"></div>
@ -2136,6 +2151,9 @@ input:checked + .slider:before {
function createAllCards(){ function createAllCards(){
floWebWallet.getLabels().then((labelAddr) => { floWebWallet.getLabels().then((labelAddr) => {
if(Object.entries(labelAddr).length === 0)
document.getElementById('monitor-list').innerHTML=`<h3 style="text-align: center;width: 100%;">Add a FLO address to start monitoring</h3>`;
else
Object.keys(labelAddr).forEach((address) => { Object.keys(labelAddr).forEach((address) => {
createAddressCards(address, labelAddr[address]); createAddressCards(address, labelAddr[address]);
}) })