component for interest rates display
This commit is contained in:
parent
55754086b9
commit
74660e08fb
|
@ -50,6 +50,7 @@ import { floorToDecimal } from 'utils/numbers'
|
||||||
import SheenLoader from './shared/SheenLoader'
|
import SheenLoader from './shared/SheenLoader'
|
||||||
import useAccountInterest from 'hooks/useAccountInterest'
|
import useAccountInterest from 'hooks/useAccountInterest'
|
||||||
import { handleGoToTradePage } from 'utils/markets'
|
import { handleGoToTradePage } from 'utils/markets'
|
||||||
|
import TableRatesDisplay from './shared/TableRatesDisplay'
|
||||||
|
|
||||||
export const handleOpenCloseBorrowModal = (borrowBank: Bank) => {
|
export const handleOpenCloseBorrowModal = (borrowBank: Bank) => {
|
||||||
const group = mangoStore.getState().group
|
const group = mangoStore.getState().group
|
||||||
|
@ -424,25 +425,10 @@ const TokenList = () => {
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<div className="flex justify-end space-x-1.5">
|
<div className="flex justify-end space-x-1.5">
|
||||||
<Tooltip content={t('deposit-rate')}>
|
<TableRatesDisplay
|
||||||
<p className="cursor-help text-th-up">
|
borrowRate={borrowRate}
|
||||||
<FormatNumericValue
|
depositRate={depositRate}
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
|
@ -601,15 +587,12 @@ const MobileTokenListItem = ({ data }: { data: TableData }) => {
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
|
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
|
||||||
<p className="space-x-2 font-mono">
|
<div className="flex space-x-1.5 font-mono">
|
||||||
<span className="text-th-up">
|
<TableRatesDisplay
|
||||||
<FormatNumericValue value={depositRate} decimals={2} />%
|
borrowRate={borrowRate}
|
||||||
</span>
|
depositRate={depositRate}
|
||||||
<span className="font-normal text-th-fgd-4">|</span>
|
/>
|
||||||
<span className="text-th-down">
|
</div>
|
||||||
<FormatNumericValue value={borrowRate} decimals={2} />%
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<ActionsMenu bank={bank} />
|
<ActionsMenu bank={bank} />
|
||||||
|
|
|
@ -17,6 +17,7 @@ import useThemeWrapper from 'hooks/useThemeWrapper'
|
||||||
import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc'
|
import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc'
|
||||||
import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
|
import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
|
||||||
import WatchlistButton from './WatchlistButton'
|
import WatchlistButton from './WatchlistButton'
|
||||||
|
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
|
||||||
|
|
||||||
const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
|
const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
|
||||||
const { t } = useTranslation(['common', 'explore', 'trade'])
|
const { t } = useTranslation(['common', 'explore', 'trade'])
|
||||||
|
@ -144,13 +145,10 @@ const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
|
||||||
<p className="tooltip-underline mb-1">{t('rates')}</p>
|
<p className="tooltip-underline mb-1">{t('rates')}</p>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<div className="flex space-x-1.5 font-mono">
|
<div className="flex space-x-1.5 font-mono">
|
||||||
<p className="text-th-up">
|
<TableRatesDisplay
|
||||||
<FormatNumericValue value={depositRate} decimals={2} />%
|
borrowRate={borrowRate}
|
||||||
</p>
|
depositRate={depositRate}
|
||||||
<span className="text-th-fgd-4">|</span>
|
/>
|
||||||
<p className="text-th-down">
|
|
||||||
<FormatNumericValue value={borrowRate} decimals={2} />%
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -37,6 +37,7 @@ import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
|
||||||
import WatchlistButton from './WatchlistButton'
|
import WatchlistButton from './WatchlistButton'
|
||||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||||
import { TOKEN_WATCHLIST_KEY } from 'utils/constants'
|
import { TOKEN_WATCHLIST_KEY } from 'utils/constants'
|
||||||
|
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
|
||||||
|
|
||||||
type TableData = {
|
type TableData = {
|
||||||
assetWeight: string
|
assetWeight: string
|
||||||
|
@ -365,21 +366,10 @@ const SpotTable = ({ tokens }: { tokens: BankWithMarketData[] }) => {
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<div className="flex justify-end space-x-1.5">
|
<div className="flex justify-end space-x-1.5">
|
||||||
<p className="text-th-up">
|
<TableRatesDisplay
|
||||||
<FormatNumericValue
|
borrowRate={borrowRate}
|
||||||
value={depositRate}
|
depositRate={depositRate}
|
||||||
decimals={2}
|
/>
|
||||||
/>
|
|
||||||
%
|
|
||||||
</p>
|
|
||||||
<span className="text-th-fgd-4">|</span>
|
|
||||||
<p className="text-th-down">
|
|
||||||
<FormatNumericValue
|
|
||||||
value={borrowRate}
|
|
||||||
decimals={2}
|
|
||||||
/>
|
|
||||||
%
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
|
@ -547,14 +537,11 @@ const MobileSpotItem = ({ data }: { data: TableData }) => {
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
|
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
|
||||||
<div className="flex space-x-1.5">
|
<div className="flex space-x-1.5 font-mono">
|
||||||
<p className="font-mono text-th-up">
|
<TableRatesDisplay
|
||||||
<FormatNumericValue value={depositRate} decimals={2} />%
|
borrowRate={borrowRate}
|
||||||
</p>
|
depositRate={depositRate}
|
||||||
<span className="text-th-fgd-4">|</span>
|
/>
|
||||||
<p className="font-mono text-th-down">
|
|
||||||
<FormatNumericValue value={borrowRate} decimals={2} />%
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
|
|
|
@ -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
|
|
@ -17,7 +17,6 @@ import {
|
||||||
TrHead,
|
TrHead,
|
||||||
} from '@components/shared/TableElements'
|
} from '@components/shared/TableElements'
|
||||||
import useMangoGroup from 'hooks/useMangoGroup'
|
import useMangoGroup from 'hooks/useMangoGroup'
|
||||||
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
|
||||||
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
|
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
|
||||||
import useBanksWithBalances from 'hooks/useBanksWithBalances'
|
import useBanksWithBalances from 'hooks/useBanksWithBalances'
|
||||||
import Decimal from 'decimal.js'
|
import Decimal from 'decimal.js'
|
||||||
|
@ -25,6 +24,7 @@ import { useCallback } from 'react'
|
||||||
import { useSortableData } from 'hooks/useSortableData'
|
import { useSortableData } from 'hooks/useSortableData'
|
||||||
import TableTokenName from '@components/shared/TableTokenName'
|
import TableTokenName from '@components/shared/TableTokenName'
|
||||||
import { formatTokenSymbol } from 'utils/tokens'
|
import { formatTokenSymbol } from 'utils/tokens'
|
||||||
|
import TableRatesDisplay from '@components/shared/TableRatesDisplay'
|
||||||
|
|
||||||
export const goToTokenPage = (token: string, router: NextRouter) => {
|
export const goToTokenPage = (token: string, router: NextRouter) => {
|
||||||
const query = { ...router.query, ['token']: token }
|
const query = { ...router.query, ['token']: token }
|
||||||
|
@ -253,18 +253,10 @@ const TokenOverviewTable = () => {
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<div className="flex justify-end space-x-1.5">
|
<div className="flex justify-end space-x-1.5">
|
||||||
<p className="text-th-up">
|
<TableRatesDisplay
|
||||||
<FormatNumericValue
|
borrowRate={borrowRate}
|
||||||
value={depositRate}
|
depositRate={depositRate}
|
||||||
decimals={2}
|
/>
|
||||||
/>
|
|
||||||
%
|
|
||||||
</p>
|
|
||||||
<span className="text-th-fgd-4">|</span>
|
|
||||||
<p className="text-th-down">
|
|
||||||
<FormatNumericValue value={borrowRate} decimals={2} />
|
|
||||||
%
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
|
@ -369,25 +361,12 @@ const TokenOverviewTable = () => {
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<p className="text-xs">{t('rates')}</p>
|
<p className="text-xs">{t('rates')}</p>
|
||||||
<p className="space-x-2">
|
<div className="flex space-x-1.5 font-mono">
|
||||||
<span className="font-mono text-th-up">
|
<TableRatesDisplay
|
||||||
<FormatNumericValue
|
borrowRate={borrowRate}
|
||||||
value={depositRate}
|
depositRate={depositRate}
|
||||||
decimals={2}
|
/>
|
||||||
/>
|
</div>
|
||||||
%
|
|
||||||
</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>
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<p className="text-xs">{t('utilization')}</p>
|
<p className="text-xs">{t('utilization')}</p>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import DepositWithdrawModal from '@components/modals/DepositWithdrawModal'
|
||||||
import Button, { LinkButton } from '@components/shared/Button'
|
import Button, { LinkButton } from '@components/shared/Button'
|
||||||
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
||||||
import Modal from '@components/shared/Modal'
|
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 UnsettledTrades from '@components/trade/UnsettledTrades'
|
||||||
import { ArrowDownTrayIcon, ArrowUpTrayIcon } from '@heroicons/react/20/solid'
|
import { ArrowDownTrayIcon, ArrowUpTrayIcon } from '@heroicons/react/20/solid'
|
||||||
import mangoStore from '@store/mangoStore'
|
import mangoStore from '@store/mangoStore'
|
||||||
|
@ -148,18 +148,11 @@ const ActionPanel = ({ bank }: { bank: Bank }) => {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-t border-th-bkg-4 py-3">
|
<div className="flex justify-between border-t border-th-bkg-4 py-3">
|
||||||
<p>{t('rates')}</p>
|
<p>{t('rates')}</p>
|
||||||
<div className="flex justify-end space-x-1.5">
|
<div className="flex justify-end space-x-1.5 font-mono">
|
||||||
<Tooltip content={t('deposit-rate')}>
|
<TableRatesDisplay
|
||||||
<p className="cursor-help font-mono text-th-up">
|
borrowRate={borrowRate}
|
||||||
<FormatNumericValue value={depositRate} decimals={2} />%
|
depositRate={depositRate}
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@ export const formatNumericValue = (
|
||||||
decimals?: number,
|
decimals?: number,
|
||||||
roundUp?: boolean,
|
roundUp?: boolean,
|
||||||
): string => {
|
): string => {
|
||||||
if (!value) return '–'
|
if (!value && value !== 0) return '–'
|
||||||
const numberValue = Number(value)
|
const numberValue = Number(value)
|
||||||
let formattedValue
|
let formattedValue
|
||||||
if (decimals !== undefined) {
|
if (decimals !== undefined) {
|
||||||
|
|
Loading…
Reference in New Issue