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

fix: updated the account balances and added debts (#325)

Browse Source
This commit is contained in:
Linkie Link 2023-07-28 21:37:54 +02:00 committed by GitHub
parent fec03d030f
commit 1eec100907
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Account/AccountBalancesTable.tsx
View File

@ -19,15 +19,43 @@ import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
import useLocalStorage from 'hooks/useLocalStorage'
import usePrices from 'hooks/usePrices'
import { BNCoin } from 'types/classes/BNCoin'
import { byDenom } from 'utils/array'
import { getAssetByDenom } from 'utils/assets'
import { convertToDisplayAmount, demagnify } from 'utils/formatters'
import { convertLiquidityRateToAPR, convertToDisplayAmount, demagnify } from 'utils/formatters'
import { BN } from 'utils/helpers'
import { convertAprToApy } from 'utils/parsers'
interface Props {
data: Account
account: Account
lendingData: LendingMarketTableData[]
borrowingData: BorrowMarketTableData[]
}
export const AccountBalancesTable = (props: Props) => {
function calculatePositionValues(
type: 'deposits' | 'borrowing' | 'lending',
asset: Asset,
prices: BNCoin[],
displayCurrencyDenom: string,
position: BNCoin,
apy: number,
) {
const { amount, denom } = position
return {
type,
symbol: asset.symbol,
size: demagnify(amount, asset),
value: convertToDisplayAmount(
BNCoin.fromDenomAndBigNumber(denom, amount),
displayCurrencyDenom,
prices,
).toString(),
denom,
amount: type === 'borrowing' ? amount.negated() : amount,
apy,
}
}
export default function AccountBalancesTable(props: Props) {
const [displayCurrency] = useLocalStorage<string>(
DISPLAY_CURRENCY_KEY,
DEFAULT_SETTINGS.displayCurrency,
@ -35,48 +63,35 @@ export const AccountBalancesTable = (props: Props) => {
const { data: prices } = usePrices()
const [sorting, setSorting] = React.useState<SortingState>([])
const balanceData = React.useMemo<AccountBalanceRow[]>(() => {
const accountDeposits = props.data?.deposits ?? []
const accountLends = props.data?.lends ?? []
const accountDeposits = props.account?.deposits ?? []
const accountLends = props.account?.lends ?? []
const accountDebts = props.account?.debts ?? []
const deposits = accountDeposits.map((deposit) => {
const asset = ASSETS.find((asset) => asset.denom === deposit.denom) ?? ASSETS[0]
const apy = 0
return {
type: 'deposit',
symbol: asset.symbol,
denom: deposit.denom,
amount: deposit.amount,
size: demagnify(deposit.amount, asset),
value: convertToDisplayAmount(
new BNCoin({ amount: deposit.amount, denom: deposit.denom }),
displayCurrency,
prices,
).toString(),
apy,
}
})
const lends = accountLends.map((lending) => {
const asset = ASSETS.find((asset) => asset.denom === lending.denom) ?? ASSETS[0]
const apy = 0
return {
type: 'lending',
symbol: asset.symbol,
denom: lending.denom,
amount: lending.amount,
size: demagnify(lending.amount, asset),
value: convertToDisplayAmount(
new BNCoin({ amount: lending.amount, denom: lending.denom }),
displayCurrency,
prices,
).toString(),
apy,
}
return calculatePositionValues('deposits', asset, prices, displayCurrency, deposit, apy)
})
return [...deposits, ...lends]
}, [displayCurrency, prices, props.data?.deposits, props.data?.lends])
const lends = accountLends.map((lending) => {
const asset = ASSETS.find((asset) => asset.denom === lending.denom) ?? ASSETS[0]
const apr = convertLiquidityRateToAPR(
props.lendingData.find((market) => market.asset.denom === lending.denom)
?.marketLiquidityRate ?? 0,
)
const apy = convertAprToApy(apr, 365)
return calculatePositionValues('lending', asset, prices, displayCurrency, lending, apy)
})
const debts = accountDebts.map((debt) => {
const asset = ASSETS.find(byDenom(debt.denom)) ?? ASSETS[0]
const apy =
props.borrowingData.find((market) => market.asset.denom === debt.denom)?.borrowRate ?? 0
return calculatePositionValues('borrowing', asset, prices, displayCurrency, debt, apy * -100)
})
return [...deposits, ...lends, ...debts]
}, [displayCurrency, prices, props.account, props.borrowingData, props.lendingData])
const columns = React.useMemo<ColumnDef<AccountBalanceRow>[]>(
() => [
@ -88,7 +103,7 @@ export const AccountBalancesTable = (props: Props) => {
return (
<Text size='xs'>
{row.original.symbol}
{row.original.type === 'lending' && <span className='text-profit'>(Lent)</span>}
{row.original.type === 'lending' && <span className='ml-1 text-profit'>(lent)</span>}
</Text>
)
},
@ -98,8 +113,11 @@ export const AccountBalancesTable = (props: Props) => {
accessorKey: 'value',
id: 'value',
cell: ({ row }) => {
const coin = new BNCoin({ denom: row.original.denom, amount: row.original.amount })
return <DisplayCurrency coin={coin} className='text-right text-xs' />
const coin = new BNCoin({
denom: row.original.denom,
amount: row.original.amount.toString(),
})
return <DisplayCurrency coin={coin} className='text-xs text-right' />
},
},
{
@ -113,8 +131,8 @@ export const AccountBalancesTable = (props: Props) => {
)
return (
<FormattedNumber
className='text-right text-xs'
amount={Number(BN(amount).toPrecision(2))}
className='text-xs text-right'
amount={Number(BN(amount).abs().toPrecision(2))}
options={{ maxDecimals: 2, abbreviated: true }}
animate
/>
@ -174,7 +192,7 @@ export const AccountBalancesTable = (props: Props) => {
'align-center',
)}
>
<span className='h-6 w-6 text-white'>
<span className='w-6 h-6 text-white'>
{header.column.getCanSort()
? {
asc: <SortAsc />,
@ -203,7 +221,7 @@ export const AccountBalancesTable = (props: Props) => {
<tr key={row.id} className=' text-white/60'>
{row.getVisibleCells().map((cell) => {
const borderClass =
cell.row.original.type === 'deposit' ? 'border-profit' : 'border-loss'
cell.row.original.type === 'borrowing' ? 'border-loss' : 'border-profit'
return (
<td
key={cell.id}

15
src/components/Account/AccountComposition.tsx
View File

@ -11,6 +11,7 @@ import usePrices from 'hooks/usePrices'
import { BNCoin } from 'types/classes/BNCoin'
import {
calculateAccountApr,
calculateAccountBalanceValue,
calculateAccountBorrowRate,
calculateAccountDebtValue,
calculateAccountDepositsValue,
@ -37,8 +38,10 @@ export default function AccountComposition(props: Props) {
const balanceChange = props.change ? calculateAccountDepositsValue(props.change, prices) : BN_ZERO
const debtBalance = calculateAccountDebtValue(props.account, prices)
const debtBalanceChange = props.change ? calculateAccountDebtValue(props.change, prices) : BN_ZERO
const pnL = calculateAccountPnL(props.account, prices)
const pnLChange = props.change ? calculateAccountPnL(props.change, prices) : BN_ZERO
const totalBalance = calculateAccountBalanceValue(props.account, prices)
const totalBalanceChange = props.change
? calculateAccountBalanceValue(props.change, prices)
: BN_ZERO
const apr = calculateAccountApr(props.account, prices)
const aprChange = props.change ? calculateAccountPnL(props.change, prices) : BN_ZERO
const borrowRate = calculateAccountBorrowRate(props.account, prices)
@ -60,10 +63,10 @@ export default function AccountComposition(props: Props) {
isBadIncrease
/>
<Item
title='Unrealized PnL'
current={pnL}
change={pnL.plus(pnLChange)}
className='border border-transparent border-y-white/20 py-3'
title='Total Balance'
current={totalBalance}
change={totalBalance.plus(totalBalanceChange)}
className='border border-transparent border-y-white/20 py-3 font-bold'
/>
<Item title='APR' current={apr} change={apr.plus(aprChange)} className='py-3' isPercentage />
<Item

20
src/components/Account/AccountOverview.tsx
View File

@ -1,17 +1,25 @@
import classNames from 'classnames'
import { Suspense } from 'react'
import { useParams } from 'react-router-dom'
import { AccountBalancesTable } from 'components/Account/AccountBalancesTable'
import AccountBalancesTable from 'components/Account/AccountBalancesTable'
import AccountComposition from 'components/Account/AccountComposition'
import Card from 'components/Card'
import Loading from 'components/Loading'
import Text from 'components/Text'
import useAccounts from 'hooks/useAccounts'
import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
import useStore from 'store'
function Content() {
const address = useParams().address || ''
const address = useStore((s) => s.address)
const { data: account } = useAccounts(address)
const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } =
useBorrowMarketAssetsTableData()
const { availableAssets: lendingAvailableAssets, accountLentAssets } =
useLendingMarketAssetsTableData()
const borrowAssetsData = [...borrowAvailableAssets, ...accountBorrowedAssets]
const lendingAssetsData = [...lendingAvailableAssets, ...accountLentAssets]
if (!address) {
return (
@ -35,7 +43,11 @@ function Content() {
<Card className='h-fit w-full bg-white/5' title={`Account ${account.id}`} key={index}>
<AccountComposition account={account} />
<Text className='mt-3 w-full bg-white/10 px-4 py-2 text-white/40'>Balances</Text>
<AccountBalancesTable data={account} />
<AccountBalancesTable
account={account}
borrowingData={borrowAssetsData}
lendingData={lendingAssetsData}
/>
</Card>
))}
</div>

18
src/components/Account/AccountSummary.tsx
View File

@ -1,5 +1,5 @@
import Accordion from 'components/Accordion'
import { AccountBalancesTable } from 'components/Account/AccountBalancesTable'
import AccountBalancesTable from 'components/Account/AccountBalancesTable'
import AccountComposition from 'components/Account/AccountComposition'
import AccountHealth from 'components/Account/AccountHealth'
import Card from 'components/Card'
@ -8,7 +8,9 @@ import { ArrowChartLineUp } from 'components/Icons'
import Text from 'components/Text'
import { BN_ZERO } from 'constants/math'
import { ORACLE_DENOM } from 'constants/oracle'
import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
import useIsOpenArray from 'hooks/useIsOpenArray'
import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
import usePrices from 'hooks/usePrices'
import { BNCoin } from 'types/classes/BNCoin'
import { calculateAccountDepositsValue } from 'utils/accounts'
@ -24,6 +26,12 @@ export default function AccountSummary(props: Props) {
const accountBalance = props.account
? calculateAccountDepositsValue(props.account, prices)
: BN_ZERO
const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } =
useBorrowMarketAssetsTableData()
const { availableAssets: lendingAvailableAssets, accountLentAssets } =
useLendingMarketAssetsTableData()
const borrowAssetsData = [...borrowAvailableAssets, ...accountBorrowedAssets]
const lendingAssetsData = [...lendingAvailableAssets, ...accountLentAssets]
if (!props.account) return null
return (
@ -60,7 +68,13 @@ export default function AccountSummary(props: Props) {
{
title: 'Balances',
renderContent: () =>
props.account ? <AccountBalancesTable data={props.account} /> : null,
props.account ? (
<AccountBalancesTable
account={props.account}
borrowingData={borrowAssetsData}
lendingData={lendingAssetsData}
/>
) : null,
isOpen: isOpen[1],
toggleOpen: (index: number) => toggleOpen(index),
renderSubTitle: () => <></>,

2
src/types/interfaces/account.d.ts vendored
View File

@ -17,7 +17,7 @@ interface AccountBalanceRow {
type: string
symbol: string
denom: string
amount: string
amount: BigNumber
value: string | number
size: number
apy: number