blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add new formatting functions to borrow page

This commit is contained in:
saml33 2023-01-28 20:56:32 +11:00
parent 98c36682bd
commit ba665fd066
3 changed files with 38 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/borrow/AssetsBorrowsTable.tsx
View File

@ -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

13
components/borrow/BorrowPage.tsx
View File

@ -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

45
components/borrow/YourBorrowsTable.tsx
View File

@ -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">