UI changes
This commit is contained in:
sairaj mote
parent
a45b79fce1
commit
bdf71661d0
20
css/main.css
20
css/main.css
@ -857,7 +857,6 @@ theme-toggle {
|
||||
align-items: center;
|
||||
}
|
||||
#page_header h3 {
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@ -875,7 +874,6 @@ theme-toggle {
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.6em;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
@ -885,8 +883,8 @@ p {
|
||||
background-size: cover;
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: max(1.5rem, 3vw);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.balance-card h2,
|
||||
.balance-card h3,
|
||||
@ -955,6 +953,20 @@ p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#token_balance_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.token-balance {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -780,7 +780,6 @@ theme-toggle {
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
@ -797,7 +796,6 @@ theme-toggle {
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.6em;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.balance-card {
|
||||
display: flex;
|
||||
@ -807,8 +805,8 @@ p {
|
||||
background-size: cover;
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: max(1.5rem, 3vw);
|
||||
margin-bottom: 2rem;
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
@ -869,6 +867,18 @@ p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
#token_balance_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.token-balance {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.transaction {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
|
||||
44
index.html
44
index.html
@ -144,11 +144,13 @@
|
||||
}
|
||||
// fetch data and return json
|
||||
async function fetchJson(url, options = {}) {
|
||||
let response = await fetch(url, options)
|
||||
const response = await fetch(url, options)
|
||||
const json = await response.json()
|
||||
if (response.ok) {
|
||||
return await response.json()
|
||||
return json
|
||||
} else {
|
||||
throw new Error(response.statusText)
|
||||
console.error(json)
|
||||
throw new Error(json.description)
|
||||
}
|
||||
}
|
||||
function getFormattedTime(timestamp, format) {
|
||||
@ -343,17 +345,12 @@
|
||||
try {
|
||||
const [floAddress] = state.wildcards
|
||||
if (!floAddress) return;
|
||||
let [addressInfo, addressBalance, addressTxs] = await Promise.all([getAddressInfo(floAddress), getAddressBalance(floAddress), getAddressTxs(floAddress)])
|
||||
renderElem(getRef("page_container"), html`${render.addressPage({ balance: addressBalance, address: floAddress })}`);
|
||||
let [ownedTokens, floBalance, addressTxs] = await Promise.all([getAddressInfo(floAddress), getAddressBalance(floAddress), getAddressTxs(floAddress)])
|
||||
renderElem(getRef("page_container"), html`${render.addressPage({ floBalance, floAddress, ownedTokens })}`);
|
||||
getRef("page_title").textContent = 'Address'
|
||||
renderTransactions('address_transaction_container', addressTxs)
|
||||
const tokenHolders = []
|
||||
for (const token in addressInfo) {
|
||||
tokenHolders.push(render.tokenBalanceCard(token, addressInfo[token].balance))
|
||||
}
|
||||
renderElem(document.getElementById('token_balance_container'), html`${tokenHolders.length ? tokenHolders : html`<div>No tokens found</div>`}`)
|
||||
} catch (e) {
|
||||
notify(e, 'error')
|
||||
renderElem(getRef("page_container"), html`${render.errorPage(e)}`);
|
||||
}
|
||||
})
|
||||
router.addRoute('token', async state => {
|
||||
@ -640,28 +637,29 @@
|
||||
`;
|
||||
},
|
||||
addressPage(obj) {
|
||||
let { balance, address } = obj;
|
||||
const { floBalance, floAddress, ownedTokens = {} } = obj;
|
||||
console.log(obj)
|
||||
return html`
|
||||
<div id="address_page" class="page">
|
||||
<div class="balance-card">
|
||||
<h2 class="wrap-around margin-bottom-2">${address}</h2>
|
||||
<h5 class="label">Balance</h5>
|
||||
<h3>${balance} FLO</h3>
|
||||
<h2 class="wrap-around margin-bottom-2">${floAddress}</h2>
|
||||
<h5 class="label">FLO Balance</h5>
|
||||
<h3 class="margin-bottom-2">${floBalance} FLO</h3>
|
||||
<div class="grid gap-0-5">
|
||||
<h5>Tokens</h5>
|
||||
<ul id="token_balance_list">
|
||||
${Object.keys(ownedTokens).map(token => render.tokenBalanceCard(token, ownedTokens[token].balance))}
|
||||
</ul>
|
||||
</div>
|
||||
<sm-chips data-target="address_views" onchange="changeView(event)">
|
||||
<sm-chip value="0" selected>Transactions</sm-chip>
|
||||
<sm-chip value="1">Tokens</sm-chip>
|
||||
</sm-chips>
|
||||
<div id="address_views" class="view-wrapper">
|
||||
</div>
|
||||
<h4>Transactions</h4>
|
||||
<ul id="address_transaction_container" class="transaction-container"></ul>
|
||||
<ul id="token_balance_container" class="hidden"></ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
tokenBalanceCard(token, balance) {
|
||||
return html`
|
||||
<li class="card">
|
||||
<li class="token-balance">
|
||||
<a href=${`#/token/${token}`} class="label token">${token}</a>
|
||||
<h4>${formatAmount(balance, token.toLowerCase() === 'rupee' ? 'inr' : 'usd')}</h4>
|
||||
</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user