LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

portfolio page initial setup

Browse Source
This commit is contained in:
Gustavo Mauricio 2022-09-08 07:34:05 +01:00
parent 5169643e8c
commit 121549d41d
1 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
pages/portfolio.tsx
View File

@ -15,29 +15,29 @@ const mockedAccounts = [
{ {
id: 2, id: 2,
label: "Subaccount 2", label: "Subaccount 2",
networth: 100000, networth: 33000,
totalPositionValue: 150000, totalPositionValue: 11000,
debt: 50000, debt: 20000,
profit: 25000, profit: -11366,
leverage: 3, leverage: 2,
maxLeverage: 5, maxLeverage: 10,
}, },
{ {
id: 3, id: 3,
label: "Subaccount 3", label: "Subaccount 3",
networth: 100000, networth: 0,
totalPositionValue: 150000, totalPositionValue: 12938129,
debt: 50000, debt: 9999999999,
profit: 25000, profit: -99999999,
leverage: 3, leverage: 3,
maxLeverage: 5, maxLeverage: 5,
}, },
{ {
id: 4, id: 4,
label: "Subaccount 4", label: "Subaccount 4",
networth: 100000, networth: 33653.22,
totalPositionValue: 150000, totalPositionValue: 100000,
debt: 50000, debt: 50001.9,
profit: 25000, profit: 25000,
leverage: 3, leverage: 3,
maxLeverage: 5, maxLeverage: 5,
@ -50,7 +50,41 @@ const Portfolio = () => {
<Container className="flex-1">Portfolio Module</Container> <Container className="flex-1">Portfolio Module</Container>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{mockedAccounts.map((account) => ( {mockedAccounts.map((account) => (
<Container key={account.id}>{account.label}</Container> <Container key={account.id}>
<p className="mb-4 text-center font-bold">{account.label}</p>
<div className="grid grid-cols-3 gap-4">
<div>
<p>{formatCurrency(account.networth)}</p>
<p className="text-sm text-white/40">Net worth</p>
</div>
<div>
<p>{formatCurrency(account.totalPositionValue)}</p>
<p className="text-sm text-white/40">Total Position Value</p>
</div>
<div>
<p>{formatCurrency(account.debt)}</p>
<p className="text-sm text-white/40">Debt</p>
</div>
<div>
<p
className={`${
account.profit > 0 ? "text-green-400" : "text-red-500"
}`}
>
{formatCurrency(account.profit)}
</p>
<p className="text-sm text-white/40">P&L</p>
</div>
<div>
<p>{account.leverage}</p>
<p className="text-sm text-white/40">Current Leverage</p>
</div>
<div>
<p>{account.maxLeverage}</p>
<p className="text-sm text-white/40">Max Leverage</p>
</div>
</div>
</Container>
))} ))}
</div> </div>
</div> </div>
@ -58,3 +92,7 @@ const Portfolio = () => {
}; };
export default Portfolio; export default Portfolio;
function formatCurrency(value: string | number) {
return Number(value).toLocaleString();
}