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

only use floortodecimal for unformatted values

This commit is contained in:
saml33 2023-01-25 13:54:06 +11:00
parent d25b0dc399
commit f8f022fe9a
9 changed files with 89 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/BorrowForm.tsx
View File

@ -21,7 +21,6 @@ import {
INPUT_TOKEN_DEFAULT,
} from './../utils/constants'
import { notify } from './../utils/notifications'
import { floorToDecimal, formatNumericValue } from './../utils/numbers'
import ActionTokenList from './account/ActionTokenList'
import ButtonGroup from './forms/ButtonGroup'
import Label from './forms/Label'
@ -42,6 +41,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
import AmountWithValue from './shared/AmountWithValue'
import FormatNumericValue from './shared/FormatNumericValue'
import { floorToDecimal } from 'utils/numbers'
interface BorrowFormProps {
onSuccess: () => void
@ -82,17 +82,12 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
const group = mangoStore.getState().group
if (!group || !bank || !mangoAccount) return new Decimal(0)
const amount = getMaxWithdrawForBank(group, bank, mangoAccount, true)
return amount && amount.gt(0)
? floorToDecimal(amount, bank.mintDecimals)
: new Decimal(0)
return amount && amount.gt(0) ? new Decimal(amount) : new Decimal(0)
}, [mangoAccount, bank])
const tokenBalance = useMemo(() => {
if (!bank || !mangoAccount) return new Decimal(0)
const balance = floorToDecimal(
mangoAccount.getTokenBalanceUi(bank),
bank.mintDecimals
)
const balance = new Decimal(mangoAccount.getTokenBalanceUi(bank))
return balance.gt(0) ? balance : new Decimal(0)
}, [bank, mangoAccount])
@ -102,15 +97,19 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
(percentage: string) => {
if (!bank) return
setSizePercentage(percentage)
const amount = (Number(percentage) / 100) * (tokenMax.toNumber() || 0)
setInputAmount(floorToDecimal(amount, bank.mintDecimals).toFixed())
const amount = floorToDecimal(
new Decimal(percentage).div(100).mul(tokenMax),
bank.mintDecimals
)
setInputAmount(amount.toString())
},
[tokenMax, bank]
)
const setMax = useCallback(() => {
if (!bank) return
setInputAmount(formatNumericValue(tokenMax, bank.mintDecimals))
const max = floorToDecimal(tokenMax, bank.mintDecimals)
setInputAmount(max.toString())
handleSizePercentage('100')
}, [bank, tokenMax, handleSizePercentage])
@ -165,14 +164,11 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
bank,
mangoAccount,
true
)
).toNumber()
return {
key,
value,
maxAmount: floorToDecimal(
maxAmount,
bank.mintDecimals
).toNumber(),
maxAmount,
}
})
: []

20
components/DepositForm.tsx
View File

@ -7,7 +7,6 @@ import {
LinkIcon,
} from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import Decimal from 'decimal.js'
import { useTranslation } from 'next-i18next'
import Image from 'next/legacy/image'
import React, { useCallback, useMemo, useState } from 'react'
@ -19,7 +18,6 @@ import {
INPUT_TOKEN_DEFAULT,
} from './../utils/constants'
import { notify } from './../utils/notifications'
import { floorToDecimal, formatNumericValue } from './../utils/numbers'
import { TokenAccount } from './../utils/tokens'
import ActionTokenList from './account/ActionTokenList'
import ButtonGroup from './forms/ButtonGroup'
@ -39,6 +37,8 @@ import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
import useSolBalance from 'hooks/useSolBalance'
import AmountWithValue from './shared/AmountWithValue'
import FormatNumericValue from './shared/FormatNumericValue'
import Decimal from 'decimal.js'
import { floorToDecimal } from 'utils/numbers'
interface DepositFormProps {
onSuccess: () => void
@ -125,17 +125,18 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
}, [walletTokens, selectedToken])
const setMax = useCallback(() => {
setInputAmount(formatNumericValue(tokenMax.maxAmount, tokenMax.maxDecimals))
const max = floorToDecimal(tokenMax.maxAmount, tokenMax.maxDecimals)
setInputAmount(max.toString())
setSizePercentage('100')
}, [tokenMax])
const handleSizePercentage = useCallback(
(percentage: string) => {
setSizePercentage(percentage)
let amount = new Decimal(tokenMax.maxAmount).mul(percentage).div(100)
amount = floorToDecimal(amount, tokenMax.maxDecimals)
const amount = floorToDecimal(
new Decimal(tokenMax.maxAmount).mul(percentage).div(100),
tokenMax.maxDecimals
)
setInputAmount(amount.toString())
},
[tokenMax]
@ -192,10 +193,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
return {
key,
value,
walletBalance: floorToDecimal(
walletBalance.maxAmount,
walletBalance.maxDecimals
).toNumber(),
walletBalance: walletBalance.maxAmount,
walletBalanceValue: walletBalance.maxAmount * value[0].uiPrice!,
}
})

22
components/RepayForm.tsx
View File

@ -13,7 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
import NumberFormat, { NumberFormatValues } from 'react-number-format'
import mangoStore from '@store/mangoStore'
import { notify } from './../utils/notifications'
import { floorToDecimal, formatNumericValue } from './../utils/numbers'
import { formatNumericValue } from './../utils/numbers'
import ActionTokenList from './account/ActionTokenList'
import ButtonGroup from './forms/ButtonGroup'
import Label from './forms/Label'
@ -79,13 +79,20 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
}, [walletTokens, selectedToken])
const borrowAmount = useMemo(() => {
if (!mangoAccount || !bank) return '0'
return mangoAccount.getTokenBorrowsUi(bank)
if (!mangoAccount || !bank) return new Decimal(0)
const amount = new Decimal(
mangoAccount.getTokenBorrowsUi(bank)
).toDecimalPlaces(bank.mintDecimals, Decimal.ROUND_UP)
return amount
}, [bank, mangoAccount])
const setMax = useCallback(() => {
if (!bank) return
setInputAmount(formatNumericValue(borrowAmount, bank.mintDecimals))
const amount = new Decimal(borrowAmount).toDecimalPlaces(
bank.mintDecimals,
Decimal.ROUND_UP
)
setInputAmount(amount.toString())
setSizePercentage('100')
}, [bank, borrowAmount])
@ -93,13 +100,12 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
(percentage: string) => {
if (!bank) return
setSizePercentage(percentage)
let amount: Decimal | number = new Decimal(borrowAmount)
const amount = new Decimal(borrowAmount)
.mul(percentage)
.div(100)
amount = floorToDecimal(amount, bank.mintDecimals).toNumber()
.toDecimalPlaces(bank.mintDecimals, Decimal.ROUND_UP)
setInputAmount(amount.toFixed(bank.mintDecimals))
setInputAmount(amount.toString())
},
[bank, borrowAmount]
)

30
components/WithdrawForm.tsx
View File

@ -18,7 +18,6 @@ import {
INPUT_TOKEN_DEFAULT,
} from './../utils/constants'
import { notify } from './../utils/notifications'
import { floorToDecimal } from './../utils/numbers'
import ActionTokenList from './account/ActionTokenList'
import ButtonGroup from './forms/ButtonGroup'
import Label from './forms/Label'
@ -37,6 +36,7 @@ import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
import { useWallet } from '@solana/wallet-adapter-react'
import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
import AmountWithValue from './shared/AmountWithValue'
import { floorToDecimal } from 'utils/numbers'
interface WithdrawFormProps {
onSuccess: () => void
@ -77,21 +77,29 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
if (!bank || !mangoAccount || !group) return new Decimal(0)
const amount = getMaxWithdrawForBank(group, bank, mangoAccount)
return amount && amount.gt(0)
? floorToDecimal(amount, bank.mintDecimals)
: new Decimal(0)
return amount
}, [mangoAccount, bank, group])
const handleSizePercentage = useCallback(
(percentage: string) => {
if (!bank) return
setSizePercentage(percentage)
const amount = tokenMax.mul(Number(percentage) / 100)
setInputAmount(floorToDecimal(amount, bank.mintDecimals).toFixed())
const amount = floorToDecimal(
new Decimal(tokenMax).mul(percentage).div(100),
bank.mintDecimals
)
setInputAmount(amount.toString())
},
[bank, tokenMax]
)
const setMax = useCallback(() => {
if (!bank) return
const max = floorToDecimal(tokenMax, bank.mintDecimals)
setInputAmount(max.toString())
setSizePercentage('100')
}, [bank, tokenMax])
const handleWithdraw = useCallback(async () => {
const client = mangoStore.getState().client
const group = mangoStore.getState().group
@ -141,16 +149,14 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
group,
bank,
mangoAccount
)
).toNumber()
return {
key,
value,
accountBalance: accountBalance
? floorToDecimal(accountBalance, bank.mintDecimals).toNumber()
: 0,
accountBalance,
accountBalanceValue:
accountBalance && bank.uiPrice
? accountBalance.toNumber() * bank.uiPrice
? accountBalance * bank.uiPrice
: 0,
}
})
@ -223,7 +229,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
className="mb-2"
decimals={bank.mintDecimals}
label={t('max')}
onClick={() => handleSizePercentage('100')}
onClick={setMax}
value={tokenMax}
/>
) : null}

5
components/account/ActionTokenItem.tsx
View File

@ -8,12 +8,14 @@ const ActionTokenItem = ({
bank,
customValue,
onSelect,
roundUp,
showBorrowRates,
showDepositRates,
}: {
bank: Bank
customValue: number
onSelect: (x: string) => void
roundUp?: boolean
showBorrowRates?: boolean
showDepositRates?: boolean
}) => {
@ -67,7 +69,8 @@ const ActionTokenItem = ({
<p className="truncate font-mono text-th-fgd-1">
<FormatNumericValue
value={customValue}
decimals={bank.mintDecimals + 1}
decimals={bank.mintDecimals}
roundUp={roundUp}
/>
</p>
</div>

1
components/account/ActionTokenList.tsx
View File

@ -45,6 +45,7 @@ const ActionTokenList = ({
customValue={bank[valueKey]}
key={bank.value[0].name}
onSelect={onSelect}
roundUp={valueKey === 'borrowAmount'}
showBorrowRates={showBorrowRates}
showDepositRates={showDepositRates}
/>

31
components/modals/UserSetupModal.tsx
View File

@ -25,7 +25,6 @@ import {
} from 'react'
import { ALPHA_DEPOSIT_LIMIT } from 'utils/constants'
import { notify } from 'utils/notifications'
import { floorToDecimal, formatNumericValue } from 'utils/numbers'
import ActionTokenList from '../account/ActionTokenList'
import ButtonGroup from '../forms/ButtonGroup'
import Input from '../forms/Input'
@ -166,10 +165,7 @@ const UserSetupModal = ({
key,
value,
tokenDecimals: walletBalance.maxDecimals,
walletBalance: floorToDecimal(
walletBalance.maxAmount,
walletBalance.maxDecimals
).toNumber(),
walletBalance: walletBalance.maxAmount,
walletBalanceValue: walletBalance.maxAmount * value?.[0].uiPrice,
}
})
@ -210,14 +206,22 @@ const UserSetupModal = ({
tokenMax.amount < Number(depositAmount) ||
(depositToken === 'SOL' && maxSolDeposit <= 0)
const setMax = useCallback(() => {
const max = new Decimal(tokenMax.amount).toDecimalPlaces(
tokenMax.decimals,
Decimal.ROUND_FLOOR
)
setDepositAmount(max.toString())
setSizePercentage('100')
}, [tokenMax])
const handleSizePercentage = useCallback(
(percentage: string) => {
setSizePercentage(percentage)
let amount = new Decimal(tokenMax.amount).mul(percentage).div(100)
if (percentage !== '100') {
amount = floorToDecimal(amount, tokenMax.decimals)
}
const amount = new Decimal(tokenMax.amount)
.mul(percentage)
.div(100)
.toDecimalPlaces(tokenMax.decimals, Decimal.ROUND_FLOOR)
setDepositAmount(amount.toString())
},
[tokenMax]
@ -421,12 +425,7 @@ const UserSetupModal = ({
className="mb-2"
decimals={tokenMax.decimals}
label="Max"
onClick={() => {
setDepositAmount(
formatNumericValue(tokenMax.amount, tokenMax.decimals)
)
setSizePercentage('100')
}}
onClick={setMax}
value={tokenMax.amount}
/>
</div>

29
components/trade/RecentTrades.tsx
View File

@ -1,8 +1,7 @@
import useInterval from '@components/shared/useInterval'
import mangoStore from '@store/mangoStore'
import { useEffect, useMemo } from 'react'
import { floorToDecimal, getDecimalCount } from 'utils/numbers'
import Decimal from 'decimal.js'
import { formatNumericValue, getDecimalCount } from 'utils/numbers'
import { ChartTradeType } from 'types'
import { useTranslation } from 'next-i18next'
import useSelectedMarket from 'hooks/useSelectedMarket'
@ -162,25 +161,21 @@ const RecentTrades = () => {
const side =
trade.side || (trade.takerSide === 0 ? 'bid' : 'ask')
// const price =
// typeof trade.price === 'number'
// ? trade.price
// : trade.price.toNumber()
const formattedPrice = market?.tickSize
? floorToDecimal(
trade.price,
getDecimalCount(market.tickSize)
)
: new Decimal(trade?.price || 0)
const formattedPrice =
market?.tickSize && trade.price
? formatNumericValue(
trade.price,
getDecimalCount(market.tickSize)
)
: trade?.price || 0
// const size = trade?.quantity?.toNumber() || trade?.size
const formattedSize =
market?.minOrderSize && trade.size
? floorToDecimal(
? formatNumericValue(
trade.size,
getDecimalCount(market.minOrderSize)
)
: new Decimal(trade.size || 0)
: trade?.size || 0
return (
<tr className="font-mono text-xs" key={i}>
@ -191,10 +186,10 @@ const RecentTrades = () => {
: 'text-th-down'
}`}
>
{formattedPrice.toFixed()}
{formattedPrice}
</td>
<td className="pb-1.5 text-right text-th-fgd-3">
{formattedSize.toFixed()}
{formattedSize}
</td>
<td className="pb-1.5 text-right text-th-fgd-4">
{trade.time

7
utils/numbers.ts
View File

@ -98,7 +98,7 @@ export const floorToDecimal = (
): Decimal => {
const decimal = value instanceof Decimal ? value : new Decimal(value)
return decimal.toDecimalPlaces(decimals, Decimal.ROUND_DOWN)
return decimal.toDecimalPlaces(decimals, Decimal.ROUND_FLOOR)
}
const usdFormatter0 = Intl.NumberFormat('en', {
@ -130,9 +130,10 @@ export const countLeadingZeros = (x: number) => {
}
}
export const trimDecimals = (n: number, digits: number) => {
export const trimDecimals = (n: number | Decimal, digits: number) => {
const number = Number(n)
const step = Math.pow(10, digits || 0)
const temp = Math.trunc(step * n)
const temp = Math.trunc(step * number)
return temp / step
}