format usd values and small ui fixes
This commit is contained in:
parent
935cd46345
commit
df6e97763a
|
@ -50,6 +50,14 @@ const BalancesTable = () => {
|
|||
}
|
||||
}
|
||||
|
||||
const filteredBalances = balances.filter(
|
||||
(bal) =>
|
||||
+bal.marginDeposits > 0 ||
|
||||
+bal.borrows > 0 ||
|
||||
bal.orders > 0 ||
|
||||
bal.unsettled > 0
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col py-4`}>
|
||||
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
|
||||
|
@ -61,7 +69,7 @@ const BalancesTable = () => {
|
|||
borrows.gt(ZERO_I80F48) && marginDeposits.gt(ZERO_I80F48)
|
||||
)) ? (
|
||||
<div
|
||||
className={`flex items-center justify-between px-4 py-2 mb-2 rounded-md bg-th-bkg-1`}
|
||||
className={`flex items-center justify-between px-6 py-3 mb-2 rounded-md bg-th-bkg-1`}
|
||||
>
|
||||
<div className="flex items-center text-fgd-1 font-semibold pr-4">
|
||||
You have unsettled funds
|
||||
|
@ -76,7 +84,7 @@ const BalancesTable = () => {
|
|||
<Button onClick={handleSettleAll}>Settle All</Button>
|
||||
</div>
|
||||
) : null}
|
||||
{balances.length ? (
|
||||
{filteredBalances.length > 0 ? (
|
||||
<div
|
||||
className={`overflow-hidden border-b border-th-bkg-2 sm:rounded-md`}
|
||||
>
|
||||
|
@ -85,44 +93,44 @@ const BalancesTable = () => {
|
|||
<Tr className="text-th-fgd-3 text-xs">
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-2 text-left font-normal`}
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
Asset
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-2 text-left font-normal`}
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
Deposits
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-2 text-left font-normal`}
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
Borrows
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-2 text-left font-normal`}
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
In Orders
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-2 text-left font-normal`}
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
Unsettled
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-2 text-left font-normal`}
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
Net
|
||||
</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{balances.map((balance, index) => {
|
||||
{filteredBalances.map((balance, index) => {
|
||||
const tokenConfig = getTokenBySymbol(
|
||||
mangoGroupConfig,
|
||||
balance.symbol.toUpperCase()
|
||||
|
@ -135,7 +143,7 @@ const BalancesTable = () => {
|
|||
`}
|
||||
>
|
||||
<Td
|
||||
className={`flex items-center px-4 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
className={`flex items-center px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
@ -148,29 +156,41 @@ const BalancesTable = () => {
|
|||
{balance.symbol}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.marginDeposits.toFixed(tokenConfig.decimals)}
|
||||
{+balance.marginDeposits > 0
|
||||
? balance.marginDeposits.toFixed(
|
||||
tokenConfig.decimals
|
||||
)
|
||||
: 0}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.borrows.toFixed(tokenConfig.decimals)}
|
||||
{+balance.borrows > 0
|
||||
? balance.marginDeposits.toFixed(
|
||||
tokenConfig.decimals
|
||||
)
|
||||
: 0}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.orders}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.unsettled}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.net.toFixed(tokenConfig.decimals)}
|
||||
{+balance.net === 0
|
||||
? 0
|
||||
: balance.marginDeposits.toFixed(
|
||||
tokenConfig.decimals
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
)
|
||||
|
|
|
@ -1,14 +1,4 @@
|
|||
function formatRangePrice(price) {
|
||||
if (!price) return null
|
||||
const priceAsFloat = parseFloat(price)
|
||||
if (priceAsFloat > 1000) {
|
||||
return priceAsFloat.toFixed(0)
|
||||
} else if (priceAsFloat > 1) {
|
||||
return priceAsFloat.toFixed(2)
|
||||
} else {
|
||||
return priceAsFloat.toFixed(4)
|
||||
}
|
||||
}
|
||||
import { formatUsdValue } from '../utils'
|
||||
|
||||
const DayHighLow = ({ high, low, latest }) => {
|
||||
let rangePercent = 0
|
||||
|
@ -26,7 +16,7 @@ const DayHighLow = ({ high, low, latest }) => {
|
|||
<div className="text-center text-th-fgd-3 tiny-text">24h Range</div>
|
||||
<div className="flex items-center">
|
||||
<div className="pr-2 text-th-fgd-1 text-xs">
|
||||
${formatRangePrice(low?.baseOraclePrice)}
|
||||
{formatUsdValue(low?.baseOraclePrice)}
|
||||
</div>
|
||||
<div className="h-1.5 flex rounded bg-th-bkg-3 w-24">
|
||||
<div
|
||||
|
@ -37,7 +27,7 @@ const DayHighLow = ({ high, low, latest }) => {
|
|||
></div>
|
||||
</div>
|
||||
<div className="pl-2 text-th-fgd-1 text-xs">
|
||||
${formatRangePrice(high?.baseOraclePrice)}
|
||||
{formatUsdValue(high?.baseOraclePrice)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
import { HeartIcon } from '@heroicons/react/outline'
|
||||
import { useMemo } from 'react'
|
||||
import useMangoStore, { mangoClient, MNGO_INDEX } from '../stores/useMangoStore'
|
||||
import { formatUsdValue } from '../utils'
|
||||
import { notify } from '../utils/notifications'
|
||||
import { LinkButton } from './Button'
|
||||
import FloatingElement from './FloatingElement'
|
||||
|
@ -78,12 +79,8 @@ export default function MarginInfo() {
|
|||
<div>
|
||||
<div>
|
||||
<div className="flex justify-between pt-2 pb-2">
|
||||
<Tooltip content="Account value">
|
||||
<div className="cursor-help font-normal text-th-fgd-3 leading-4 border-b border-th-fgd-3 border-dashed border-opacity-20 default-transition hover:border-th-bkg-2">
|
||||
Equity
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div className="text-th-fgd-1">${equity.toFixed(2)}</div>
|
||||
<div className="font-normal text-th-fgd-3 leading-4">Equity</div>
|
||||
<div className="text-th-fgd-1">{formatUsdValue(+equity)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2 pb-2">
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
|
@ -92,7 +89,7 @@ export default function MarginInfo() {
|
|||
<div className="text-th-fgd-1">
|
||||
{mangoAccount
|
||||
? mangoAccount.getLeverage(mangoGroup, mangoCache).toFixed(2)
|
||||
: '0.00'}
|
||||
: '--'}
|
||||
x
|
||||
</div>
|
||||
</div>
|
||||
|
@ -101,10 +98,11 @@ export default function MarginInfo() {
|
|||
Total Assets Value
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
$
|
||||
{mangoAccount
|
||||
? mangoAccount.getAssetsVal(mangoGroup, mangoCache).toFixed(2)
|
||||
: '0.00'}
|
||||
? formatUsdValue(
|
||||
+mangoAccount.getAssetsVal(mangoGroup, mangoCache)
|
||||
)
|
||||
: '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between pt-2 pb-2`}>
|
||||
|
@ -112,10 +110,11 @@ export default function MarginInfo() {
|
|||
Total Liabilities Value
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
$
|
||||
{mangoAccount
|
||||
? mangoAccount.getLiabsVal(mangoGroup, mangoCache).toFixed(2)
|
||||
: 0}
|
||||
? formatUsdValue(
|
||||
+mangoAccount.getLiabsVal(mangoGroup, mangoCache)
|
||||
)
|
||||
: '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between pt-2 pb-2`}>
|
||||
|
|
|
@ -8,6 +8,7 @@ import ManualRefresh from './ManualRefresh'
|
|||
import useOraclePrice from '../hooks/useOraclePrice'
|
||||
import DayHighLow from './DayHighLow'
|
||||
import { useEffect } from 'react'
|
||||
import { formatUsdValue } from '../utils'
|
||||
|
||||
function calculateFundingRate(perpStats, perpMarket) {
|
||||
const oldestStat = perpStats[perpStats.length - 1]
|
||||
|
@ -153,7 +154,7 @@ const MarketHeader = () => {
|
|||
<div className="pr-6">
|
||||
<div className="text-th-fgd-3 tiny-text">Oracle price</div>
|
||||
<div className="font-semibold text-th-fgd-1 text-xs">
|
||||
{oraclePrice ? oraclePrice.toFixed(2) : '--'}
|
||||
{oraclePrice ? formatUsdValue(oraclePrice) : '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-4">
|
||||
|
|
|
@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react'
|
|||
import FloatingElement from './FloatingElement'
|
||||
import { ElementTitle } from './styles'
|
||||
import useMangoStore, { mangoClient } from '../stores/useMangoStore'
|
||||
import { i80f48ToPercent, tokenPrecision, usdFormatter } from '../utils/index'
|
||||
import { i80f48ToPercent, tokenPrecision, formatUsdValue } from '../utils/index'
|
||||
import DepositModal from './DepositModal'
|
||||
import WithdrawModal from './WithdrawModal'
|
||||
import Button from './Button'
|
||||
|
@ -104,7 +104,7 @@ export default function MarketPosition() {
|
|||
side={perpAccount.basePosition.gt(ZERO_BN) ? 'long' : 'short'}
|
||||
/>
|
||||
) : (
|
||||
'-'
|
||||
'--'
|
||||
)}
|
||||
</div>
|
||||
<div className={`flex justify-between pt-2 pb-2`}>
|
||||
|
@ -124,7 +124,7 @@ export default function MarketPosition() {
|
|||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{perpAccount
|
||||
? usdFormatter.format(
|
||||
? formatUsdValue(
|
||||
selectedMarket.baseLotsToNumber(perpAccount.basePosition) *
|
||||
mangoGroup.getPrice(marketIndex, mangoGroupCache).toNumber()
|
||||
)
|
||||
|
@ -136,7 +136,6 @@ export default function MarketPosition() {
|
|||
Avg entry price
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
$
|
||||
{perpAccount
|
||||
? getAvgEntryPrice(
|
||||
mangoAccount,
|
||||
|
@ -152,7 +151,6 @@ export default function MarketPosition() {
|
|||
Break-even price
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
$
|
||||
{perpAccount
|
||||
? getBreakEvenPrice(
|
||||
mangoAccount,
|
||||
|
@ -169,7 +167,7 @@ export default function MarketPosition() {
|
|||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{perpAccount
|
||||
? usdFormatter.format(
|
||||
? formatUsdValue(
|
||||
+nativeI80F48ToUi(
|
||||
perpAccount.getPnl(
|
||||
mangoGroup.perpMarkets[marketIndex],
|
||||
|
@ -208,10 +206,10 @@ export default function MarketPosition() {
|
|||
const tokenIndex = mangoGroup.getTokenIndex(mintKey)
|
||||
return (
|
||||
<div
|
||||
className="border border-th-bkg-3 mb-4 p-3 rounded-md"
|
||||
className="border border-th-bkg-4 mb-4 p-3 rounded-md"
|
||||
key={mintKey.toString()}
|
||||
>
|
||||
<div className="border-b border-th-bkg-3 flex items-center justify-between mb-3 pb-3">
|
||||
<div className="border-b border-th-bkg-4 flex items-center justify-between mb-3 pb-3">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
|
|
|
@ -185,7 +185,7 @@ const OpenOrdersTable = () => {
|
|||
<Td
|
||||
className={`px-6 py-2 whitespace-nowrap text-th-fgd-1`}
|
||||
>
|
||||
{usdFormatter.format(order.price)}
|
||||
{usdFormatter(order.price)}
|
||||
</Td>
|
||||
<Td className={`px-6 py-2 whitespace-nowrap`}>
|
||||
<div className={`flex justify-end`}>
|
||||
|
@ -212,7 +212,7 @@ const OpenOrdersTable = () => {
|
|||
<div
|
||||
className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
|
||||
>
|
||||
No open orders.
|
||||
No open orders
|
||||
{asPath === '/account' ? (
|
||||
<Link href={'/'}>
|
||||
<a
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
const PageBodyContainer = ({ children }) => (
|
||||
<div className="min-h-screen grid grid-cols-12 gap-4 pb-10">
|
||||
<div className="col-span-12 px-4 xl:col-start-1 xl:col-span-11 2xl:col-start-3 2xl:col-span-8">
|
||||
<div className="col-span-12 px-4 xl:px-10 xl:col-span-12 2xl:col-start-2 2xl:col-span-10">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,7 @@ import BN from 'bn.js'
|
|||
import SideBadge from './SideBadge'
|
||||
import { useState } from 'react'
|
||||
import Loading from './Loading'
|
||||
import { usdFormatter } from '../utils'
|
||||
import { formatUsdValue, usdFormatter } from '../utils'
|
||||
import useTradeHistory from '../hooks/useTradeHistory'
|
||||
|
||||
export function getAvgEntryPrice(
|
||||
|
@ -29,9 +29,13 @@ export function getAvgEntryPrice(
|
|||
let avgEntryPrice = '--'
|
||||
if (perpTradeHistory.length) {
|
||||
try {
|
||||
avgEntryPrice = perpAccount
|
||||
.getAverageOpenPrice(mangoAccount, perpMarket, perpTradeHistory)
|
||||
.toFixed(2)
|
||||
avgEntryPrice = formatUsdValue(
|
||||
perpAccount.getAverageOpenPrice(
|
||||
mangoAccount,
|
||||
perpMarket,
|
||||
perpTradeHistory
|
||||
)
|
||||
)
|
||||
} catch {
|
||||
avgEntryPrice = '--'
|
||||
}
|
||||
|
@ -48,9 +52,13 @@ export function getBreakEvenPrice(
|
|||
let breakEvenPrice = '--'
|
||||
if (perpTradeHistory.length) {
|
||||
try {
|
||||
breakEvenPrice = perpAccount
|
||||
.getBreakEvenPrice(mangoAccount, perpMarket, perpTradeHistory)
|
||||
.toFixed(2)
|
||||
breakEvenPrice = formatUsdValue(
|
||||
perpAccount.getBreakEvenPrice(
|
||||
mangoAccount,
|
||||
perpMarket,
|
||||
perpTradeHistory
|
||||
)
|
||||
)
|
||||
} catch {
|
||||
breakEvenPrice = '--'
|
||||
}
|
||||
|
@ -219,7 +227,7 @@ const PositionsTable = () => {
|
|||
scope="col"
|
||||
className="px-2 py-2 text-left font-normal"
|
||||
>
|
||||
{usdFormatter.format(
|
||||
{usdFormatter(
|
||||
perpMarket.baseLotsToNumber(
|
||||
perpAccount.basePosition
|
||||
) *
|
||||
|
@ -229,7 +237,6 @@ const PositionsTable = () => {
|
|||
)}
|
||||
</Th>
|
||||
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
$
|
||||
{getAvgEntryPrice(
|
||||
mangoAccount,
|
||||
perpAccount,
|
||||
|
@ -238,7 +245,6 @@ const PositionsTable = () => {
|
|||
)}
|
||||
</Td>
|
||||
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
$
|
||||
{getBreakEvenPrice(
|
||||
mangoAccount,
|
||||
perpAccount,
|
||||
|
@ -247,7 +253,7 @@ const PositionsTable = () => {
|
|||
)}
|
||||
</Td>
|
||||
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{usdFormatter.format(
|
||||
{usdFormatter(
|
||||
+nativeI80F48ToUi(
|
||||
perpAccount.getPnl(perpMarketInfo, price),
|
||||
marketConfig.quoteDecimals
|
||||
|
|
|
@ -239,7 +239,7 @@ const TradeHistoryTable = () => {
|
|||
</div>
|
||||
) : (
|
||||
<div className="w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md">
|
||||
No {marketConfig.name} trade history.
|
||||
No {marketConfig.name} trade history
|
||||
{asPath === '/account' ? (
|
||||
<Link href={'/'}>
|
||||
<a className="inline-flex ml-2 py-0">Make a trade</a>
|
||||
|
|
|
@ -26,21 +26,21 @@ export const defaultLayouts = {
|
|||
{ i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
|
||||
{ i: 'marketPosition', x: 9, y: 3, w: 3, h: 15 },
|
||||
{ i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
|
||||
{ i: 'marginInfo', x: 9, y: 4, w: 3, h: 16 },
|
||||
{ i: 'marginInfo', x: 9, y: 4, w: 3, h: 15 },
|
||||
],
|
||||
lg: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 29, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'userInfo', x: 0, y: 3, w: 12, h: 19, minW: 6 },
|
||||
],
|
||||
md: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 29, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
|
||||
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
|
||||
|
|
|
@ -6,7 +6,7 @@ import {
|
|||
} from '@blockworks-foundation/mango-client'
|
||||
import useMangoStore from '../../stores/useMangoStore'
|
||||
import { useBalances } from '../../hooks/useBalances'
|
||||
import { tokenPrecision } from '../../utils/index'
|
||||
import { formatUsdValue, tokenPrecision, usdFormatter } from '../../utils/index'
|
||||
import WithdrawModal from '../WithdrawModal'
|
||||
import Button from '../Button'
|
||||
import DepositModal from '../DepositModal'
|
||||
|
@ -48,7 +48,7 @@ export default function AccountBorrows() {
|
|||
<div className="border border-th-red flex items-center justify-between p-2 rounded">
|
||||
<div className="pr-4 text-xs text-th-fgd-3">Total Borrow Value:</div>
|
||||
<span>
|
||||
${mangoAccount.getLiabsVal(mangoGroup, mangoCache).toFixed(2)}
|
||||
{formatUsdValue(+mangoAccount.getLiabsVal(mangoGroup, mangoCache))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -108,10 +108,11 @@ export default function AccountBorrows() {
|
|||
<Td
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
$
|
||||
{asset.borrows
|
||||
.mul(mangoGroup.getPrice(tokenIndex, mangoCache))
|
||||
.toFixed(tokenPrecision[asset.symbol])}
|
||||
{formatUsdValue(
|
||||
asset.borrows.mul(
|
||||
mangoGroup.getPrice(tokenIndex, mangoCache)
|
||||
)
|
||||
)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
|
@ -195,7 +196,7 @@ export default function AccountBorrows() {
|
|||
<Td
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
${mangoGroup.getPrice(tokenIndex, mangoCache).toFixed(2)}
|
||||
{formatUsdValue(mangoGroup.getPrice(tokenIndex, mangoCache))}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
|
@ -207,11 +208,12 @@ export default function AccountBorrows() {
|
|||
<Td
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
$
|
||||
{mangoGroup
|
||||
.getUiTotalDeposit(tokenIndex)
|
||||
.sub(mangoGroup.getUiTotalBorrow(tokenIndex))
|
||||
.toFixed(2)}
|
||||
{usdFormatter(
|
||||
mangoGroup
|
||||
.getUiTotalDeposit(tokenIndex)
|
||||
.sub(mangoGroup.getUiTotalBorrow(tokenIndex)),
|
||||
0
|
||||
)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
|
|
|
@ -26,7 +26,7 @@ import useMangoStore, {
|
|||
import { useBalances } from '../../hooks/useBalances'
|
||||
import { useSortableData } from '../../hooks/useSortableData'
|
||||
import useLocalStorageState from '../../hooks/useLocalStorageState'
|
||||
import { sleep, usdFormatter, tokenPrecision } from '../../utils'
|
||||
import { sleep, tokenPrecision, formatUsdValue } from '../../utils'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import { Market } from '@project-serum/serum'
|
||||
import SideBadge from '../SideBadge'
|
||||
|
@ -249,8 +249,8 @@ export default function AccountOverview() {
|
|||
<div className="flex items-center pb-3">
|
||||
<CurrencyDollarIcon className="flex-shrink-0 h-7 w-7 mr-1.5 text-th-primary" />
|
||||
<StyledAccountValue className="font-bold text-th-fgd-1">
|
||||
{usdFormatter.format(
|
||||
+mangoAccount.computeValue(mangoGroup, mangoCache).toFixed(2)
|
||||
{formatUsdValue(
|
||||
+mangoAccount.computeValue(mangoGroup, mangoCache)
|
||||
)}
|
||||
</StyledAccountValue>
|
||||
</div>
|
||||
|
@ -260,8 +260,8 @@ export default function AccountOverview() {
|
|||
<div className="flex items-center pb-3">
|
||||
<ChartBarIcon className="flex-shrink-0 h-7 w-7 mr-1.5 text-th-primary" />
|
||||
<StyledAccountValue className="font-bold text-th-fgd-1">
|
||||
{usdFormatter.format(
|
||||
+mangoAccount.computeValue(mangoGroup, mangoCache).toFixed(2)
|
||||
{formatUsdValue(
|
||||
+mangoAccount.computeValue(mangoGroup, mangoCache)
|
||||
)}
|
||||
</StyledAccountValue>
|
||||
</div>
|
||||
|
@ -356,7 +356,7 @@ export default function AccountOverview() {
|
|||
<div className="pb-0.5 text-xs text-th-fgd-3">Total Assets Value</div>
|
||||
<div className="flex items-center">
|
||||
<div className="text-lg text-th-fgd-1">
|
||||
{usdFormatter.format(
|
||||
{formatUsdValue(
|
||||
+mangoAccount.getAssetsVal(mangoGroup, mangoCache)
|
||||
)}
|
||||
</div>
|
||||
|
@ -368,7 +368,7 @@ export default function AccountOverview() {
|
|||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="text-lg text-th-fgd-1">
|
||||
{usdFormatter.format(
|
||||
{formatUsdValue(
|
||||
+mangoAccount.getLiabsVal(mangoGroup, mangoCache)
|
||||
)}
|
||||
</div>
|
||||
|
@ -550,12 +550,12 @@ export default function AccountOverview() {
|
|||
<Td
|
||||
className={`px-6 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{usdFormatter.format(pos.price)}
|
||||
{formatUsdValue(pos.price)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-2 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{usdFormatter.format(pos.value)}
|
||||
{formatUsdValue(pos.value)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-2 whitespace-nowrap text-sm text-th-green`}
|
||||
|
|
|
@ -299,7 +299,15 @@ export async function getOrderBookAccountInfos(
|
|||
return await getMultipleAccounts(DEFAULT_CONNECTION, orderBookPks)
|
||||
}
|
||||
|
||||
export const usdFormatter = new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
})
|
||||
export const usdFormatter = (value, decimals = 2) =>
|
||||
new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
}).format(value)
|
||||
|
||||
export const formatUsdValue = (value) => {
|
||||
const precision = value >= 1 || value <= -1 ? 2 : value === 0 ? 0 : 4
|
||||
return usdFormatter(value, precision)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue