Added total portfolio valuation

This commit is contained in:
sairaj mote 2022-05-15 17:54:34 +05:30
parent 9dcfd1b5e7
commit c1101cfe04
4 changed files with 59 additions and 41 deletions

View File

@ -955,6 +955,7 @@ sm-checkbox {
.completed-trade .more-info, .completed-trade .more-info,
.transaction-card .more-info, .transaction-card .more-info,
.live-order .more-info { .live-order .more-info {
flex-shrink: 0;
padding: 0.3rem; padding: 0.3rem;
} }

File diff suppressed because one or more lines are too long

View File

@ -863,6 +863,7 @@ sm-checkbox {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.more-info { .more-info {
flex-shrink: 0;
padding: 0.3rem; padding: 0.3rem;
} }
} }

View File

@ -302,16 +302,20 @@
</section> </section>
<section id="wallet" class="grid mobile-page hide"> <section id="wallet" class="grid mobile-page hide">
<h4 id="wallet__header" class="flex align-center"> <h4 id="wallet__header" class="flex align-center">
<svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24px"> enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <rect fill="none" height="24" width="24" />
<path <path
d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" /> d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10h8c1.1,0,2-0.9,2-2v-8C22,6.48,17.52,2,12,2z M12,20c-2.89,0-5.43-1.54-6.83-3.84 l2.95-2.95L11.41,16L16,11.42V13h2V8h-5v2h1.58l-3.28,3.28L8,10.5l-3.69,3.7C4.11,13.5,4,12.76,4,12c0-4.41,3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M19.5,20.5c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S20.05,20.5,19.5,20.5z" />
<circle cx="16" cy="12" r="1.5" />
</svg> </svg>
My wallet My portfolio
</h4> </h4>
<div id="wallet_actions"> <div class="grid gap-1-5">
<div class="grid">
<span class="label">Portfolio valuation</span>
<h1 id="portfolio_value" style="font-size: 2.5rem;"></h1>
</div>
<div id="wallet_actions" class="w-100" style="z-index: 5;">
<p class="label">Select asset</p> <p class="label">Select asset</p>
<sm-select id="wallet_asset_selector"></sm-select> <sm-select id="wallet_asset_selector"></sm-select>
<div class="flex wallet_actions__wrapper"> <div class="flex wallet_actions__wrapper">
@ -326,16 +330,21 @@
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<div class="grid gap-0-3">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<h4>Balance</h4> <h4>Balance</h4>
<div class="multi-state-button"> <div class="multi-state-button">
<button id="wallet_balance_refresh_button" class="button" onclick="refresh(false,this);" <button id="wallet_balance_refresh_button" class="button button--small"
title="Refresh"> onclick="refresh(false,this);" title="Refresh">
Refresh Refresh
</button> </button>
</div> </div>
</div> </div>
<p>
Your assets on exchange remains separate until they are withdrawn to your FLO ID.</p>
</div>
<ul id="my_assets" class="grid"></ul> <ul id="my_assets" class="grid"></ul>
</div> </div>
</section> </section>
@ -515,14 +524,13 @@
<div class="item__title">Market</div> <div class="item__title">Market</div>
</a> </a>
<a href="#/wallet" class="main_navbar__item user-content hide interact"> <a href="#/wallet" class="main_navbar__item user-content hide interact">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <rect fill="none" height="24" width="24" />
<path <path
d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" /> d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10h8c1.1,0,2-0.9,2-2v-8C22,6.48,17.52,2,12,2z M12,20c-2.89,0-5.43-1.54-6.83-3.84 l2.95-2.95L11.41,16L16,11.42V13h2V8h-5v2h1.58l-3.28,3.28L8,10.5l-3.69,3.7C4.11,13.5,4,12.76,4,12c0-4.41,3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M19.5,20.5c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S20.05,20.5,19.5,20.5z" />
<circle cx="16" cy="12" r="1.5" />
</svg> </svg>
<div class="item__title">Wallet</div> <div class="item__title">Portfolio</div>
</a> </a>
<a href="#/help" class="main_navbar__item interact"> <a href="#/help" class="main_navbar__item interact">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@ -638,8 +646,7 @@
<button class="button" value="1">100%</button> <button class="button" value="1">100%</button>
</div> </div>
<p id="withdraw_flo_tip" class="hide">*While withdrawing 100% of balance FLO, <b>0.1 FLO</b> is reserved for <p id="withdraw_flo_tip" class="hide">*While withdrawing 100% of balance FLO, <b>0.1 FLO</b> is reserved for
transactions future transactions on blockchain.
on blockchain.
</p> </p>
<sm-input id="get_private_key" placeholder="FLO private key" type="password" required <sm-input id="get_private_key" placeholder="FLO private key" type="password" required
error-text="Invalid private key" data-private-key="" animate> error-text="Invalid private key" data-private-key="" animate>
@ -2002,22 +2009,25 @@
try { try {
showProcess('wallet_popup__cta_wrapper') showProcess('wallet_popup__cta_wrapper')
const proxySecret = await proxy.secret; const proxySecret = await proxy.secret;
let response
switch (type) { switch (type) {
case 'deposit': case 'deposit':
const privKey = getRef('get_private_key').value; const privKey = getRef('get_private_key').value;
if (asset === 'FLO') { if (asset === 'FLO') {
await floExchangeAPI.depositFLO(quantity, proxy.userID, proxy.sinkID, privKey, proxySecret) response = await floExchangeAPI.depositFLO(quantity, proxy.userID, proxy.sinkID, privKey, proxySecret)
} else { } else {
await floExchangeAPI.depositToken(asset, quantity, proxy.userID, proxy.sinkID, privKey, proxySecret) response = await floExchangeAPI.depositToken(asset, quantity, proxy.userID, proxy.sinkID, privKey, proxySecret)
} }
console.log(response)
showWalletResult('success', `Sent ${asset} deposit request`, 'This may take upto 30 mins to reflect in your wallet.') showWalletResult('success', `Sent ${asset} deposit request`, 'This may take upto 30 mins to reflect in your wallet.')
break; break;
case 'withdraw': case 'withdraw':
if (asset === 'FLO') { if (asset === 'FLO') {
await floExchangeAPI.withdrawFLO(quantity, proxy.userID, proxySecret) response = await floExchangeAPI.withdrawFLO(quantity, proxy.userID, proxySecret)
} else { } else {
await floExchangeAPI.withdrawToken(asset, quantity, proxy.userID, proxySecret) response = await floExchangeAPI.withdrawToken(asset, quantity, proxy.userID, proxySecret)
} }
console.log(response)
showWalletResult('success', `Sent ${asset} withdraw request`, 'This may take upto 30 mins to reflect in your wallet.') showWalletResult('success', `Sent ${asset} withdraw request`, 'This may take upto 30 mins to reflect in your wallet.')
break; break;
case 'transfer': case 'transfer':
@ -2025,7 +2035,8 @@
const receiver = { const receiver = {
[receiverID]: quantity [receiverID]: quantity
} }
await floExchangeAPI.transferToken(receiver, asset, proxy.userID, proxySecret) response = await floExchangeAPI.transferToken(receiver, asset, proxy.userID, proxySecret)
console.log(response)
showWalletResult('success', `Sent ${quantity} ${asset} to ${receiverID}`, `This may take upto 30 mins to reflect in receiver's wallet.`) showWalletResult('success', `Sent ${quantity} ${asset} to ${receiverID}`, `This may take upto 30 mins to reflect in receiver's wallet.`)
break; break;
} }
@ -2545,12 +2556,17 @@
// render all assets in wallet // render all assets in wallet
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
let totalPortfolio = 0;
Object.entries(allTokens).sort((a, b) => b[1].net - a[1].net).forEach(([asset]) => { Object.entries(allTokens).sort((a, b) => b[1].net - a[1].net).forEach(([asset]) => {
frag.append(render.assetBalanceCard(asset)) frag.append(render.assetBalanceCard(asset))
if (asset !== floGlobals.currency)
totalPortfolio += allTokens[asset].net * floGlobals.exchangeRates[asset]
else
totalPortfolio += allTokens[asset].net
}) })
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)
//My orders //My orders
render.userOrders(); render.userOrders();
proxy.secret.then(_ => null).catch(_ => null); proxy.secret.then(_ => null).catch(_ => null);