add new formatting functions to borrow page
This commit is contained in:
parent
98c36682bd
commit
ba665fd066
|
@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
|
|||
import Image from 'next/legacy/image'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { useViewport } from '../../hooks/useViewport'
|
||||
import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
|
||||
import { formatNumericValue } from '../../utils/numbers'
|
||||
import { breakpoints } from '../../utils/theme'
|
||||
import { IconButton } from '../shared/Button'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
|
@ -113,30 +113,26 @@ const AssetsBorrowsTable = () => {
|
|||
</Td>
|
||||
<Td>
|
||||
<div className="flex flex-col text-right">
|
||||
<p>{formatFixedDecimals(borrows)}</p>
|
||||
<p className="text-th-fgd-4">
|
||||
{formatFixedDecimals(borrows * price, true, true)}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={borrows}
|
||||
value={borrows * price}
|
||||
stacked
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex flex-col text-right">
|
||||
<p>
|
||||
{available > 0 ? formatFixedDecimals(available) : '0'}
|
||||
</p>
|
||||
<p className="text-th-fgd-4">
|
||||
{available > 0
|
||||
? formatFixedDecimals(available * price, false, true)
|
||||
: '$0.00'}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={available}
|
||||
amountDecimals={bank.mintDecimals}
|
||||
value={available * price}
|
||||
stacked
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<p className="text-right text-th-down">
|
||||
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||
fixed: true,
|
||||
})}
|
||||
%
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</p>
|
||||
</Td>
|
||||
<Td>
|
||||
|
@ -198,21 +194,15 @@ const AssetsBorrowsTable = () => {
|
|||
{t('available')}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={formatFixedDecimals(available)}
|
||||
value={formatFixedDecimals(
|
||||
available * price,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
amount={available}
|
||||
amountDecimals={bank.mintDecimals}
|
||||
value={available * price}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-0.5 text-right text-xs">{t('rate')}</p>
|
||||
<p className="text-right text-th-down">
|
||||
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||
fixed: true,
|
||||
})}
|
||||
%
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</p>
|
||||
</div>
|
||||
<IconButton
|
||||
|
|
|
@ -8,7 +8,7 @@ import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
|
|||
import FlipNumbers from 'react-flip-numbers'
|
||||
import Button from '@components/shared/Button'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { formatFixedDecimals } from 'utils/numbers'
|
||||
import { formatCurrencyValue } from 'utils/numbers'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import YourBorrowsTable from './YourBorrowsTable'
|
||||
import AssetsBorrowsTable from './AssetsBorrowsTable'
|
||||
|
@ -20,6 +20,7 @@ import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
|
|||
import TabButtons from '@components/shared/TabButtons'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
||||
|
||||
const BorrowPage = () => {
|
||||
const { t } = useTranslation(['common', 'borrow'])
|
||||
|
@ -131,7 +132,7 @@ const BorrowPage = () => {
|
|||
play
|
||||
delay={0.05}
|
||||
duration={1}
|
||||
numbers={formatFixedDecimals(borrowValue, true, true)}
|
||||
numbers={formatCurrencyValue(borrowValue, 2)}
|
||||
/>
|
||||
) : (
|
||||
<FlipNumbers
|
||||
|
@ -144,7 +145,7 @@ const BorrowPage = () => {
|
|||
/>
|
||||
)
|
||||
) : (
|
||||
<span>{formatFixedDecimals(borrowValue, true, true)}</span>
|
||||
<FormatNumericValue value={borrowValue} decimals={2} isUsd />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -153,7 +154,11 @@ const BorrowPage = () => {
|
|||
{t('borrow:available-to-borrow')}
|
||||
</p>
|
||||
<p className="mb-1 font-display text-2xl text-th-fgd-2">
|
||||
{formatFixedDecimals(collateralRemaining, true, true)}
|
||||
<FormatNumericValue
|
||||
value={collateralRemaining}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<div className="mt-[2px] flex h-2 w-full rounded-full bg-th-bkg-3 md:w-48">
|
||||
<div
|
||||
|
|
|
@ -10,7 +10,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
|
|||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/legacy/image'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import { formatNumericValue } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import { Table, Td, Th, TrBody, TrHead } from '../shared/TableElements'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
|
@ -113,14 +113,9 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
|
|||
<Td className="text-right">
|
||||
{mangoAccount ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
borrowedAmount,
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
borrowedAmount * bank.uiPrice,
|
||||
true
|
||||
)}
|
||||
amount={borrowedAmount}
|
||||
amountDecimals={bank.mintDecimals}
|
||||
value={borrowedAmount * bank.uiPrice}
|
||||
stacked
|
||||
/>
|
||||
) : (
|
||||
|
@ -129,22 +124,14 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
|
|||
</Td>
|
||||
<Td className="text-right">
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
available.toNumber(),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
available.toNumber() * bank.uiPrice,
|
||||
true
|
||||
)}
|
||||
amount={available}
|
||||
amountDecimals={bank.mintDecimals}
|
||||
value={available.toNumber() * bank.uiPrice}
|
||||
stacked
|
||||
/>
|
||||
</Td>
|
||||
<Td className="text-right text-th-down">
|
||||
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||
fixed: true,
|
||||
})}
|
||||
%
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
|
@ -218,23 +205,15 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
|
|||
{t('borrow:borrowed-amount')}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
borrowedAmount,
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
borrowedAmount * bank.uiPrice,
|
||||
true
|
||||
)}
|
||||
amount={borrowedAmount}
|
||||
amountDecimals={bank.mintDecimals}
|
||||
value={borrowedAmount * bank.uiPrice}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-0.5 text-right text-xs">{t('rate')}</p>
|
||||
<p className="text-right text-th-down">
|
||||
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||
fixed: true,
|
||||
})}
|
||||
%
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
|
|
Loading…
Reference in New Issue