27cdd1c954
* tidy: added eslintrc and prettierrc rules * tidy: formated the files via ‚yarn format‘ * import sort improvements * format script regex fix * replace eslint import severity to warning * remove staged file Co-authored-by: Gustavo Mauricio <gustavo.mauricio58@gmail.com>
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
|
|
import Container from 'components/Container'
|
|
import { formatCurrency } from 'utils/formatters'
|
|
|
|
const mockedAccounts = [
|
|
{
|
|
id: 1,
|
|
label: 'Subaccount 1',
|
|
networth: 100000,
|
|
totalPositionValue: 150000,
|
|
debt: 50000,
|
|
profit: 25000,
|
|
leverage: 3,
|
|
maxLeverage: 5,
|
|
},
|
|
{
|
|
id: 2,
|
|
label: 'Subaccount 2',
|
|
networth: 33000,
|
|
totalPositionValue: 11000,
|
|
debt: 20000,
|
|
profit: -11366,
|
|
leverage: 2,
|
|
maxLeverage: 10,
|
|
},
|
|
{
|
|
id: 3,
|
|
label: 'Subaccount 3',
|
|
networth: 0,
|
|
totalPositionValue: 12938129,
|
|
debt: 9999999999,
|
|
profit: -99999999,
|
|
leverage: 3,
|
|
maxLeverage: 5,
|
|
},
|
|
{
|
|
id: 4,
|
|
label: 'Subaccount 4',
|
|
networth: 33653.22,
|
|
totalPositionValue: 100000,
|
|
debt: 50001.9,
|
|
profit: 25000,
|
|
leverage: 3,
|
|
maxLeverage: 5,
|
|
},
|
|
]
|
|
|
|
const Portfolio = () => {
|
|
return (
|
|
<div className='flex flex-col gap-4'>
|
|
<Container className='flex-1'>Portfolio Module</Container>
|
|
<div className='grid grid-cols-2 gap-4'>
|
|
{mockedAccounts.map((account) => (
|
|
<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'}`}>
|
|
{account.profit > 0 && '+'}
|
|
{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>
|
|
)
|
|
}
|
|
|
|
export default Portfolio
|