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

component for interest rates display

This commit is contained in:
saml33 2024-03-18 11:46:52 +11:00
parent 55754086b9
commit 74660e08fb
7 changed files with 78 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/TokenList.tsx
View File

@ -50,6 +50,7 @@ import { floorToDecimal } from 'utils/numbers'
import SheenLoader from './shared/SheenLoader'
import useAccountInterest from 'hooks/useAccountInterest'
import { handleGoToTradePage } from 'utils/markets'
import TableRatesDisplay from './shared/TableRatesDisplay'
export const handleOpenCloseBorrowModal = (borrowBank: Bank) => {
const group = mangoStore.getState().group
@ -424,25 +425,10 @@ const TokenList = () => {
</Td>
<Td>
<div className="flex justify-end space-x-1.5">
<Tooltip content={t('deposit-rate')}>
<p className="cursor-help text-th-up">
<FormatNumericValue
value={depositRate}
decimals={2}
/>
%
</p>
</Tooltip>
<span className="text-th-fgd-4">|</span>
<Tooltip content={t('borrow-rate')}>
<p className="cursor-help text-th-down">
<FormatNumericValue
value={borrowRate}
decimals={2}
/>
%
</p>
</Tooltip>
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</Td>
<Td>
@ -601,15 +587,12 @@ const MobileTokenListItem = ({ data }: { data: TableData }) => {
</div>
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
<p className="space-x-2 font-mono">
<span className="text-th-up">
<FormatNumericValue value={depositRate} decimals={2} />%
</span>
<span className="font-normal text-th-fgd-4">|</span>
<span className="text-th-down">
<FormatNumericValue value={borrowRate} decimals={2} />%
</span>
</p>
<div className="flex space-x-1.5 font-mono">
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</div>
<div className="col-span-1">
<ActionsMenu bank={bank} />

12
components/explore/SpotCards.tsx
View File

@ -17,6 +17,7 @@ import useThemeWrapper from 'hooks/useThemeWrapper'
import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc'
import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
import WatchlistButton from './WatchlistButton'
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
const { t } = useTranslation(['common', 'explore', 'trade'])
@ -144,13 +145,10 @@ const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
<p className="tooltip-underline mb-1">{t('rates')}</p>
</Tooltip>
<div className="flex space-x-1.5 font-mono">
<p className="text-th-up">
<FormatNumericValue value={depositRate} decimals={2} />%
</p>
<span className="text-th-fgd-4">|</span>
<p className="text-th-down">
<FormatNumericValue value={borrowRate} decimals={2} />%
</p>
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</div>
<Button

33
components/explore/SpotTable.tsx
View File

@ -37,6 +37,7 @@ import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
import WatchlistButton from './WatchlistButton'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { TOKEN_WATCHLIST_KEY } from 'utils/constants'
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
type TableData = {
assetWeight: string
@ -365,21 +366,10 @@ const SpotTable = ({ tokens }: { tokens: BankWithMarketData[] }) => {
</Td>
<Td>
<div className="flex justify-end space-x-1.5">
<p className="text-th-up">
<FormatNumericValue
value={depositRate}
decimals={2}
/>
%
</p>
<span className="text-th-fgd-4">|</span>
<p className="text-th-down">
<FormatNumericValue
value={borrowRate}
decimals={2}
/>
%
</p>
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</Td>
<Td>
@ -547,14 +537,11 @@ const MobileSpotItem = ({ data }: { data: TableData }) => {
</div>
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
<div className="flex space-x-1.5">
<p className="font-mono text-th-up">
<FormatNumericValue value={depositRate} decimals={2} />%
</p>
<span className="text-th-fgd-4">|</span>
<p className="font-mono text-th-down">
<FormatNumericValue value={borrowRate} decimals={2} />%
</p>
<div className="flex space-x-1.5 font-mono">
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</div>
<div className="col-span-1">

34
components/shared/TableRatesDisplay.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useTranslation } from 'react-i18next'
import FormatNumericValue from './FormatNumericValue'
import Tooltip from './Tooltip'
const TableRatesDisplay = ({
borrowRate,
depositRate,
}: {
borrowRate: number
depositRate: number
}) => {
const { t } = useTranslation('common')
return (
<>
<Tooltip content={t('deposit-rate')}>
<p
className={`cursor-help ${
!depositRate || depositRate < 0.01 ? 'text-th-fgd-4' : 'text-th-up'
}`}
>
<FormatNumericValue value={depositRate || 0} decimals={2} />%
</p>
</Tooltip>
<span className="text-th-fgd-4">|</span>
<Tooltip content={t('borrow-rate')}>
<p className="cursor-help text-th-down">
<FormatNumericValue value={borrowRate || 0} decimals={2} />%
</p>
</Tooltip>
</>
)
}
export default TableRatesDisplay

43
components/stats/tokens/TokenOverviewTable.tsx
View File

@ -17,7 +17,6 @@ import {
TrHead,
} from '@components/shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
import useBanksWithBalances from 'hooks/useBanksWithBalances'
import Decimal from 'decimal.js'
@ -25,6 +24,7 @@ import { useCallback } from 'react'
import { useSortableData } from 'hooks/useSortableData'
import TableTokenName from '@components/shared/TableTokenName'
import { formatTokenSymbol } from 'utils/tokens'
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
export const goToTokenPage = (token: string, router: NextRouter) => {
const query = { ...router.query, ['token']: token }
@ -253,18 +253,10 @@ const TokenOverviewTable = () => {
</Td>
<Td>
<div className="flex justify-end space-x-1.5">
<p className="text-th-up">
<FormatNumericValue
value={depositRate}
decimals={2}
/>
%
</p>
<span className="text-th-fgd-4">|</span>
<p className="text-th-down">
<FormatNumericValue value={borrowRate} decimals={2} />
%
</p>
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</Td>
<Td>
@ -369,25 +361,12 @@ const TokenOverviewTable = () => {
</div>
<div className="col-span-1">
<p className="text-xs">{t('rates')}</p>
<p className="space-x-2">
<span className="font-mono text-th-up">
<FormatNumericValue
value={depositRate}
decimals={2}
/>
%
</span>
<span className="font-normal text-th-fgd-4">
|
</span>
<span className="font-mono text-th-down">
<FormatNumericValue
value={borrowRate}
decimals={2}
/>
%
</span>
</p>
<div className="flex space-x-1.5 font-mono">
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</div>
<div className="col-span-1">
<p className="text-xs">{t('utilization')}</p>

19
components/token/ActionPanel.tsx
View File

@ -3,7 +3,7 @@ import DepositWithdrawModal from '@components/modals/DepositWithdrawModal'
import Button, { LinkButton } from '@components/shared/Button'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import Modal from '@components/shared/Modal'
import Tooltip from '@components/shared/Tooltip'
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
import UnsettledTrades from '@components/trade/UnsettledTrades'
import { ArrowDownTrayIcon, ArrowUpTrayIcon } from '@heroicons/react/20/solid'
import mangoStore from '@store/mangoStore'
@ -148,18 +148,11 @@ const ActionPanel = ({ bank }: { bank: Bank }) => {
</div>
<div className="flex justify-between border-t border-th-bkg-4 py-3">
<p>{t('rates')}</p>
<div className="flex justify-end space-x-1.5">
<Tooltip content={t('deposit-rate')}>
<p className="cursor-help font-mono text-th-up">
<FormatNumericValue value={depositRate} decimals={2} />%
</p>
</Tooltip>
<span className="text-th-fgd-4">|</span>
<Tooltip content={t('borrow-rate')}>
<p className="cursor-help font-mono text-th-down">
<FormatNumericValue value={borrowRate} decimals={2} />%
</p>
</Tooltip>
<div className="flex justify-end space-x-1.5 font-mono">
<TableRatesDisplay
borrowRate={borrowRate}
depositRate={depositRate}
/>
</div>
</div>
</div>

2
utils/numbers.ts
View File

@ -5,7 +5,7 @@ export const formatNumericValue = (
decimals?: number,
roundUp?: boolean,
): string => {
if (!value) return '–'
if (!value && value !== 0) return '–'
const numberValue = Number(value)
let formattedValue
if (decimals !== undefined) {