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

Feature and UI/UX update

Browse Source 
-- added lazy loading to market trades
-- trading view is default view when opening asset page
-- removed popup trading panel UX
This commit is contained in:
sairaj mote 2022-05-24 18:06:08 +05:30
parent 6287e8f945
commit 44541513ef
5 changed files with 424 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
docs/css/main.css
View File

@ -496,6 +496,10 @@ strip-select {
strip-option { strip-option {
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.9rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
--border-radius: 0; --border-radius: 0;
--active-option-color: rgba(var(--background-color), 1); --active-option-color: rgba(var(--background-color), 1);
--active-option-background-color: var(--accent-color); --active-option-background-color: var(--accent-color);
@ -793,6 +797,14 @@ sm-checkbox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
align-items: flex-start;
}
#asset_page_wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
} }
#trade_form { #trade_form {
@ -1404,52 +1416,34 @@ sm-checkbox {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
#asset_page__header {
display: flex;
padding: 1rem 1.5rem 0.5rem 0.8rem;
}
#chart_header { #chart_header {
padding: 1rem 1.5rem 0.5rem 1.5rem; padding: 0 1.5rem 0.5rem 1.5rem;
margin-left: -0.7rem;
}
#trade_panel_backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(0.5rem);
backdrop-filter: blur(0.5rem);
z-index: 3;
}
#show_trade_panel {
position: absolute;
border-radius: 2rem;
bottom: 0;
align-self: center;
margin-bottom: 1rem;
z-index: 5;
font-size: 1rem;
} }
#trade_form { #trade_form {
position: fixed; padding: 0 1.5rem;
height: auto;
bottom: 0;
left: 0;
right: 0;
margin-top: auto;
width: auto;
z-index: 10;
padding: 1.5rem 1.5rem 0 1.5rem;
border-radius: 1rem 1rem 0 0;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
} }
#price_chart_container { #price_chart_container {
flex: 1; flex: 1;
} }
#asset_page__footer button .icon {
margin-right: 0.3rem;
}
#asset_page__footer button.active {
color: var(--accent-color);
background-color: rgba(var(--text-color), 0.03);
}
#asset_page__footer button.active .icon {
fill: var(--accent-color);
}
.hide-on-mobile { .hide-on-mobile {
display: none !important; display: none !important;
} }
@ -1613,7 +1607,7 @@ sm-checkbox {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
#asset_page { #asset_page_wrapper {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) 20rem; grid-template-columns: minmax(0, 1fr) 20rem;

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

63
docs/css/main.scss
View File

@ -468,6 +468,7 @@ strip-select {
strip-option { strip-option {
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.9rem;
user-select: none;
--border-radius: 0; --border-radius: 0;
--active-option-color: rgba(var(--background-color), 1); --active-option-color: rgba(var(--background-color), 1);
--active-option-background-color: var(--accent-color); --active-option-background-color: var(--accent-color);
@ -747,6 +748,13 @@ sm-checkbox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
align-items: flex-start;
}
#asset_page_wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
} }
#trade_form { #trade_form {
height: 100%; height: 100%;
@ -1256,46 +1264,33 @@ sm-checkbox {
#login_form { #login_form {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
#asset_page__header {
display: flex;
padding: 1rem 1.5rem 0.5rem 0.8rem;
}
#chart_header { #chart_header {
padding: 1rem 1.5rem 0.5rem 1.5rem; padding: 0 1.5rem 0.5rem 1.5rem;
margin-left: -0.7rem;
}
#trade_panel_backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
background-color: rgba(0 0 0/ 0.3);
backdrop-filter: blur(0.5rem);
z-index: 3;
}
#show_trade_panel {
position: absolute;
border-radius: 2rem;
bottom: 0;
align-self: center;
margin-bottom: 1rem;
z-index: 5;
font-size: 1rem;
} }
#trade_form { #trade_form {
position: fixed; padding: 0 1.5rem;
height: auto;
bottom: 0;
left: 0;
right: 0;
margin-top: auto;
width: auto;
z-index: 10;
padding: 1.5rem 1.5rem 0 1.5rem;
border-radius: 1rem 1rem 0 0;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
} }
#price_chart_container { #price_chart_container {
flex: 1; flex: 1;
} }
#asset_page__footer {
button {
.icon {
margin-right: 0.3rem;
}
&.active {
color: var(--accent-color);
background-color: rgba(var(--text-color), 0.03);
.icon {
fill: var(--accent-color);
}
}
}
}
.hide-on-mobile { .hide-on-mobile {
display: none !important; display: none !important;
} }
@ -1445,7 +1440,7 @@ sm-checkbox {
#home { #home {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
#asset_page { #asset_page_wrapper {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) 20rem; grid-template-columns: minmax(0, 1fr) 20rem;

216
docs/index.html
View File

@ -120,18 +120,19 @@
<ul id="listed_assets" class="user-content hide"></ul> <ul id="listed_assets" class="user-content hide"></ul>
</div> </div>
<div id="asset_page" class="hide-on-mobile"> <div id="asset_page" class="hide-on-mobile">
<div id="price_chart_container" class="flex direction-column gap-0-5"> <nav id="asset_page__header" class="hide-on-desktop">
<div id="chart_header" class="flex align-center space-between"> <a href="#/exchange" class="button icon-only">
<div class="flex align-center"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
<a href="#/exchange" class="button icon-only hide-on-desktop flex align-center"> width="24px" fill="#000000">
<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="M0 0h24v24H0V0z" fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg> </svg>
</a> </a>
</nav>
<div id="asset_page_wrapper">
<div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile">
<div id="chart_header" class="flex align-center space-between">
<H4 id="chart_asset"></H4> <H4 id="chart_asset"></H4>
</div>
<strip-select id="price_duration_selector"> <strip-select id="price_duration_selector">
<strip-option value="hour" title="1 Hour price interval" selected>Hour <strip-option value="hour" title="1 Hour price interval" selected>Hour
</strip-option> </strip-option>
@ -142,16 +143,7 @@
<div id="price_history_chart"></div> <div id="price_history_chart"></div>
</div> </div>
</div> </div>
<sm-form id="trade_form" class="hide-on-mobile"> <sm-form id="trade_form">
<button class="popup__header__close hide-on-desktop" style="margin-right: auto;"
onclick="hideTradePanel()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
</svg>
</button>
<div class="flex space-between align-center"> <div class="flex space-between align-center">
<h4 id="traded_asset">Trade FLO</h4> <h4 id="traded_asset">Trade FLO</h4>
<strip-select id="trade_type_selector" class="tab"> <strip-select id="trade_type_selector" class="tab">
@ -160,8 +152,8 @@
</strip-select> </strip-select>
</div> </div>
<div id="get_price" class="flex align-center space-between"></div> <div id="get_price" class="flex align-center space-between"></div>
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001" required <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001"
animate> required animate>
</sm-input> </sm-input>
</sm-input> </sm-input>
<sm-input id="get_total" placeholder="Locked amount (₹)" type="number" min="0.00000001" <sm-input id="get_total" placeholder="Locked amount (₹)" type="number" min="0.00000001"
@ -199,9 +191,40 @@
</sm-button> </sm-button>
</div> </div>
</sm-form> </sm-form>
<div id="trade_panel_backdrop" onclick="hideTradePanel()" class="hide-on-mobile"></div> </div>
<button id="show_trade_panel" class="button button--primary hide-on-desktop cta" <nav id="asset_page__footer" class="flex w-100 hide-on-desktop">
onclick="showTradePanel()">Buy / Sell</button> <button class="flex-1 active" value="trade">
<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">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M12.22,19.85c-0.18,0.18-0.5,0.21-0.71,0c-0.18-0.18-0.21-0.5,0-0.71l3.39-3.39l-1.41-1.41l-3.39,3.39 c-0.19,0.2-0.51,0.19-0.71,0c-0.21-0.21-0.18-0.53,0-0.71l3.39-3.39l-1.41-1.41l-3.39,3.39c-0.18,0.18-0.5,0.21-0.71,0 c-0.19-0.19-0.19-0.51,0-0.71l3.39-3.39L9.24,10.1l-3.39,3.39c-0.18,0.18-0.5,0.21-0.71,0c-0.19-0.2-0.19-0.51,0-0.71L9.52,8.4 l1.87,1.86c0.95,0.95,2.59,0.94,3.54,0c0.98-0.98,0.98-2.56,0-3.54l-1.86-1.86l0.28-0.28c0.78-0.78,2.05-0.78,2.83,0l4.24,4.24 c0.78,0.78,0.78,2.05,0,2.83L12.22,19.85z M21.83,13.07c1.56-1.56,1.56-4.09,0-5.66l-4.24-4.24c-1.56-1.56-4.09-1.56-5.66,0 l-0.28,0.28l-0.28-0.28c-1.56-1.56-4.09-1.56-5.66,0L2.17,6.71c-1.42,1.42-1.55,3.63-0.4,5.19l1.45-1.45 C2.83,9.7,2.96,8.75,3.59,8.12l3.54-3.54c0.78-0.78,2.05-0.78,2.83,0l3.56,3.56c0.18,0.18,0.21,0.5,0,0.71 c-0.21,0.21-0.53,0.18-0.71,0L9.52,5.57l-5.8,5.79c-0.98,0.97-0.98,2.56,0,3.54c0.39,0.39,0.89,0.63,1.42,0.7 c0.07,0.52,0.3,1.02,0.7,1.42c0.4,0.4,0.9,0.63,1.42,0.7c0.07,0.52,0.3,1.02,0.7,1.42c0.4,0.4,0.9,0.63,1.42,0.7 c0.07,0.54,0.31,1.03,0.7,1.42c0.47,0.47,1.1,0.73,1.77,0.73c0.67,0,1.3-0.26,1.77-0.73L21.83,13.07z" />
</g>
</svg>
Trade
</button>
<button class="flex-1" value="'chart">
<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">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<path
d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" />
<polygon
points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" />
<polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" />
</g>
</g>
</svg>
Chart
</button>
</nav>
</div> </div>
</section> </section>
</div> </div>
@ -305,10 +328,6 @@
</div> </div>
</div> </div>
<div id="portfolio" class="grid mobile-page hide"> <div id="portfolio" class="grid mobile-page hide">
<div id="portfolio__header" class="grid gap-1">
<h4>
My portfolio
</h4>
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<strip-select id="portfolio_pages_selector"> <strip-select id="portfolio_pages_selector">
<strip-option value="exchange" selected>Exchange</strip-option> <strip-option value="exchange" selected>Exchange</strip-option>
@ -321,9 +340,11 @@
</button> </button>
</div> </div>
</div> </div>
</div>
<div id="portfolio_pages_wrapper"> <div id="portfolio_pages_wrapper">
<div class="grid gap-1-5"> <div class="grid gap-1-5">
<h4>
My portfolio
</h4>
<div class="grid"> <div class="grid">
<span class="label">Portfolio valuation</span> <span class="label">Portfolio valuation</span>
<h1 id="portfolio_value" style="font-size: 2.5rem;"></h1> <h1 id="portfolio_value" style="font-size: 2.5rem;"></h1>
@ -1487,14 +1508,6 @@
handleMobileChange(mobileQuery) handleMobileChange(mobileQuery)
document.addEventListener("visibilitychange", handleVisibilityChange, false); document.addEventListener("visibilitychange", handleVisibilityChange, false);
function showChildElement(id, index) {
[...getRef(id).children].forEach((child, i) => {
if (i === index)
child.classList.remove('hide')
else
child.classList.add('hide')
})
}
function handleVisibilityChange() { function handleVisibilityChange() {
if (document.visibilityState === "hidden") { if (document.visibilityState === "hidden") {
// code if page is hidden // code if page is hidden
@ -1502,6 +1515,42 @@
updateRate(); updateRate();
} }
} }
// animations
const fadeIn = [
{ opacity: 0 },
{ opacity: 1 }
]
const fadeOut = [
{ opacity: 1 },
{ opacity: 0 }
]
function showChildElement(id, index, { mobileView = false, entry, exit }) {
const animOptions = {
duration: 150,
easing: 'ease',
fill: 'forwards'
}
const visibleElement = [...getRef(id).children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hide'));
if (visibleElement === getRef(id).children[index]) return;
if (visibleElement) {
if (exit) {
visibleElement.animate(exit, animOptions).onfinish = () => {
visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hide')
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
if (entry)
getRef(id).children[index].animate(entry, animOptions)
}
} else {
visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hide')
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
}
} else {
getRef(id).children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hide')
getRef(id).children[index].animate(entry, animOptions)
}
}
</script> </script>
<script> <script>
function buttonLoader(id, show = false) { function buttonLoader(id, show = false) {
@ -1629,6 +1678,7 @@
const d = new Date(originalTime); const d = new Date(originalTime);
return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000; return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;
} }
let marketTradesLazyLoader
const render = { const render = {
listedAsset(asset, rate, countDown) { listedAsset(asset, rate, countDown) {
const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild
@ -1793,10 +1843,9 @@
marketOrders() { marketOrders() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const ordersType = getRef('market_orders_category_selector').value const ordersType = getRef('market_orders_category_selector').value
getRef('market_trades').innerHTML = '';
if (ordersType === 'open') { if (ordersType === 'open') {
getRef('market_orders__title').textContent = 'Market-wide orders'; getRef('market_orders__title').textContent = 'Market-wide orders';
showChildElement('market_orders_wrapper', 0) showChildElement('market_orders_wrapper', 0, { entry: slideInRight, exit: slideOutRight })
getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>'; getRef('market_buy_orders').innerHTML = '<sm-spinner></sm-spinner>';
floExchangeAPI.getBuyList().then(buyOrders => { floExchangeAPI.getBuyList().then(buyOrders => {
getRef('market_buy_orders').innerHTML = ''; getRef('market_buy_orders').innerHTML = '';
@ -1825,12 +1874,12 @@
}) })
} else { } else {
getRef('market_orders__title').textContent = 'Market-wide trades'; getRef('market_orders__title').textContent = 'Market-wide trades';
showChildElement('market_orders_wrapper', 1) showChildElement('market_orders_wrapper', 1, { entry: slideInLeft, exit: slideOutLeft })
getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>'; getRef('market_trades').innerHTML = '<sm-spinner></sm-spinner>';
floExchangeAPI.getTradeList().then(trades => { floExchangeAPI.getTradeList().then(trades => {
trades.forEach(transaction => { const allTrades = trades.map(transaction => {
const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction
const transactionDetails = { return {
buyer, buyer,
seller, seller,
asset, asset,
@ -1838,10 +1887,13 @@
unitValue, unitValue,
time: tx_time time: tx_time
} }
frag.append(render.marketTransactionCard(transactionDetails))
}) })
getRef('market_trades').innerHTML = ''; if (marketTradesLazyLoader) {
getRef('market_trades').append(frag) marketTradesLazyLoader.update(allTrades)
} else {
marketTradesLazyLoader = new LazyLoader('#market_trades', allTrades, render.marketTransactionCard)
}
marketTradesLazyLoader.init()
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}) })
@ -1911,44 +1963,6 @@
} }
document.addEventListener('themechange', setChartTheme) document.addEventListener('themechange', setChartTheme)
function showTradePanel() {
getRef('trade_form').classList.remove('hide-on-mobile')
getRef('trade_form').animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0)' },
], {
duration: 150,
easing: 'ease'
})
getRef('trade_panel_backdrop').classList.remove('hide-on-mobile')
getRef('trade_panel_backdrop').animate([
{ opacity: 0 },
{ opacity: 1 },
], {
duration: 150,
easing: 'ease'
})
}
function hideTradePanel() {
getRef('trade_form').animate([
{ transform: 'translateY(0)' },
{ transform: 'translateY(100%)' },
], {
duration: 150,
easing: 'ease'
}).onfinish = () => {
getRef('trade_form').classList.add('hide-on-mobile')
}
getRef('trade_panel_backdrop').animate([
{ opacity: 1 },
{ opacity: 0 },
], {
duration: 150,
easing: 'ease'
}).onfinish = () => {
getRef('trade_panel_backdrop').classList.add('hide-on-mobile')
}
}
function updateTooltip(asset, tradeType) { function updateTooltip(asset, tradeType) {
getRef('quantity_selector').querySelectorAll('.button').forEach(button => { getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
@ -1961,6 +1975,17 @@
getRef('quantity_selector_tip').textContent = `${tradeType} ${asset} worth of the above percentage` getRef('quantity_selector_tip').textContent = `${tradeType} ${asset} worth of the above percentage`
} }
getRef('asset_page__footer').addEventListener('click', e => {
if (e.target.closest('button')) {
const button = e.target.closest('button');
[...getRef('asset_page__footer').children].forEach(child => {
child.classList.remove('active')
});
button.classList.add('active')
showChildElement('asset_page_wrapper', button.value === 'trade' ? 1 : 0, { mobileView: true })
}
})
let tradeType = 'buy' let tradeType = 'buy'
getRef('trade_type_selector').addEventListener('change', e => { getRef('trade_type_selector').addEventListener('change', e => {
tradeType = e.detail.value tradeType = e.detail.value
@ -2058,7 +2083,11 @@
}) })
getRef('portfolio_pages_selector').addEventListener('change', e => { getRef('portfolio_pages_selector').addEventListener('change', e => {
showChildElement('portfolio_pages_wrapper', e.target.value === 'exchange' ? 0 : 1) if (e.target.value === 'exchange') {
showChildElement('portfolio_pages_wrapper', 0, { entry: slideInRight, exit: slideOutRight })
} else {
showChildElement('portfolio_pages_wrapper', 1, { entry: slideInLeft, exit: slideOutLeft })
}
}) })
getRef('my_assets').addEventListener('change', e => { getRef('my_assets').addEventListener('change', e => {
@ -2069,35 +2098,20 @@
} }
const previousActionButton = getRef('my_assets').querySelector('.portfolio_actions__wrapper') const previousActionButton = getRef('my_assets').querySelector('.portfolio_actions__wrapper')
if (previousActionButton) { if (previousActionButton) {
previousActionButton.animate([
{
paddingTop: '1rem',
height: `${previousActionButton.offsetHeight}px`,
opacity: 1
},
{
paddingTop: 0,
height: 0,
opacity: 0
}
], animOptions).onfinish = () => {
previousActionButton.remove() previousActionButton.remove()
} }
}
const actionButtons = getRef('asset_balance_actions').content.cloneNode(true) const actionButtons = getRef('asset_balance_actions').content.cloneNode(true)
e.target.closest('.balance-card').append(actionButtons) e.target.closest('.balance-card').append(actionButtons)
const height = e.target.closest('.balance-card').lastElementChild.offsetHeight const height = e.target.closest('.balance-card').lastElementChild.offsetHeight
e.target.closest('.balance-card').lastElementChild.animate([ e.target.closest('.balance-card').lastElementChild.animate([
{ {
paddingTop: 0, transform: 'translateY(-0.5rem)',
height: 0, opacity: 0.5
opacity: 0
}, },
{ {
paddingTop: '1rem', transform: 'translateY(0)',
height: `${height}px`,
opacity: 1 opacity: 1
} },
], animOptions) ], animOptions)
}) })

92
docs/scripts/floExchangeAPI.js
View File

@ -1,6 +1,6 @@
'use strict'; 'use strict';
(function(EXPORTS) { //floExchangeAPI v1.1.2 (function (EXPORTS) { //floExchangeAPI v1.1.2
const exchangeAPI = EXPORTS; const exchangeAPI = EXPORTS;
/*Kademlia DHT K-bucket implementation as a binary tree.*/ /*Kademlia DHT K-bucket implementation as a binary tree.*/
@ -46,7 +46,7 @@
this.arbiter = options.arbiter || this.arbiter this.arbiter = options.arbiter || this.arbiter
this.metadata = Object.assign({}, options.metadata) this.metadata = Object.assign({}, options.metadata)
this.createNode = function() { this.createNode = function () {
return { return {
contacts: [], contacts: [],
dontSplit: false, dontSplit: false,
@ -55,7 +55,7 @@
} }
} }
this.ensureInt8 = function(name, val) { this.ensureInt8 = function (name, val) {
if (!(val instanceof Uint8Array)) { if (!(val instanceof Uint8Array)) {
throw new TypeError(name + ' is not a Uint8Array') throw new TypeError(name + ' is not a Uint8Array')
} }
@ -66,7 +66,7 @@
* @param {Uint8Array} array2 * @param {Uint8Array} array2
* @return {Boolean} * @return {Boolean}
*/ */
this.arrayEquals = function(array1, array2) { this.arrayEquals = function (array1, array2) {
if (array1 === array2) { if (array1 === array2) {
return true return true
} }
@ -94,7 +94,7 @@
* @param {Object} candidate Contact being added to the k-bucket. * @param {Object} candidate Contact being added to the k-bucket.
* @return {Object} Contact to updated the k-bucket with. * @return {Object} Contact to updated the k-bucket with.
*/ */
this.arbiter = function(incumbent, candidate) { this.arbiter = function (incumbent, candidate) {
return incumbent.vectorClock > candidate.vectorClock ? incumbent : candidate return incumbent.vectorClock > candidate.vectorClock ? incumbent : candidate
} }
@ -107,7 +107,7 @@
* @return {Number} Integer The XOR distance between firstId * @return {Number} Integer The XOR distance between firstId
* and secondId. * and secondId.
*/ */
this.distance = function(firstId, secondId) { this.distance = function (firstId, secondId) {
let distance = 0 let distance = 0
let i = 0 let i = 0
const min = Math.min(firstId.length, secondId.length) const min = Math.min(firstId.length, secondId.length)
@ -124,7 +124,7 @@
* *
* @param {Object} contact the contact object to add * @param {Object} contact the contact object to add
*/ */
this.add = function(contact) { this.add = function (contact) {
this.ensureInt8('contact.id', (contact || {}).id) this.ensureInt8('contact.id', (contact || {}).id)
let bitIndex = 0 let bitIndex = 0
@ -172,7 +172,7 @@
* closest contacts to return * closest contacts to return
* @return {Array} Array Maximum of n closest contacts to the node id * @return {Array} Array Maximum of n closest contacts to the node id
*/ */
this.closest = function(id, n = Infinity) { this.closest = function (id, n = Infinity) {
this.ensureInt8('id', id) this.ensureInt8('id', id)
if ((!Number.isInteger(n) && n !== Infinity) || n <= 0) { if ((!Number.isInteger(n) && n !== Infinity) || n <= 0) {
@ -204,7 +204,7 @@
* *
* @return {Number} The number of contacts held in the tree * @return {Number} The number of contacts held in the tree
*/ */
this.count = function() { this.count = function () {
// return this.toArray().length // return this.toArray().length
let count = 0 let count = 0
for (const nodes = [this.root]; nodes.length > 0;) { for (const nodes = [this.root]; nodes.length > 0;) {
@ -225,7 +225,7 @@
* to check in the id Uint8Array. * to check in the id Uint8Array.
* @return {Object} left leaf if id at bitIndex is 0, right leaf otherwise. * @return {Object} left leaf if id at bitIndex is 0, right leaf otherwise.
*/ */
this._determineNode = function(node, id, bitIndex) { this._determineNode = function (node, id, bitIndex) {
// *NOTE* remember that id is a Uint8Array and has granularity of // *NOTE* remember that id is a Uint8Array and has granularity of
// bytes (8 bits), whereas the bitIndex is the bit index (not byte) // bytes (8 bits), whereas the bitIndex is the bit index (not byte)
@ -267,7 +267,7 @@
* @param {Uint8Array} id The ID of the contact to fetch. * @param {Uint8Array} id The ID of the contact to fetch.
* @return {Object|Null} The contact if available, otherwise null * @return {Object|Null} The contact if available, otherwise null
*/ */
this.get = function(id) { this.get = function (id) {
this.ensureInt8('id', id) this.ensureInt8('id', id)
let bitIndex = 0 let bitIndex = 0
@ -291,7 +291,7 @@
* @return {Number} Integer Index of contact with provided id if it * @return {Number} Integer Index of contact with provided id if it
* exists, -1 otherwise. * exists, -1 otherwise.
*/ */
this._indexOf = function(node, id) { this._indexOf = function (node, id) {
for (let i = 0; i < node.contacts.length; ++i) { for (let i = 0; i < node.contacts.length; ++i) {
if (this.arrayEquals(node.contacts[i].id, id)) return i if (this.arrayEquals(node.contacts[i].id, id)) return i
} }
@ -305,7 +305,7 @@
* @param {Uint8Array} id The ID of the contact to remove. * @param {Uint8Array} id The ID of the contact to remove.
* @return {Object} The k-bucket itself. * @return {Object} The k-bucket itself.
*/ */
this.remove = function(id) { this.remove = function (id) {
this.ensureInt8('the id as parameter 1', id) this.ensureInt8('the id as parameter 1', id)
let bitIndex = 0 let bitIndex = 0
@ -332,7 +332,7 @@
* @param {Number} bitIndex the bitIndex to which byte to check in the * @param {Number} bitIndex the bitIndex to which byte to check in the
* Uint8Array for navigating the binary tree * Uint8Array for navigating the binary tree
*/ */
this._split = function(node, bitIndex) { this._split = function (node, bitIndex) {
node.left = this.createNode() node.left = this.createNode()
node.right = this.createNode() node.right = this.createNode()
@ -360,7 +360,7 @@
* *
* @return {Array} All of the contacts in the tree, as an array * @return {Array} All of the contacts in the tree, as an array
*/ */
this.toArray = function() { this.toArray = function () {
let result = [] let result = []
for (const nodes = [this.root]; nodes.length > 0;) { for (const nodes = [this.root]; nodes.length > 0;) {
const node = nodes.pop() const node = nodes.pop()
@ -386,7 +386,7 @@
* calculation) * calculation)
* @param {Object} contact The contact object to update. * @param {Object} contact The contact object to update.
*/ */
this._update = function(node, index, contact) { this._update = function (node, index, contact) {
// sanity check // sanity check
if (!this.arrayEquals(node.contacts[index].id, contact.id)) { if (!this.arrayEquals(node.contacts[index].id, contact.id)) {
throw new Error('wrong index for _update') throw new Error('wrong index for _update')
@ -405,7 +405,7 @@
} }
const K_Bucket = exchangeAPI.K_Bucket = function K_Bucket(masterID, backupList) { const K_Bucket = exchangeAPI.K_Bucket = function K_Bucket(masterID, backupList) {
const decodeID = function(floID) { const decodeID = function (floID) {
let k = bitjs.Base58.decode(floID); let k = bitjs.Base58.decode(floID);
k.shift(); k.shift();
k.splice(-4, 4); k.splice(-4, 4);
@ -431,7 +431,7 @@
get: () => Array.from(orderedList) get: () => Array.from(orderedList)
}); });
self.closestNode = function(id, N = 1) { self.closestNode = function (id, N = 1) {
let decodedId = decodeID(id); let decodedId = decodeID(id);
let n = N || orderedList.length; let n = N || orderedList.length;
let cNodes = _KB.closest(decodedId, n) let cNodes = _KB.closest(decodedId, n)
@ -444,7 +444,7 @@
self.isPrev = (source, target) => orderedList.indexOf(target) === orderedList.indexOf(source) - 1; self.isPrev = (source, target) => orderedList.indexOf(target) === orderedList.indexOf(source) - 1;
self.isNext = (source, target) => orderedList.indexOf(target) === orderedList.indexOf(source) + 1; self.isNext = (source, target) => orderedList.indexOf(target) === orderedList.indexOf(source) + 1;
self.prevNode = function(id, N = 1) { self.prevNode = function (id, N = 1) {
let n = N || orderedList.length; let n = N || orderedList.length;
if (!orderedList.includes(id)) if (!orderedList.includes(id))
throw Error(`${id} is not in KB list`); throw Error(`${id} is not in KB list`);
@ -452,7 +452,7 @@
return (N == 1 ? pNodes[0] : pNodes); return (N == 1 ? pNodes[0] : pNodes);
}; };
self.nextNode = function(id, N = 1) { self.nextNode = function (id, N = 1) {
let n = N || orderedList.length; let n = N || orderedList.length;
if (!orderedList.includes(id)) if (!orderedList.includes(id))
throw Error(`${id} is not in KB list`); throw Error(`${id} is not in KB list`);
@ -468,7 +468,7 @@
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let curPos = fetch_api.curPos || 0; let curPos = fetch_api.curPos || 0;
if (curPos >= nodeList.length) if (curPos >= nodeList.length)
return reject(ExchangeError(ExchangeError.NODES_OFFLINE_CODE, 'No Node online! Try again later', errorCode.NODES_OFFLINE)); return reject(ExchangeError(ExchangeError.NODES_OFFLINE_CODE, 'No Node online! Refresh the page or try again later', errorCode.NODES_OFFLINE));
let url = "https://" + nodeURL[nodeList[curPos]]; let url = "https://" + nodeURL[nodeList[curPos]];
(options ? fetch(url + api, options) : fetch(url + api)) (options ? fetch(url + api, options) : fetch(url + api))
.then(result => resolve(result)).catch(error => { .then(result => resolve(result)).catch(error => {
@ -519,7 +519,7 @@
INTERNAL_ERROR: '500' INTERNAL_ERROR: '500'
}; };
const parseErrorCode = exchangeAPI.parseErrorCode = function(message) { const parseErrorCode = exchangeAPI.parseErrorCode = function (message) {
let code = message.match(/^E\d{3}:/g); let code = message.match(/^E\d{3}:/g);
if (!code || !code.length) if (!code || !code.length)
return null; return null;
@ -559,7 +559,7 @@
}); });
} }
exchangeAPI.getAccount = function(floID, proxySecret) { exchangeAPI.getAccount = function (floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -586,7 +586,7 @@
}); });
} }
exchangeAPI.getBuyList = function(asset = null) { exchangeAPI.getBuyList = function (asset = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch_api('/list-buyorders' + (asset ? "?asset=" + asset : "")) fetch_api('/list-buyorders' + (asset ? "?asset=" + asset : ""))
.then(result => responseParse(result) .then(result => responseParse(result)
@ -596,7 +596,7 @@
}); });
} }
exchangeAPI.getSellList = function(asset = null) { exchangeAPI.getSellList = function (asset = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch_api('/list-sellorders' + (asset ? "?asset=" + asset : "")) fetch_api('/list-sellorders' + (asset ? "?asset=" + asset : ""))
.then(result => responseParse(result) .then(result => responseParse(result)
@ -606,7 +606,7 @@
}); });
} }
exchangeAPI.getTradeList = function(asset = null) { exchangeAPI.getTradeList = function (asset = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch_api('/list-trades' + (asset ? "?asset=" + asset : "")) fetch_api('/list-trades' + (asset ? "?asset=" + asset : ""))
.then(result => responseParse(result) .then(result => responseParse(result)
@ -616,7 +616,7 @@
}); });
} }
exchangeAPI.getRates = function(asset = null) { exchangeAPI.getRates = function (asset = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch_api('/get-rates' + (asset ? "?asset=" + asset : "")) fetch_api('/get-rates' + (asset ? "?asset=" + asset : ""))
.then(result => responseParse(result) .then(result => responseParse(result)
@ -626,7 +626,7 @@
}); });
} }
exchangeAPI.getRateHistory = function(asset, duration = null) { exchangeAPI.getRateHistory = function (asset, duration = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch_api('/rate-history?asset=' + asset + (duration ? '&duration=' + duration : "")) fetch_api('/rate-history?asset=' + asset + (duration ? '&duration=' + duration : ""))
.then(result => responseParse(result) .then(result => responseParse(result)
@ -636,7 +636,7 @@
}); });
} }
exchangeAPI.getBalance = function(floID = null, token = null) { exchangeAPI.getBalance = function (floID = null, token = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!floID && !token) if (!floID && !token)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Need atleast one argument", errorCode.MISSING_PARAMETER)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Need atleast one argument", errorCode.MISSING_PARAMETER));
@ -651,7 +651,7 @@
}) })
} }
exchangeAPI.getTx = function(txid) { exchangeAPI.getTx = function (txid) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!txid) if (!txid)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, 'txid required', errorCode.MISSING_PARAMETER)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, 'txid required', errorCode.MISSING_PARAMETER));
@ -670,7 +670,7 @@
return floCrypto.signData(req_str, signKey); return floCrypto.signData(req_str, signKey);
} }
exchangeAPI.getLoginCode = function() { exchangeAPI.getLoginCode = function () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch_api('/get-login-code') fetch_api('/get-login-code')
.then(result => responseParse(result) .then(result => responseParse(result)
@ -713,7 +713,7 @@
} }
*/ */
exchangeAPI.login = function(privKey, proxyKey, code, hash) { exchangeAPI.login = function (privKey, proxyKey, code, hash) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!code || !hash) if (!code || !hash)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Login Code missing", errorCode.MISSING_PARAMETER)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Login Code missing", errorCode.MISSING_PARAMETER));
@ -748,7 +748,7 @@
}) })
} }
exchangeAPI.logout = function(floID, proxySecret) { exchangeAPI.logout = function (floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -775,7 +775,7 @@
}) })
} }
exchangeAPI.buy = function(asset, quantity, max_price, floID, proxySecret) { exchangeAPI.buy = function (asset, quantity, max_price, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (typeof quantity !== "number" || quantity <= 0) if (typeof quantity !== "number" || quantity <= 0)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER));
@ -813,7 +813,7 @@
} }
exchangeAPI.sell = function(asset, quantity, min_price, floID, proxySecret) { exchangeAPI.sell = function (asset, quantity, min_price, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (typeof quantity !== "number" || quantity <= 0) if (typeof quantity !== "number" || quantity <= 0)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER));
@ -851,7 +851,7 @@
} }
exchangeAPI.cancelOrder = function(type, id, floID, proxySecret) { exchangeAPI.cancelOrder = function (type, id, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (type !== "buy" && type !== "sell") if (type !== "buy" && type !== "sell")
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid type (${type}): type should be sell (or) buy`, errorCode.INVALID_TYPE)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid type (${type}): type should be sell (or) buy`, errorCode.INVALID_TYPE));
@ -885,7 +885,7 @@
} }
//receiver should be object eg {floID1: amount1, floID2: amount2 ...} //receiver should be object eg {floID1: amount1, floID2: amount2 ...}
exchangeAPI.transferToken = function(receiver, token, floID, proxySecret) { exchangeAPI.transferToken = function (receiver, token, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (typeof receiver !== 'object' || receiver === null) if (typeof receiver !== 'object' || receiver === null)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Invalid receiver: parameter is not an object", errorCode.INVALID_FLO_ID)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Invalid receiver: parameter is not an object", errorCode.INVALID_FLO_ID));
@ -930,7 +930,7 @@
}) })
} }
exchangeAPI.depositFLO = function(quantity, floID, sinkID, privKey, proxySecret = null) { exchangeAPI.depositFLO = function (quantity, floID, sinkID, privKey, proxySecret = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (typeof quantity !== "number" || quantity <= floGlobals.fee) if (typeof quantity !== "number" || quantity <= floGlobals.fee)
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, `Invalid quantity (${quantity})`, errorCode.INVALID_NUMBER));
@ -965,7 +965,7 @@
}) })
} }
exchangeAPI.withdrawFLO = function(quantity, floID, proxySecret) { exchangeAPI.withdrawFLO = function (quantity, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -994,7 +994,7 @@
}) })
} }
exchangeAPI.depositToken = function(token, quantity, floID, sinkID, privKey, proxySecret = null) { exchangeAPI.depositToken = function (token, quantity, floID, sinkID, privKey, proxySecret = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!floCrypto.verifyPrivKey(privKey, floID)) if (!floCrypto.verifyPrivKey(privKey, floID))
return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Invalid Private Key", errorCode.INVALID_PRIVATE_KEY)); return reject(ExchangeError(ExchangeError.BAD_REQUEST_CODE, "Invalid Private Key", errorCode.INVALID_PRIVATE_KEY));
@ -1027,7 +1027,7 @@
}) })
} }
exchangeAPI.withdrawToken = function(token, quantity, floID, proxySecret) { exchangeAPI.withdrawToken = function (token, quantity, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -1058,7 +1058,7 @@
}) })
} }
exchangeAPI.addUserTag = function(tag_user, tag, floID, proxySecret) { exchangeAPI.addUserTag = function (tag_user, tag, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -1089,7 +1089,7 @@
}) })
} }
exchangeAPI.removeUserTag = function(tag_user, tag, floID, proxySecret) { exchangeAPI.removeUserTag = function (tag_user, tag, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -1120,7 +1120,7 @@
}) })
} }
exchangeAPI.addDistributor = function(distributor, asset, floID, proxySecret) { exchangeAPI.addDistributor = function (distributor, asset, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -1151,7 +1151,7 @@
}) })
} }
exchangeAPI.removeDistributor = function(distributor, asset, floID, proxySecret) { exchangeAPI.removeDistributor = function (distributor, asset, floID, proxySecret) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = { let request = {
floID: floID, floID: floID,
@ -1242,7 +1242,7 @@
}) })
} }
exchangeAPI.clearAllLocalData = function() { exchangeAPI.clearAllLocalData = function () {
localStorage.removeItem('exchange-nodes'); localStorage.removeItem('exchange-nodes');
localStorage.removeItem('exchange-assets'); localStorage.removeItem('exchange-assets');
localStorage.removeItem('exchange-tags'); localStorage.removeItem('exchange-tags');