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

format usd values and small ui fixes

This commit is contained in:
saml33 2021-08-15 23:31:59 +10:00
parent 935cd46345
commit df6e97763a
13 changed files with 122 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/BalancesTable.tsx
View File

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

16
components/DayHighLow.tsx
View File

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

25
components/MarginInfo.tsx
View File

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

3
components/MarketHeader.tsx
View File

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

14
components/MarketPosition.tsx
View File

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

4
components/OpenOrdersTable.tsx
View File

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

2
components/PageBodyContainer.tsx
View File

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

28
components/PositionsTable.tsx
View File

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

2
components/TradeHistoryTable.tsx
View File

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

10
components/TradePageGrid.tsx
View File

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

26
components/account-page/AccountBorrows.tsx
View File

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

18
components/account-page/AccountOverview.tsx
View File

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

16
utils/index.ts
View File

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