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

Update index.html

Browse Source
This commit is contained in:
sairaj mote 2023-07-01 01:29:53 +05:30
parent d51e1238d5
commit a4ee24556a
1 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
docs/index.html
View File

@ -172,7 +172,7 @@
</svg> </svg>
</div> </div>
<h4 class="listed-asset__name">FLO</h4> <h4 class="listed-asset__name">FLO</h4>
<b class="listed-asset__rate">0</b> <b id="flo_exchange_rate" class="listed-asset__rate">0</b>
</a> </a>
</li> </li>
</ul> </ul>
@ -428,7 +428,7 @@
</div> </div>
<p>Deposit BTC to exchange to purchase assets.</p> <p>Deposit BTC to exchange to purchase assets.</p>
<div class="grid gap-1"> <div class="grid gap-1">
<div id="exchange_rupee_balance"></div> <div id="exchange_btc_balance"></div>
<div class="grid"> <div class="grid">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<span class="label">Tradable assets</span> <span class="label">Tradable assets</span>
@ -450,10 +450,7 @@
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" /> 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> </svg>
<p class="banner"> <p class="banner">
You need to have rupee tokens in your FLO ID to purchase assets, which then can You need to have BTC in your portfolio to purchase assets.
be
deposited
to your exchange account.
</p> </p>
</div> </div>
</div> </div>
@ -1206,7 +1203,7 @@
getRef('chart_asset').textContent = `${params.asset}/INR` getRef('chart_asset').textContent = `${params.asset}/INR`
getRef('traded_asset').textContent = `Trade ${params.asset}` getRef('traded_asset').textContent = `Trade ${params.asset}`
getRef('trade_button').textContent = `${tradeType} ${params.asset}` getRef('trade_button').textContent = `${tradeType} ${params.asset}`
getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.FLO.net, true) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}` getRef('quantity_type').textContent = `${parseFloat(allTokens[tradeType === 'buy' ? 'BTC' : params.asset].net.toFixed(4))} ${tradeType === 'buy' ? 'BTC' : params.asset}`
updateTooltip(params.asset, tradeType) updateTooltip(params.asset, tradeType)
} }
const animOptions = { const animOptions = {
@ -1260,6 +1257,11 @@
getRef('asset_list_wrapper').classList.remove('hide-on-mobile') getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
} }
} }
getLastTradePrice().then(price => {
getRef('set_price').value = price
}).catch(err => {
console.error(err)
})
} else { } else {
getRef('login_section').classList.remove('hidden') getRef('login_section').classList.remove('hidden')
if (subPageId1 === 'generate') { if (subPageId1 === 'generate') {
@ -1283,7 +1285,7 @@
if (params.asset) { if (params.asset) {
getRef('portfolio_asset__name').textContent = params.asset getRef('portfolio_asset__name').textContent = params.asset
const { net, locked } = allTokens[params.asset] const { net, locked } = allTokens[params.asset]
const lockedBalance = params.asset === 'rupee' ? formatAmount(locked, true) : toFixed(locked) const lockedBalance = params.asset === 'rupee' ? formatAmount(locked) : toFixed(locked)
showChildElement('portfolio', 1, { showChildElement('portfolio', 1, {
entry: slideInLeft, entry: slideInLeft,
exit: slideOutLeft, exit: slideOutLeft,
@ -1291,7 +1293,7 @@
renderElem(getRef('portfolio_asset__balance'), html` renderElem(getRef('portfolio_asset__balance'), html`
<div class="grid"> <div class="grid">
<span class="label">Available</span> <span class="label">Available</span>
<b style="font-size:2rem">${params.asset === 'rupee' ? formatAmount(net, true) : toFixed(net)}</b> <b style="font-size:2rem">${params.asset === 'rupee' ? formatAmount(net) : toFixed(net)}</b>
${params.asset !== 'rupee' ? html`<span style="font-size: 1rem; opacity:0.8">₹${toFixed(net, 2)}</span>` : ''} ${params.asset !== 'rupee' ? html`<span style="font-size: 1rem; opacity:0.8">₹${toFixed(net, 2)}</span>` : ''}
</div> </div>
${locked ? html` ${locked ? html`
@ -1595,8 +1597,8 @@
return listedAssets.hasOwnProperty(asset) ? listedAssets[asset].icon : listedAssets.default.icon; return listedAssets.hasOwnProperty(asset) ? listedAssets[asset].icon : listedAssets.default.icon;
} }
function formatAmount(amount = 0,) { function formatAmount(amount = 0, currency = 'BTC') {
return amount.toLocaleString(`en-US`, { style: 'currency', currency: 'USD', maximumFractionDigits: 8 }) return amount.toLocaleString(`en-US`, { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 8 })
} }
// remove digitals after specified decimal places without rounding // remove digitals after specified decimal places without rounding
@ -1628,16 +1630,17 @@
const render = { const render = {
orderCard(orderDetails = {}) { orderCard(orderDetails = {}) {
console.log(orderDetails) console.log(orderDetails)
const { id, asset, quantity, price, time_placed, type } = orderDetails const { id, asset, quantity, price, time_placed, type, maxPrice } = orderDetails
const card = getRef('order_template').content.cloneNode(true).firstElementChild const card = getRef('order_template').content.cloneNode(true).firstElementChild
const unitValue = price || maxPrice
card.dataset.id = id card.dataset.id = id
card.dataset.type = type card.dataset.type = type
card.querySelector('.order-card__type').textContent = type card.querySelector('.order-card__type').textContent = type
card.querySelector('.order-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.order-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.order-card__price-type').textContent = 'Price' card.querySelector('.order-card__price-type').textContent = 'Price'
card.querySelector('.order-card__price').textContent = formatAmount(price) card.querySelector('.order-card__price').textContent = formatAmount(unitValue)
card.querySelector('.order-card__amount-type').textContent = 'Amount' card.querySelector('.order-card__amount-type').textContent = 'Amount'
card.querySelector('.order-card__amount').textContent = formatAmount(price * quantity, true) card.querySelector('.order-card__amount').textContent = formatAmount(unitValue * quantity)
card.querySelector('.order-card__time').textContent = relativeTime.from(new Date(time_placed)) card.querySelector('.order-card__time').textContent = relativeTime.from(new Date(time_placed))
return card return card
}, },
@ -1649,7 +1652,7 @@
card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}` card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.completed-trade__time').textContent = getFormattedTime(time) card.querySelector('.completed-trade__time').textContent = getFormattedTime(time)
card.querySelector('.completed-trade__price').textContent = formatAmount(unitValue) card.querySelector('.completed-trade__price').textContent = formatAmount(unitValue)
card.querySelector('.completed-trade__total').textContent = formatAmount(parseFloat(unitValue * quantity), true) card.querySelector('.completed-trade__total').textContent = formatAmount(parseFloat(unitValue * quantity))
card.querySelector('.more-info').dataset.buyer = buyer card.querySelector('.more-info').dataset.buyer = buyer
card.querySelector('.more-info').dataset.seller = seller card.querySelector('.more-info').dataset.seller = seller
card.querySelector('.more-info').dataset.other = other card.querySelector('.more-info').dataset.other = other
@ -1662,7 +1665,7 @@
card.classList.add(`transaction-card--${type}`) card.classList.add(`transaction-card--${type}`)
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.transaction-card__price').textContent = formatAmount(price) card.querySelector('.transaction-card__price').textContent = formatAmount(price)
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(price * quantity), true) card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(price * quantity))
card.querySelector('.more-info').dataset.time = time_placed card.querySelector('.more-info').dataset.time = time_placed
card.querySelector('.more-info').dataset.buyer = type === 'buy' ? floID : undefined card.querySelector('.more-info').dataset.buyer = type === 'buy' ? floID : undefined
card.querySelector('.more-info').dataset.seller = type === 'sell' ? floID : undefined card.querySelector('.more-info').dataset.seller = type === 'sell' ? floID : undefined
@ -1675,7 +1678,7 @@
card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}` card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.completed-trade__time').textContent = getFormattedTime(time) card.querySelector('.completed-trade__time').textContent = getFormattedTime(time)
card.querySelector('.completed-trade__price').textContent = `₹${unitValue}` card.querySelector('.completed-trade__price').textContent = `₹${unitValue}`
card.querySelector('.completed-trade__total').textContent = formatAmount(parseFloat(unitValue * quantity), true) card.querySelector('.completed-trade__total').textContent = formatAmount(parseFloat(unitValue * quantity))
card.querySelector('.more-info').dataset.buyer = buyer card.querySelector('.more-info').dataset.buyer = buyer
card.querySelector('.more-info').dataset.seller = seller card.querySelector('.more-info').dataset.seller = seller
return card return card
@ -1689,8 +1692,8 @@
card.querySelector('.balance-card__icon').innerHTML = getIcon(asset) card.querySelector('.balance-card__icon').innerHTML = getIcon(asset)
const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template'; const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template';
const assetBalance = getRef(templateToClone).content.cloneNode(true) const assetBalance = getRef(templateToClone).content.cloneNode(true)
const availableBalance = asset === 'rupee' ? formatAmount(net, true) : `${toFixed(net)}` const availableBalance = asset === 'rupee' ? formatAmount(net) : `${toFixed(net)}`
const lockedBalance = asset === 'rupee' ? formatAmount(locked, true) : toFixed(locked) const lockedBalance = asset === 'rupee' ? formatAmount(locked) : toFixed(locked)
assetBalance.querySelector('.available-balance').innerHTML = availableBalance assetBalance.querySelector('.available-balance').innerHTML = availableBalance
if (locked) { if (locked) {
assetBalance.querySelector('.locked-balance').textContent = lockedBalance assetBalance.querySelector('.locked-balance').textContent = lockedBalance
@ -1906,7 +1909,7 @@
function updateTooltip(asset, tradeType) { function updateTooltip(asset, tradeType) {
getRef('quantity_selector').querySelectorAll('.button').forEach(button => { getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
if (tradeType === 'buy') { if (tradeType === 'buy') {
button.title = `Buy ${asset} worth ${button.textContent} of total rupee` button.title = `Buy ${asset} worth ${button.textContent} of total ${floGlobals.currency}`
} else { } else {
button.title = `Sell ${button.textContent} of total ${asset}` button.title = `Sell ${button.textContent} of total ${asset}`
} }
@ -1930,20 +1933,26 @@
tradeType = e.target.value tradeType = e.target.value
const selectedAsset = pagesData.params.asset const selectedAsset = pagesData.params.asset
getRef('trade_button').textContent = `${tradeType} ${selectedAsset}` getRef('trade_button').textContent = `${tradeType} ${selectedAsset}`
getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.FLO.net, true) : `${parseFloat(allTokens[selectedAsset].net.toFixed(4))} ${selectedAsset}` getRef('quantity_type').textContent = `${parseFloat(allTokens[tradeType === 'buy' ? 'BTC' : selectedAsset].net.toFixed(4))} ${tradeType === 'buy' ? 'BTC' : selectedAsset}`
updateTooltip(selectedAsset, tradeType) updateTooltip(selectedAsset, tradeType)
}) })
getRef('price_duration_selector').addEventListener('change', e => { getRef('price_duration_selector').addEventListener('change', e => {
render.chart(pagesData.params.asset) render.chart(pagesData.params.asset)
}) })
function getSuggestedPrice() { function getLastTradePrice() {
return 0.001; return new Promise((resolve, reject) => {
floTradeAPI.getTradeList().then(tradeList => {
floGlobals.lastTradePrice = tradeList[0].unitValue || 0;
getRef('flo_exchange_rate').textContent = `${floGlobals.lastTradePrice} ${floGlobals.currency}`
resolve(floGlobals.lastTradePrice)
}).catch(reject)
})
} }
async function tradeAsset() { async function tradeAsset() {
closePopup() closePopup()
const asset = pagesData.params.asset; const asset = pagesData.params.asset;
const quantity = parseFloat(getRef('get_quantity').value) const quantity = parseFloat(getRef('get_quantity').value)
const price = getSuggestedPrice() const price = getLastTradePrice()
if (tradeType === 'buy' && accountDetails.sellOrders.some(order => order.asset === asset)) { if (tradeType === 'buy' && accountDetails.sellOrders.some(order => order.asset === asset)) {
closePopup() closePopup()
return notify('You have an open sell order for this asset. Please close it before buying.', 'error') return notify('You have an open sell order for this asset. Please close it before buying.', 'error')
@ -1986,15 +1995,12 @@
} }
getRef('quantity_selector').addEventListener('click', e => { getRef('quantity_selector').addEventListener('click', e => {
if (e.target.closest('button')) { if (e.target.closest('button')) {
const selectedAsset = pagesData.params.asset const selectedAsset = pagesData.params.asset;
if (!selectedAsset) return notify('Please select an asset to trade', 'error')
const target = e.target.closest('button') const target = e.target.closest('button')
const fraction = parseFloat(target.value) const fraction = parseFloat(target.value)
if (tradeType === 'buy') { const price = parseFloat(getRef('set_price').value.trim()) || floGlobals.lastTradePrice || 0
getRef('get_quantity').value = toFixed((allTokens['FLO'].net * fraction)) getRef('get_quantity').value = toFixed((allTokens[selectedAsset].net / price) * fraction)
} else {
getRef('get_quantity').value = toFixed(allTokens[selectedAsset].net * fraction)
}
} }
}) })
@ -2012,7 +2018,7 @@
const type = target.value const type = target.value
const asset = pagesData.params.asset const asset = pagesData.params.asset
getRef('portfolio_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.FLO.net, true) : `${toFixed(allTokens[asset].net)} ${asset}` getRef('portfolio_quantity_type').textContent = getRef('quantity_type').textContent = `${toFixed(allTokens[type === 'buy' ? 'BTC' : asset].net)} ${asset}`
getRef('portfolio_popup__cta').textContent = `${type} ${asset}` getRef('portfolio_popup__cta').textContent = `${type} ${asset}`
getRef('portfolio_popup__cta').setAttribute('value', type) getRef('portfolio_popup__cta').setAttribute('value', type)
getRef('portfolio_popup__title').textContent = `${type} ${asset}` getRef('portfolio_popup__title').textContent = `${type} ${asset}`
@ -2383,7 +2389,7 @@
</div> </div>
<div class="grid"> <div class="grid">
<p>At price</p> <p>At price</p>
<b>${setPrice} ${asset}</b> <b>${setPrice}</b>
</div> </div>
`; `;
break; break;
@ -2475,7 +2481,7 @@
acc.sellOrders.forEach(({ asset, quantity }) => { acc.sellOrders.forEach(({ asset, quantity }) => {
allTokens[asset].locked += quantity allTokens[asset].locked += quantity
}) })
allTokens[floGlobals.currency].locked = acc.buyOrders.reduce((a, x) => a + x.quantity * x.price, 0) allTokens[floGlobals.currency].locked = acc.buyOrders.reduce((a, x) => a + x.quantity * x.maxPrice, 0)
for (const token in allTokens) { for (const token in allTokens) {
allTokens[token].net = allTokens[token].total - allTokens[token].locked allTokens[token].net = allTokens[token].total - allTokens[token].locked
} }
@ -2488,13 +2494,13 @@
frag.append(render.assetBalanceCard(asset)) frag.append(render.assetBalanceCard(asset))
} }
else { else {
getRef('exchange_rupee_balance').innerHTML = `` getRef('exchange_btc_balance').innerHTML = ``
getRef('exchange_rupee_balance').append(render.assetBalanceCard(asset)) getRef('exchange_btc_balance').append(render.assetBalanceCard(asset))
} }
}) })
getRef('my_assets').innerHTML = '' getRef('my_assets').innerHTML = ''
getRef('my_assets').append(frag) getRef('my_assets').append(frag)
getRef('portfolio_value').textContent = formatAmount(toFixed(totalPortfolio, 2), true) getRef('portfolio_value').textContent = formatAmount(toFixed(totalPortfolio, 2))
//My orders //My orders
render.userOrders(); render.userOrders();