Added transaction history
This commit is contained in:
sairaj mote
parent
4e2cf1bbd8
commit
6c6c1a8a76
@ -70,6 +70,8 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
@ -207,6 +209,13 @@ ul {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
@ -542,6 +551,7 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
cursor: pointer;
|
||||
@ -549,6 +559,7 @@ sm-checkbox {
|
||||
.tooltip .banner {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
width: min(20rem, 100vw - 1rem);
|
||||
display: none;
|
||||
font-size: 0.9rem;
|
||||
@ -1131,6 +1142,62 @@ sm-checkbox {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#history {
|
||||
padding-top: 0 !important;
|
||||
width: min(36rem, 100%);
|
||||
}
|
||||
#history .sticky {
|
||||
margin-left: -0.7rem;
|
||||
padding: 1rem 0;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
.history-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.history-entry:last-of-type {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.history-entry > :nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
.history-entry__status {
|
||||
justify-self: flex-start;
|
||||
font-size: 0.75rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.history-entry .history-entry__amount-wrapper {
|
||||
font-weight: 500;
|
||||
}
|
||||
.history-entry[data-type=deposit] .history-entry__amount {
|
||||
color: var(--green);
|
||||
}
|
||||
.history-entry[data-type=deposit] .history-entry__amount::before {
|
||||
content: "+ ";
|
||||
}
|
||||
.history-entry[data-type=withdraw] .history-entry__amount {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.history-entry[data-type=withdraw] .history-entry__amount::before {
|
||||
content: "- ";
|
||||
}
|
||||
.history-entry__time {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#portfolio_cards_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1591,6 +1658,10 @@ sm-checkbox {
|
||||
.orders_section__header {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#history .sticky {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 80rem) and (min-width: 40rem) {
|
||||
.main_navbar__item {
|
||||
|
||||
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
@ -70,6 +70,8 @@ a {
|
||||
}
|
||||
}
|
||||
a.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
@ -193,6 +195,12 @@ ul {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
@ -506,12 +514,14 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
cursor: pointer;
|
||||
.banner {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
width: min(20rem, calc(100vw - 1rem));
|
||||
display: none;
|
||||
font-size: 0.9rem;
|
||||
@ -1023,6 +1033,64 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
}
|
||||
#history {
|
||||
padding-top: 0 !important;
|
||||
width: min(36rem, 100%);
|
||||
.sticky {
|
||||
margin-left: -0.7rem;
|
||||
padding: 1rem 0;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
.history-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
& > :nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
&__status {
|
||||
justify-self: flex-start;
|
||||
font-size: 0.75rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.history-entry__amount-wrapper {
|
||||
font-weight: 500;
|
||||
}
|
||||
&[data-type="deposit"] {
|
||||
.history-entry__amount {
|
||||
color: var(--green);
|
||||
&::before {
|
||||
content: "+ ";
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-type="withdraw"] {
|
||||
.history-entry__amount {
|
||||
color: var(--danger-color);
|
||||
&::before {
|
||||
content: "- ";
|
||||
}
|
||||
}
|
||||
}
|
||||
&__time {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
#portfolio_cards_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1418,6 +1486,11 @@ sm-checkbox {
|
||||
.orders_section__header {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#history {
|
||||
.sticky {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 80rem) and (min-width: 40rem) {
|
||||
.main_navbar__item {
|
||||
|
||||
@ -352,6 +352,8 @@
|
||||
<div class="grid gap-0-5">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Owned assets on exchange</h4>
|
||||
<div class="flex align-center gap-0-5">
|
||||
<a href="#/history" class="button">History</a>
|
||||
<div class="tooltip">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
@ -360,11 +362,13 @@
|
||||
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
|
||||
</svg>
|
||||
<p class="banner">
|
||||
Your assets on exchange remains separate until they are withdrawn to your FLO
|
||||
Your assets on exchange remains separate until they are withdrawn to your
|
||||
FLO
|
||||
ID.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Deposit rupee from your FLO ID to exchange to purchase assets.</p>
|
||||
<fieldset id="my_assets" class="grid"></fieldset>
|
||||
</div>
|
||||
@ -441,6 +445,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="history" class="mobile-page hide">
|
||||
<div class="flex align-center sticky top-0">
|
||||
<a href="#/portfolio" class="button icon-only">
|
||||
<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 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
</a>
|
||||
<h1>History</h1>
|
||||
</div>
|
||||
<ul id="exchange_history" class="observe-empty-state"></ul>
|
||||
<div class="empty-state">
|
||||
<p>No exchange transactions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="help" class="mobile-page hide grid gap-2">
|
||||
<h1>Hey there! How can we help you today?</h1>
|
||||
<div class="grid gap-0-5">
|
||||
@ -1017,6 +1037,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="history_entry">
|
||||
<li class="history-entry">
|
||||
<div class="flex align-center">
|
||||
<span class="history-entry__type capitalize"></span>
|
||||
<span class="history-entry__status"></span>
|
||||
</div>
|
||||
<b class="history-entry__amount-wrapper">
|
||||
<span class="history-entry__amount"></span>
|
||||
<span class="history-entry__token"></span>
|
||||
</b>
|
||||
<time class="history-entry__time"></time>
|
||||
<a class="history-entry__txid button" target="_blank">See on blockchain</a>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
/**
|
||||
@ -1382,13 +1416,47 @@
|
||||
break;
|
||||
case 'portfolio':
|
||||
break;
|
||||
case 'history':
|
||||
getRef('exchange_history').innerHTML = `
|
||||
<div class="flex" style="padding: 1.5rem; justify-content: center;">
|
||||
<sm-spinner></sm-spinner>
|
||||
</div>
|
||||
`
|
||||
// load all blockchain txs
|
||||
floBlockchainAPI.readAllTxs(accountDetails.floID).then(async transactions => {
|
||||
floGlobals.allTxs = {}
|
||||
transactions.forEach(({ txid, time }) => { floGlobals.allTxs[txid] = { time } })
|
||||
floExchangeAPI.getUserTransacts(accountDetails.floID, await proxy.secret).then(transactions => {
|
||||
transactions = transactions.sort((a, b) => floGlobals.allTxs[b.txid].time - floGlobals.allTxs[a.txid].time)
|
||||
if (historyLazyLoader) {
|
||||
historyLazyLoader.update(transactions)
|
||||
} else {
|
||||
historyLazyLoader = new LazyLoader('#exchange_history', transactions, render.historyEntry)
|
||||
}
|
||||
historyLazyLoader.init()
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (pageId !== 'history') {
|
||||
if (historyLazyLoader)
|
||||
historyLazyLoader.clear()
|
||||
}
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide'))
|
||||
getRef(pageId).classList.remove('hide')
|
||||
document.querySelectorAll('.main_navbar__item').forEach(elem => elem.classList.remove('main_navbar__item--active'))
|
||||
if (document.querySelector(`.main_navbar__item[href="#/${pageId}"]`)) {
|
||||
document.querySelector(`.main_navbar__item[href="#/${pageId}"]`).classList.add('main_navbar__item--active')
|
||||
getRef('main_header').classList.remove('hide-on-mobile')
|
||||
} else {
|
||||
getRef('main_header').classList.add('hide-on-mobile')
|
||||
}
|
||||
getRef('pages_container').style.overflowY = "hidden";
|
||||
getRef(pageId).animate([
|
||||
{
|
||||
@ -1679,6 +1747,7 @@
|
||||
return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;
|
||||
}
|
||||
let marketTradesLazyLoader
|
||||
let historyLazyLoader
|
||||
const render = {
|
||||
listedAsset(asset, rate, countDown) {
|
||||
const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild
|
||||
@ -1898,6 +1967,19 @@
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
},
|
||||
historyEntry(details) {
|
||||
const { amount, status, token, txid, type } = details
|
||||
const entry = getRef('history_entry').content.cloneNode(true).firstElementChild
|
||||
entry.dataset.status = status
|
||||
entry.dataset.type = type
|
||||
entry.querySelector('.history-entry__token').textContent = token
|
||||
entry.querySelector('.history-entry__type').textContent = type
|
||||
entry.querySelector('.history-entry__amount').textContent = amount
|
||||
entry.querySelector('.history-entry__status').textContent = status === 'SUCCESS' ? 'Success' : 'Pending'
|
||||
entry.querySelector('.history-entry__time').textContent = floGlobals.allTxs.hasOwnProperty(txid) ? getFormattedTime(floGlobals.allTxs[txid].time * 1000) : ''
|
||||
entry.querySelector('.history-entry__txid').href = `https://flosight.duckdns.org/tx/${txid}`
|
||||
return entry
|
||||
}
|
||||
}
|
||||
|
||||
@ -2718,8 +2800,6 @@
|
||||
floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(async acc => {
|
||||
document.body.classList.add('is-signed-in');
|
||||
getRef('market_asset_rates').parentNode.remove()
|
||||
// save login time
|
||||
localStorage.setItem(`${acc.floID}_last_login`, Date.now());
|
||||
getRef("login_form").classList.add('hide')
|
||||
accountDetails = acc
|
||||
console.debug(acc);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user