RanchiMall/flowallet
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-26 00:00:28 +05:30 committed by GitHub
parent c30402a102
commit 2dc2fa7cdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 68 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
FLO_webWallet_mainnet.html
View File

@ -78,7 +78,7 @@ button {
button:hover { button:hover {
background-color: var(--opac-accent-color); background-color: var(--opac-accent-color);
border: 1px var(--accent-color) solid; border: 1px transparent solid;
} }
.primaryButton { .primaryButton {
@ -91,26 +91,10 @@ button:hover {
opacity: 0.8; opacity: 0.8;
} }
input:disabled,
input[disabled] {
cursor: not-allowed;
}
input:disabled:hover,
input[disabled]:hover {
background: transparent;
}
button:disabled, button:disabled,
button[disabled] { button[disabled] {
cursor: not-allowed;
color: var(--sec-color); color: var(--sec-color);
} pointer-events: none;
button:disabled:hover,
button[disabled]:hover {
background: transparent;
border: 1px solid var(--sec-color);
} }
button:focus, input:focus, textarea:focus { button:focus, input:focus, textarea:focus {
@ -364,6 +348,25 @@ textarea, input {
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
} }
#sendData .sdleft #loadBalance {
opacity: 0;
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 2em;
padding: 0.3em;
margin: 2em 1em;
}
#sendData .sdleft #loadBalance #p1 {
fill: none;
}
#sendData .sdleft #loadBalance #p2 {
fill: var(--accent-color);
}
#sendData #sdright { #sendData #sdright {
opacity: 0.6; opacity: 0.6;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
@ -380,6 +383,7 @@ textarea, input {
} }
#sendData #dispBal { #sendData #dispBal {
position: relative;
width: 100%; width: 100%;
border: 1px solid var(--sec-color); border: 1px solid var(--sec-color);
padding: 1em 2em; padding: 1em 2em;
@ -545,7 +549,7 @@ textarea, input {
padding: 0.6em; padding: 0.6em;
height: 2.5em; height: 2.5em;
width: 2.5em; width: 2.5em;
margin: 1em; margin: 0.8em;
fill: var(--bw); fill: var(--bw);
opacity: 0.5; opacity: 0.5;
border-radius: 2em; border-radius: 2em;
@ -703,29 +707,27 @@ input[type=number] {
} }
loading { loading {
pointer-events: none;
position: absolute; position: absolute;
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
top: 0; height: calc(100% - 1.6em);
bottom: 0; width: calc(100% - 1.1em);
left: 0;
right: 0;
place-items: center; place-items: center;
z-index: 10; z-index: 10;
} }
loading svg { loading svg {
position: relative; position: relative;
height: 4em; height: 2.5em;
width: 4em; width: 2.5em;
-webkit-animation: spin 1s infinite ease;
animation: spin 1s infinite ease;
fill: var(--accent-color);
} }
loading svg .st1 { loading #p1 {
opacity: 0.4; fill: none;
}
loading #p2 {
fill: var(--accent-color);
} }
#addNewAddress { #addNewAddress {
@ -806,7 +808,7 @@ loading svg .st1 {
} }
#edit-container #edit div:first-of-type { #edit-container #edit div:first-of-type {
overflow-wrap: break-word; word-break: break-all;
opacity: 0.6; opacity: 0.6;
margin: 1em 0; margin: 1em 0;
} }
@ -1058,6 +1060,11 @@ input:checked + .slider:before {
padding: 0 1em; padding: 0 1em;
} }
.spin {
-webkit-animation: spin 1s infinite ease;
animation: spin 1s infinite ease;
}
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -1620,6 +1627,15 @@ input:checked + .slider:before {
<div id="sendData" class="page hide"> <div id="sendData" class="page hide">
<div class="sdleft"> <div class="sdleft">
<div id="dispBal"> <div id="dispBal">
<svg id="loadBalance" 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>
<h5>Available balance</h5> <h5>Available balance</h5>
<span id="dispBalInt">0</span> <span id="dispBalInt">0</span>
<span id="dispBalFloat"></span> <span id="dispBalFloat"></span>
@ -1649,8 +1665,8 @@ input:checked + .slider:before {
</div> </div>
<div id="addrGen" class="page hide"> <div id="addrGen" class="page hide">
<button id="GenNewAddrBtn" class="primaryButton">Generate New Address</button> <button id="GenNewAddrBtn" class="primaryButton">Generate new address</button>
<button id="showRecoveryModal">Recover FLO Address</button><br/><br/> <button id="showRecoveryModal">Recover FLO address</button><br/><br/>
<div id="addrDisp"> <div id="addrDisp">
</div> </div>
</div> </div>
@ -1738,7 +1754,7 @@ input:checked + .slider:before {
floAddr = document.getElementById('floAddr'), floAddr = document.getElementById('floAddr'),
addrLabel = document.getElementById('addrLabel'), addrLabel = document.getElementById('addrLabel'),
newAddrLabel = document.getElementById('newAddrLabel'), newAddrLabel = document.getElementById('newAddrLabel'),
recentPage = 'sendDataBtn', recentPage = 'getDataBtn',
mode, mode,
activeAddress; activeAddress;
const html = document.querySelector('html'); const html = document.querySelector('html');
@ -2016,7 +2032,9 @@ input:checked + .slider:before {
} }
function getBal(){ function getBal(){
let x= document.getElementById("getBal_addr"); let x= document.getElementById("getBal_addr"),
loading = document.getElementById('loadBalance');
loading.classList.add('show', 'spin');
floBlockchainAPI.getBalance(x.value).then((retrievedBal) => { floBlockchainAPI.getBalance(x.value).then((retrievedBal) => {
let parts = retrievedBal.split("."), let parts = retrievedBal.split("."),
floatPart = parts.pop(), floatPart = parts.pop(),
@ -2030,8 +2048,10 @@ input:checked + .slider:before {
document.getElementById('sdright').setAttribute('style', 'pointer-events: all; opacity: 1') document.getElementById('sdright').setAttribute('style', 'pointer-events: all; opacity: 1')
document.getElementById('sendBtn').disabled = false; document.getElementById('sendBtn').disabled = false;
} }
loading.classList.remove('show', 'spin');
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error);
loading.classList.remove('show', 'spin');
}) })
} }
@ -2114,12 +2134,17 @@ input:checked + .slider:before {
dbLabels = floWebWallet.getLabels(), dbLabels = floWebWallet.getLabels(),
tCont = document.getElementById('transactions-container'); tCont = document.getElementById('transactions-container');
tCont.innerHTML= `<loading> tCont.innerHTML= `<loading>
<svg x="0px" y="0px" width="56.7px" <svg viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
height="56.7px" viewBox="0 0 56.7 56.7" style="enable-background:new 0 0 56.7 56.7;" xml:space="preserve"> <g>
<path class="st0" d="M28.3,5.7c6.3,0,11.9,2.5,16,6.6l4-4C43.3,3.2,36.2,0,28.3,0s-14.9,3.2-20,8.3l4,4C16.4,8.2,22.1,5.7,28.3,5.7z"/> <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
<path class="st1" d="M48.4,8.3l-4,4c4.1,4.1,6.6,9.8,6.6,16C51,40.9,40.9,51,28.3,51C15.8,51,5.7,40.9,5.7,28.3c0-6.3,2.5-11.9,6.6-16l-4-4C3.2,13.4,0,20.5,0,28.3C0,44,12.7,56.7,28.3,56.7C44,56.7,56.7,44,56.7,28.3C56.7,20.5,53.5,13.4,48.4,8.3z"/> S11.3,14,8,14z"/>
</svg> <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
</loading>`; 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('addressLabel').textContent = label;
document.getElementById('fullAddress').textContent = address; document.getElementById('fullAddress').textContent = address;
floWebWallet.syncTransactions(address); floWebWallet.syncTransactions(address);
@ -2128,6 +2153,7 @@ input:checked + .slider:before {
tCont.innerHTML = `<div style='display:flex; align-content: center;width: 100%;height:100%'><h3 style='display:flexbox;align-self:center;text-align: center;width:100%'>There are no transactions to show.</h3></div>`; tCont.innerHTML = `<div style='display:flex; align-content: center;width: 100%;height:100%'><h3 style='display:flexbox;align-self:center;text-align: center;width:100%'>There are no transactions to show.</h3></div>`;
} }
else{ else{
document.querySelector('loading').children[0].classList.remove('spin');
tCont.innerHTML = ''; tCont.innerHTML = '';
receivedData.forEach(tx => { receivedData.forEach(tx => {
let date = new Date(tx.time*1000).toLocaleDateString(), let date = new Date(tx.time*1000).toLocaleDateString(),