Added loading when refreshing wallet balance
This commit is contained in:
sairaj mote
parent
05a4aa4f18
commit
eaa7d8011d
@ -569,6 +569,18 @@ sm-checkbox {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.multi-state-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.multi-state-button > * {
|
||||
grid-area: 1/1/2/2;
|
||||
}
|
||||
.multi-state-button button {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#home {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -1149,11 +1161,11 @@ sm-checkbox {
|
||||
grid-area: nav;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.main_navbar__item {
|
||||
padding: 1.5rem 1rem;
|
||||
padding: 1.5rem 2rem 1.5rem 1rem;
|
||||
width: 100%;
|
||||
flex: 0;
|
||||
flex-direction: row;
|
||||
@ -1212,7 +1224,10 @@ sm-checkbox {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64rem) and (min-width: 40rem) {
|
||||
@media screen and (max-width: 80rem) {
|
||||
.main_navbar__item {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
.main_navbar__item .icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -1222,7 +1237,7 @@ sm-checkbox {
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#home {
|
||||
grid-template-columns: 10rem 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -541,6 +541,17 @@ sm-checkbox {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
.multi-state-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
& > * {
|
||||
grid-area: 1/1/2/2;
|
||||
}
|
||||
button {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
#home {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -1059,10 +1070,10 @@ sm-checkbox {
|
||||
grid-area: nav;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.main_navbar__item {
|
||||
padding: 1.5rem 1rem;
|
||||
padding: 1.5rem 2rem 1.5rem 1rem;
|
||||
width: 100%;
|
||||
flex: 0;
|
||||
flex-direction: row;
|
||||
@ -1118,8 +1129,9 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64rem) and (min-width: 40rem) {
|
||||
@media screen and (max-width: 80rem) {
|
||||
.main_navbar__item {
|
||||
padding: 1.5rem 1rem;
|
||||
.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -1130,7 +1142,7 @@ sm-checkbox {
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#home {
|
||||
grid-template-columns: 10rem 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
#asset_page {
|
||||
display: grid;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<title>RanchiMall exchange</title>
|
||||
<meta name="description" content="Trade FLO and FLO based RanchiMall tokens.">
|
||||
|
||||
<script src="css/components.js" defer></script>
|
||||
<script src="scripts/components.js" defer></script>
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@ -282,9 +282,12 @@
|
||||
<div class="grid gap-0-5">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Balance</h4>
|
||||
<button class="button" onclick="refresh();" title="Refresh">
|
||||
Refresh
|
||||
</button>
|
||||
<div class="multi-state-button">
|
||||
<button id="wallet_balance_refresh_button" class="button" onclick="updateRate(false,this);"
|
||||
title="Refresh">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="my_assets" class="grid"></ul>
|
||||
</div>
|
||||
@ -1156,6 +1159,36 @@
|
||||
handleMobileChange(mobileQuery)
|
||||
</script>
|
||||
<script>
|
||||
function buttonLoader(id, show) {
|
||||
getRef(id).disabled = show;
|
||||
const animOptions = {
|
||||
duration: 200,
|
||||
fill: 'forwards',
|
||||
easing: 'ease'
|
||||
}
|
||||
if (show) {
|
||||
try {
|
||||
getRef(id).animate([
|
||||
{
|
||||
clipPath: 'circle(100%)',
|
||||
},
|
||||
{
|
||||
clipPath: 'circle(0)',
|
||||
},
|
||||
], animOptions).onfinish = e => {
|
||||
e.target.commitStyles()
|
||||
e.target.cancel()
|
||||
}
|
||||
getRef(id).parentNode.append(createElement('sm-spinner'))
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
} else {
|
||||
getRef(id).style = ''
|
||||
const potentialTarget = getRef(id).parentNode.querySelector('sm-spinner')
|
||||
if (potentialTarget) potentialTarget.remove();
|
||||
}
|
||||
}
|
||||
const listedAssets = {
|
||||
rupee: {
|
||||
icon: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
@ -2043,7 +2076,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
function updateRate(init = false) {
|
||||
function updateRate(init = false, refreshButton) {
|
||||
if (refreshButton)
|
||||
buttonLoader('wallet_balance_refresh_button', true);
|
||||
floExchangeAPI.getRates().then(rates => {
|
||||
console.debug(rates);
|
||||
if (init) {
|
||||
@ -2081,7 +2116,8 @@
|
||||
}
|
||||
if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== ''))
|
||||
getRef('get_price').value = parseFloat(parseFloat(rates[pagesData.params.asset]).toFixed(4))
|
||||
|
||||
if (refreshButton)
|
||||
buttonLoader('wallet_balance_refresh_button', false);
|
||||
}).catch(error => console.error(error.message))
|
||||
}
|
||||
|
||||
@ -2117,6 +2153,8 @@
|
||||
async function account() {
|
||||
floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(async acc => {
|
||||
document.body.classList.add('is-signed-in');
|
||||
// save login time
|
||||
localStorage.setItem(`${acc.floID}_last_login`, Date.now());
|
||||
getRef("login_form").classList.add('hide')
|
||||
getRef('user_popup_button').classList.remove('hide')
|
||||
accountDetails = acc
|
||||
|
||||
@ -1519,8 +1519,8 @@ spinner.innerHTML = `
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.loader {
|
||||
height: var(--size, 1.5rem);
|
||||
width: var(--size, 1.5rem);
|
||||
height: var(--size, 1.2rem);
|
||||
width: var(--size, 1.2rem);
|
||||
stroke-width: 8;
|
||||
overflow: visible;
|
||||
stroke: var(--accent-color, teal);
|
||||
Loading…
Reference in New Issue
Block a user