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

Added option to check FLO and token balances

Browse Source
This commit is contained in:
sairaj mote 2023-04-10 18:51:26 +05:30
parent c1d9a4e730
commit 851c3453ec
4 changed files with 93 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/main.css
View File

@ -686,6 +686,11 @@ h3 {
padding: 0.5rem 1.5rem 4rem 1.5rem;
}
#primary_actions_wrapper {
display: grid;
gap: 0.5rem;
}
.primary-action {
display: flex;
padding: 0.8rem 1rem;
@ -695,13 +700,11 @@ h3 {
border-radius: 0.5rem;
background-color: transparent;
border: thin solid rgba(var(--text-color), 0.3);
text-align: left;
}
.primary-action .icon {
fill: var(--accent-color);
}
.primary-action:not(:last-of-type) {
margin-right: 0.5rem;
}
#saved_ids_list {
position: relative;
@ -980,6 +983,9 @@ h3 {
left: 0;
right: 0;
}
#primary_actions_wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 40rem) {
body {
@ -1036,6 +1042,10 @@ h3 {
border-radius: 0 1rem 1rem 0;
bottom: auto;
}
#primary_actions_wrapper {
display: flex;
flex-wrap: wrap;
}
#create_flo_id_popup,
#retrieve_flo_id_popup {
--width: 26rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
css/main.scss
View File

@ -655,6 +655,10 @@ h3 {
padding: 0.5rem 1.5rem 4rem 1.5rem;
}
}
#primary_actions_wrapper {
display: grid;
gap: 0.5rem;
}
.primary-action {
display: flex;
padding: 0.8rem 1rem;
@ -664,12 +668,10 @@ h3 {
border-radius: 0.5rem;
background-color: transparent;
border: thin solid rgba(var(--text-color), 0.3);
text-align: left;
.icon {
fill: var(--accent-color);
}
&:not(:last-of-type) {
margin-right: 0.5rem;
}
}
#saved_ids_list {
position: relative;
@ -920,6 +922,9 @@ h3 {
right: 0;
}
}
#primary_actions_wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 40rem) {
body {
@ -983,6 +988,10 @@ h3 {
bottom: auto;
}
}
#primary_actions_wrapper {
display: flex;
flex-wrap: wrap;
}
#create_flo_id_popup,
#retrieve_flo_id_popup {
--width: 26rem;

68
index.html
View File

@ -92,7 +92,7 @@
<div id="pages_container">
<div id="home" class="page flex h-100">
<div class="flex direction-column gap-2 h-100">
<section class="flex">
<section id="primary_actions_wrapper">
<button id="gen_new_addr_btn" class="button primary-action interact">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
@ -118,6 +118,15 @@
</svg>
Retrieve FLO address
</button>
<button class="button primary-action interact" onclick="openPopup('check_balance_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
</svg>
Check balance
</button>
</section>
<section class="flex direction-column h-100">
<div class="grid align-center gap-0-5">
@ -552,6 +561,30 @@
</sm-form>
</section>
</sm-popup>
<sm-popup id="check_balance_popup">
<header slot="header" class="popup__header">
<button class="popup__header__close justify-self-start" onclick="closePopup()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
</svg>
</button>
<h3>Check balance</h3>
</header>
<sm-form id="check_balance_form">
<sm-input id="check_balance_field" type="text" error-text="Invalid FLO address" placeholder="FLO address"
data-flo-id="" required autofocus>
</sm-input>
<div class="multi-state-button">
<button id="check_balance_button" class="button button--primary cta" type="submit"
onclick="checkBalance()" disabled>Check</button>
</div>
</sm-form>
<div id="balance_wrapper" class="hidden grid gap-0-5" style="margin-top: 2rem">
</div>
</sm-popup>
<sm-popup id="saved_ids_popup">
<header slot="header" class="popup__header">
<button class="popup__header__close justify-self-start" onclick="closePopup()">
@ -749,6 +782,10 @@
case 'retrieve_flo_id_popup':
getRef('recovered_flo_id_wrapper').classList.add('hidden')
break;
case 'check_balance_popup':
getRef('balance_wrapper').classList.add('hidden')
getRef('check_balance_form')._checkValidity()
break;
}
})
@ -1697,6 +1734,35 @@
})
}
function checkBalance() {
getRef('balance_wrapper').classList.add('hidden')
const floID = getRef('check_balance_field').value.trim()
buttonLoader(getRef('check_balance_button'), true)
Promise.all([
floWebWallet.getBalance(floID),
fetchJSON(`https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?floAddress=${floID}`)
]).then(([retrievedBal, { floAddressBalances }]) => {
renderElem(getRef('balance_wrapper'), html`
<h4>Balance</h4>
<div class="flex gap-0-5 align-center space-between">
<span>FLO:</span>
<strong style="font-size: 1.1rem">${retrievedBal}</strong>
</div>
${floAddressBalances ? Object.keys(floAddressBalances).map(token => html`
<div class="flex gap-0-5 align-center space-between">
<span>${token}:</span>
<strong style="font-size: 1.1rem">${parseFloat(floAddressBalances[token].balance.toFixed(8))}</strong>
</div>
`) : ''}
`)
getRef('balance_wrapper').classList.remove('hidden')
}).catch(err => {
notify(err, 'error')
}).finally(() => {
buttonLoader(getRef('check_balance_button'), false)
})
}
function sendMessage() {
const privKey = getRef('get_private_key_field').value.trim();
const sender = floCrypto.getFloID(privKey)