2f7b266e6b
* MP-1674: replaced the logo and added dekstop only nav
* MP-1677: borrowCapacity implemented into the SubAccount Nav
* MP-1677: adjusted the SubAccount navigation
* M1677: fixed the button and SearchInput component
* MP-1674: fixed the NavLink component
* MP-1674: fixed the SubAccount navigation
* tidy: cleaning up the trading view
* MP-1674: added withdraw and funding functions
* MP-1674: worked on the AccountStats
* MP-1671: modal work
* MP-1647: improvised CreditAccount expander
* tidy: fixed the page structure
* MP-1758: finished the SearchInput layout
* MP-1759: updated the semicircle graphs
* MP-1759: SemiCircle to Gauge
* fix: implemented animated numbers
* tidy: refactor
* MP-1759: added Tooltip to the Gauge
* fix: replace animate={true} with animate
* fix: fixed the Gauge timing
* fix: updated the BorrowCapacity styles
* fix: renamed SubAccount to Account
* fix: Text should not be a button, Button should be
* tidy: format
* fix: Text no clicky
* fix: replaced all the Text appearances with onClick
124 lines
3.3 KiB
TypeScript
124 lines
3.3 KiB
TypeScript
import Card from 'components/Card'
|
|
import FormattedNumber from 'components/FormattedNumber'
|
|
import Text from 'components/Text'
|
|
|
|
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 w-full items-start gap-4'>
|
|
<Card className='flex-1'>
|
|
<Text size='lg' uppercase={true}>
|
|
Portfolio Module
|
|
</Text>
|
|
</Card>
|
|
<div className='grid grid-cols-2 gap-4'>
|
|
{mockedAccounts.map((account) => (
|
|
<Card key={account.id}>
|
|
<Text size='lg' uppercase={true} className='mb-4 text-center'>
|
|
{account.label}
|
|
</Text>
|
|
<div className='grid grid-cols-3 gap-4'>
|
|
<div>
|
|
<Text>
|
|
<FormattedNumber amount={account.networth} animate prefix='$' />
|
|
</Text>
|
|
<Text size='sm' className='text-white/40'>
|
|
Net worth
|
|
</Text>
|
|
</div>
|
|
<div>
|
|
<Text>
|
|
<FormattedNumber amount={account.totalPositionValue} animate prefix='$' />
|
|
</Text>
|
|
<Text size='sm' className='text-white/40'>
|
|
Total Position Value
|
|
</Text>
|
|
</div>
|
|
<div>
|
|
<Text>
|
|
<FormattedNumber amount={account.debt} animate prefix='$' />
|
|
</Text>
|
|
<Text size='sm' className='text-white/40'>
|
|
Debt
|
|
</Text>
|
|
</div>
|
|
<div>
|
|
<Text className={account.profit > 0 ? 'text-green-400' : 'text-red-500'}>
|
|
<FormattedNumber
|
|
amount={account.debt}
|
|
animate
|
|
prefix={account.profit > 0 ? '+$' : '$'}
|
|
/>
|
|
</Text>
|
|
<Text size='sm' className='text-white/40'>
|
|
P&L
|
|
</Text>
|
|
</div>
|
|
<div>
|
|
<Text>
|
|
<FormattedNumber amount={account.leverage} minDecimals={0} suffix='x' />
|
|
</Text>
|
|
<Text size='sm' className='text-white/40'>
|
|
Current Leverage
|
|
</Text>
|
|
</div>
|
|
<div>
|
|
<Text>
|
|
<FormattedNumber amount={account.maxLeverage} minDecimals={0} suffix='x' />
|
|
</Text>
|
|
<Text size='sm' className='text-white/40'>
|
|
Max Leverage
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Portfolio
|