5007acb515
* osmosis initial setup and nft contract queries/mutations * display errors on ui * fix: create credit account queryMsg and contract * client initialization. loading indicator when pending io * added tx feedback on toast * remove unused wallet store code * fetch credit accounts moved to external hook * navigation copy * file name typo * remove console logs and unused imports * fix: credit accounts query msg * credit manager store. create credit account hook created * delete credit account hook. fees declaration moved to utils * update selected account when a new one is created * type inference for mutation hooks * loading indicator for async actions. onSuccess toast * credit accounts popover * minor improvements credit account slice * credit manager module state and respective markup * fix: credit account list threshold * credit manager component. currency formatter function update * update contract addresses * borrow screen initial setup * error handling mutation queries * update credit account list when address changes * update credit accounts query key to include address * update selected account when nothing is selected * credit manager wip. deposit and listing positions on credit account * FundAccount component moved to different file * removed unused code * lending assets switch * minor refactor injective balance hook to be more generic * style: font size minor adjustments * borrow action initial. display liabilities and borrow positions on credit manager * positions amount formatting * preserve selected account on local storage * prettier custom settings and respective files formatting * credit manager container moved to external file * removed threshold variable. nav elements moved to array declaration * Navigation component naming and minor cleanup * react query keys enum * query keys improvements * initial generated smart contract api type definitions
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
|