Added UI for new transaction format
This commit is contained in:
sairaj mote
parent
2a78454cae
commit
9ce06f5cbb
26
css/main.css
26
css/main.css
@ -776,7 +776,7 @@ h3 {
|
||||
}
|
||||
|
||||
.transaction {
|
||||
gap: 1rem;
|
||||
gap: 1.2rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
@ -792,7 +792,29 @@ h3 {
|
||||
}
|
||||
.transaction__receiver {
|
||||
margin-left: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
font-weight: 500;
|
||||
}
|
||||
.transaction__amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
.transaction.mined .transaction__icon .icon, .transaction.received .transaction__icon .icon, .transaction.self .transaction__icon .icon {
|
||||
fill: var(--green);
|
||||
}
|
||||
.transaction.mined .transaction__amount, .transaction.received .transaction__amount, .transaction.self .transaction__amount {
|
||||
color: var(--green);
|
||||
}
|
||||
.transaction.mined .transaction__amount::before, .transaction.received .transaction__amount::before, .transaction.self .transaction__amount::before {
|
||||
content: "+ ";
|
||||
}
|
||||
.transaction.sent .transaction__icon .icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
.transaction.sent .transaction__amount {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.transaction.sent .transaction__amount::before {
|
||||
content: "- ";
|
||||
}
|
||||
.transaction p {
|
||||
font-size: 0.9rem;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -558,17 +558,17 @@ h3 {
|
||||
#main_header {
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
.app-brand{
|
||||
.app-brand {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
.icon{
|
||||
.icon {
|
||||
height: 1.7rem;
|
||||
width: 1.7rem;
|
||||
}
|
||||
}
|
||||
.app-name{
|
||||
&__company{
|
||||
.app-name {
|
||||
&__company {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -741,7 +741,7 @@ h3 {
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.transaction {
|
||||
gap: 1rem;
|
||||
gap: 1.2rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
@ -758,7 +758,39 @@ h3 {
|
||||
}
|
||||
&__receiver {
|
||||
margin-left: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
font-weight: 500;
|
||||
}
|
||||
&__amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
&.mined,
|
||||
&.received,
|
||||
&.self {
|
||||
.transaction__icon {
|
||||
.icon {
|
||||
fill: var(--green);
|
||||
}
|
||||
}
|
||||
.transaction__amount {
|
||||
color: var(--green);
|
||||
&::before {
|
||||
content: "+ ";
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sent {
|
||||
.transaction__icon {
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
.transaction__amount {
|
||||
color: var(--danger-color);
|
||||
&::before {
|
||||
content: "- ";
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
|
||||
121
index.html
121
index.html
@ -187,13 +187,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<section class="grid gap-1">
|
||||
<div class="flex align-center space-between sticky top-0"
|
||||
style="background-color: rgba(var(--foreground-color), 1);transition: background-color .3s;">
|
||||
<div class="flex align-center space-between sticky top-0 flex-wrap gap-1"
|
||||
style="background-color: rgba(var(--foreground-color), 1);transition: background-color .3s; padding-bottom: 0.5rem;">
|
||||
<h4>Transactions</h4>
|
||||
<sm-chips id="filter_selector" class="hidden">
|
||||
<sm-chip value="sent" selected>Sent</sm-chip>
|
||||
<sm-chip value="all" selected>All</sm-chip>
|
||||
<sm-chip value="sent">Sent</sm-chip>
|
||||
<sm-chip value="received">Received</sm-chip>
|
||||
<sm-chip value="all">All</sm-chip>
|
||||
<sm-chip value="mined">Mined</sm-chip>
|
||||
</sm-chips>
|
||||
</div>
|
||||
<ul id="queried_address_transactions" class="observe-empty-state"></ul>
|
||||
@ -830,7 +831,14 @@
|
||||
<div class="transaction__icon"></div>
|
||||
<div class="transaction__receiver breakable"></div>
|
||||
</div>
|
||||
<p class="transaction__flo-data breakable"></p>
|
||||
<div class="grid gap-0-3">
|
||||
<div class="label">Amount</div>
|
||||
<div class="transaction__amount"></div>
|
||||
</div>
|
||||
<div class="grid gap-0-3">
|
||||
<div class="label">FLO Data</div>
|
||||
<p class="transaction__flo-data breakable"></p>
|
||||
</div>
|
||||
<div class="flex align-center space-between">
|
||||
<a href="" class="transaction__link flex align-center" target="_blank" rel="noopener noreferrer">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
@ -1208,15 +1216,15 @@
|
||||
page = parseInt(page)
|
||||
if (floGlobals.query.string !== query) {
|
||||
checkBalance(query)
|
||||
fetchTransactions(query).then(() => {
|
||||
filterFetchedTransactions()
|
||||
render.paginatedTransactions(page)
|
||||
})
|
||||
} else if (page % Math.ceil(1000 / txsPerPage) === 0 && floGlobals.query.transactions.length <= page * txsPerPage) {
|
||||
}/* else if (floGlobals.query.totalPages <= page * txsPerPage) {
|
||||
loadMoreTransactions()
|
||||
} else {
|
||||
render.paginatedTransactions(page)
|
||||
}
|
||||
}*/
|
||||
fetchTransactions(query, page).then(() => {
|
||||
filterFetchedTransactions()
|
||||
render.paginatedTransactions(page)
|
||||
})
|
||||
} catch (err) {
|
||||
notify(err, 'error')
|
||||
}
|
||||
@ -1877,45 +1885,55 @@
|
||||
})
|
||||
},
|
||||
transactionCard(details) {
|
||||
const { sender, receiver, floData, time, txid } = details
|
||||
const { sender, receiver, floData, time, txid, netValue, mine } = details
|
||||
const { query: queriedFloId } = pagesData.params
|
||||
const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
|
||||
if (sender === receiver) {
|
||||
if (mine) {
|
||||
clone.classList.add('mined')
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M22.0861 14.6534C22.3924 14.3472 22.7898 14.1486 23.2186 14.0876L44.6946 11.0319C45.2676 10.9504 45.8455 11.1432 46.2547 11.5524C47.2381 12.5358 46.8168 14.2128 45.4853 14.6146L28.6869 19.6843C28.3711 19.7796 28.0838 19.9515 27.8505 20.1848L27.0092 21.0261L28.3236 22.3404C29.0306 23.0475 29.0976 24.1522 28.5245 24.9346L52.2562 48.6662C53.0372 49.4473 53.0372 50.7136 52.2562 51.4946L51.4947 52.2561C50.7137 53.0372 49.4473 53.0372 48.6663 52.2561L24.9346 28.5245C24.1522 29.0976 23.0475 29.0306 22.3404 28.3236L21.0261 27.0092L20.1848 27.8505C19.9515 28.0838 19.7796 28.3711 19.6843 28.6869L14.6146 45.4853C14.2128 46.8168 12.5358 47.2381 11.5524 46.2547C11.1432 45.8455 10.9504 45.2675 11.0319 44.6946L14.0876 23.2186C14.1486 22.7898 14.3472 22.3924 14.6534 22.0861L15.3949 21.3447C14.8777 20.6386 14.8818 19.67 15.4072 18.9681C14.8209 18.1848 14.8837 17.0693 15.5958 16.3572L16.3573 15.5958C17.0694 14.8837 18.1848 14.8208 18.9681 15.4072C19.6701 14.8818 20.6386 14.8777 21.3447 15.3949L22.0861 14.6534Z"/> </svg>`;
|
||||
clone.querySelector('.transaction__receiver').textContent = 'Coinbase'
|
||||
} else if (sender === receiver) {
|
||||
clone.classList.add('self')
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>sender and receiver is same</title><path d="M.01 0h24v24h-24V0z" fill="none"/><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>`;
|
||||
clone.querySelector('.transaction__receiver').textContent = receiver
|
||||
} else if (queriedFloId === sender) {
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<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="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>`;
|
||||
clone.classList.add('sent')
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<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="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
|
||||
clone.querySelector('.transaction__receiver').textContent = receiver
|
||||
} else {
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<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="M20 5.41L18.59 4 7 15.59V9H5v10h10v-2H8.41z"/></svg>`;
|
||||
clone.classList.add('received')
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<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="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
|
||||
clone.querySelector('.transaction__receiver').textContent = sender
|
||||
}
|
||||
if (netValue) {
|
||||
clone.querySelector('.transaction__amount').textContent = `${netValue} FLO`
|
||||
} else {
|
||||
clone.querySelector('.transaction__amount').parentNode.remove()
|
||||
}
|
||||
if (floData) {
|
||||
clone.querySelector('.transaction__flo-data').textContent = floData
|
||||
} else {
|
||||
clone.querySelector('.transaction__flo-data').parentNode.remove()
|
||||
}
|
||||
clone.querySelector('.transaction__receiver').textContent = queriedFloId === sender ? receiver : sender
|
||||
clone.querySelector('.transaction__flo-data').textContent = floData
|
||||
clone.querySelector('.transaction__link').href = `${floBlockchainAPI.current_server}tx/${txid}`
|
||||
clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000)
|
||||
return clone
|
||||
},
|
||||
paginatedTransactions(page = parseInt(pagesData.params.page) || 1) {
|
||||
const { transactions, string: address, filteredTransactions } = floGlobals.query
|
||||
let startingIndex = ((page - 1) * txsPerPage)
|
||||
if ((filteredTransactions?.length || transactions.length) < startingIndex) {
|
||||
startingIndex = 0;
|
||||
window.history.replaceState({}, '', `#/search?type=address&query=${address}&page=1`)
|
||||
pagesData.params.page = page = 1;
|
||||
}
|
||||
const endingIndex = startingIndex + txsPerPage
|
||||
const { transactions, string: address, filteredTransactions, totalPages } = floGlobals.query
|
||||
const renderedTransactions = (filteredTransactions || transactions)
|
||||
.slice(startingIndex, endingIndex)
|
||||
.map(transaction => render.transactionCard(transaction))
|
||||
renderElem(getRef('queried_address_transactions'), html`${renderedTransactions}`)
|
||||
getRef('transactions_hero_section').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
if (floGlobals.query.transactions.length) {
|
||||
if (transactions.length) {
|
||||
getRef('filter_selector').classList.remove('hidden')
|
||||
} else {
|
||||
getRef('filter_selector').classList.add('hidden')
|
||||
}
|
||||
const paginationSegments = (filteredTransactions || transactions) ? Math.ceil((filteredTransactions || transactions).length / txsPerPage) : 0;
|
||||
const paginationSegments = totalPages;
|
||||
let pagination = []
|
||||
let startingPage = page - 2;
|
||||
let showTill = page + 2;
|
||||
@ -1956,11 +1974,11 @@
|
||||
} else {
|
||||
getRef('pagination_wrapper').classList.add('hidden')
|
||||
}
|
||||
if (filteredTransactions && paginationSegments === page && filteredTransactions.length % txsPerPage !== 0 && transactions.length % txsPerPage === 0) {
|
||||
/* if (filteredTransactions && paginationSegments === page && filteredTransactions.length % txsPerPage !== 0 && transactions.length % txsPerPage === 0) {
|
||||
document.getElementById('load_more_transactions').classList.remove('hidden')
|
||||
} else {
|
||||
document.getElementById('load_more_transactions').classList.add('hidden')
|
||||
}
|
||||
} */
|
||||
},
|
||||
availableAssetOptions() {
|
||||
return (floGlobals.tokens || []).map(token => html` <sm-option value=${token}>${token}</sm-option> `)
|
||||
@ -2524,7 +2542,7 @@
|
||||
getRef('token_list_wrapper').classList.remove('hidden')
|
||||
}
|
||||
// retrieve FLO balance
|
||||
getRef('flo_balance').textContent = `${parseFloat(floBalance.toFixed(3))} FLO`;
|
||||
getRef('flo_balance').textContent = `${parseFloat(floBalance.toFixed(8))} FLO`;
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
@ -2551,8 +2569,8 @@
|
||||
string: '',
|
||||
filteredTransactions: null
|
||||
}
|
||||
const txsPerPage = 25;
|
||||
async function fetchTransactions(address, loadOlder = false) {
|
||||
const txsPerPage = 100;
|
||||
async function fetchTransactions(address, page = 1) {
|
||||
try {
|
||||
document.getElementById('load_more_transactions').classList.add('hidden')
|
||||
renderElem(getRef('pagination_wrapper'), html``)
|
||||
@ -2562,23 +2580,12 @@
|
||||
<span>Loading transactions...</span>
|
||||
</div>
|
||||
`)
|
||||
if (loadOlder) {
|
||||
const { items, initItem } = await floWebWallet.listTransactions.syncOld(address, floGlobals.query.initItem)
|
||||
floGlobals.query = {
|
||||
transactions: [...items, ...floGlobals.query.transactions],
|
||||
string: address,
|
||||
initItem,
|
||||
filteredTransactions: null
|
||||
}
|
||||
} else {
|
||||
const { items, lastItem, initItem } = await floWebWallet.listTransactions(address)
|
||||
floGlobals.query = {
|
||||
transactions: items,
|
||||
string: address,
|
||||
lastItem,
|
||||
initItem,
|
||||
filteredTransactions: null
|
||||
}
|
||||
const { items, totalPages } = await floWebWallet.listTransactions(address, { pageSize: txsPerPage, page })
|
||||
floGlobals.query = {
|
||||
transactions: items,
|
||||
string: address,
|
||||
filteredTransactions: null,
|
||||
totalPages
|
||||
}
|
||||
} catch (err) {
|
||||
renderElem(getRef('queried_address_transactions'), html` <span>Failed to load transactions</span> `)
|
||||
@ -2588,7 +2595,19 @@
|
||||
function filterFetchedTransactions() {
|
||||
const filter = getRef('filter_selector').value;
|
||||
if (filter !== 'all') {
|
||||
floGlobals.query.filteredTransactions = floGlobals.query.transactions.filter(t => filter === 'sent' ? t.sender === floGlobals.query.string : t.receiver === floGlobals.query.string)
|
||||
floGlobals.query.filteredTransactions = floGlobals.query.transactions.filter(t => {
|
||||
switch (filter) {
|
||||
case 'sent':
|
||||
return t.sender === floGlobals.query.string
|
||||
break
|
||||
case 'received':
|
||||
return t.receiver === floGlobals.query.string
|
||||
break
|
||||
case 'mined':
|
||||
return t.mined
|
||||
break
|
||||
}
|
||||
})
|
||||
} else {
|
||||
floGlobals.query.filteredTransactions = null
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user