prevent leverage slider from converting swap input to string
use Decimal in more places
This commit is contained in:
parent
51e1ba37a0
commit
5e879c1c69
|
@ -93,9 +93,8 @@ const JupiterRouteInfo = ({
|
|||
|
||||
const amountOut = useMemo(() => {
|
||||
if (!selectedRoute || !outputTokenInfo) return
|
||||
return toUiDecimals(
|
||||
JSBI.toNumber(selectedRoute.outAmount),
|
||||
outputTokenInfo.decimals
|
||||
return new Decimal(selectedRoute.outAmount.toString()).div(
|
||||
10 ** outputTokenInfo.decimals
|
||||
)
|
||||
}, [selectedRoute, outputTokenInfo])
|
||||
|
||||
|
@ -256,14 +255,13 @@ const JupiterRouteInfo = ({
|
|||
{swapRate ? (
|
||||
<>
|
||||
1 {inputTokenInfo!.name} ≈{' '}
|
||||
{formatDecimal(amountOut / amountIn.toNumber(), 6)}{' '}
|
||||
{amountOut.div(amountIn).toFixed()}{' '}
|
||||
{outputTokenInfo?.symbol}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
1 {outputTokenInfo?.symbol} ≈{' '}
|
||||
{formatDecimal(amountIn.toNumber() / amountOut, 6)}{' '}
|
||||
{inputTokenInfo!.name}
|
||||
{amountIn.div(amountOut).toFixed()} {inputTokenInfo!.name}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import Decimal from 'decimal.js'
|
||||
import { ChangeEvent, useEffect, useRef, useState } from 'react'
|
||||
import mangoStore from '../../store/mangoStore'
|
||||
import { useTokenMax } from './useTokenMax'
|
||||
|
@ -30,7 +31,7 @@ const LeverageSlider = ({
|
|||
|
||||
useEffect(() => {
|
||||
if (amount) {
|
||||
onChange(amount.toString())
|
||||
onChange(new Decimal(amount).toFixed())
|
||||
setValue(amount)
|
||||
}
|
||||
}, [amount])
|
||||
|
@ -82,7 +83,7 @@ export const SwapLeverageSlider = ({
|
|||
) : (
|
||||
<LeverageSlider
|
||||
amount={amount}
|
||||
leverageMax={amountWithBorrow}
|
||||
leverageMax={amountWithBorrow.toNumber()}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -82,7 +82,7 @@ const SwapForm = () => {
|
|||
}, [routes])
|
||||
|
||||
useEffect(() => {
|
||||
setAmountInFormValue('0')
|
||||
setAmountInFormValue('')
|
||||
}, [useMargin])
|
||||
|
||||
const handleAmountInChange = useCallback((e: NumberFormatValues) => {
|
||||
|
@ -168,7 +168,7 @@ const SwapForm = () => {
|
|||
},
|
||||
{
|
||||
mintPk: new PublicKey(outputTokenInfo.address),
|
||||
uiTokenAmount: amountOut,
|
||||
uiTokenAmount: amountOut.toNumber(),
|
||||
},
|
||||
],
|
||||
HealthType.maint
|
||||
|
@ -188,9 +188,9 @@ const SwapForm = () => {
|
|||
|
||||
const showHealthImpact = !!inputTokenInfo && !!outputTokenInfo && !!amountOut
|
||||
|
||||
const showInsufficientBalance =
|
||||
(!useMargin && amountIn.toNumber() > tokenMax) ||
|
||||
(useMargin && amountIn.toNumber() > amountWithBorrow)
|
||||
const showInsufficientBalance = useMargin
|
||||
? amountWithBorrow.lt(amountIn)
|
||||
: tokenMax.lt(amountIn)
|
||||
|
||||
return (
|
||||
<ContentBox hidePadding showBackground className="relative overflow-hidden">
|
||||
|
@ -321,7 +321,7 @@ const SwapForm = () => {
|
|||
</div>
|
||||
) : (
|
||||
<span className="p-3">
|
||||
{amountOut ? numberFormat.format(amountOut) : ''}
|
||||
{amountOut ? numberFormat.format(amountOut.toNumber()) : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
@ -419,9 +419,9 @@ const MaxSwapAmount = ({
|
|||
useMargin,
|
||||
decimals,
|
||||
}: {
|
||||
amountWithBorrow: number
|
||||
amountWithBorrow: Decimal
|
||||
setAmountIn: (x: string) => void
|
||||
tokenMax: number
|
||||
tokenMax: Decimal
|
||||
useMargin: boolean
|
||||
decimals: number
|
||||
}) => {
|
||||
|
@ -441,7 +441,7 @@ const MaxSwapAmount = ({
|
|||
<LinkButton className="no-underline" onClick={setMaxInputAmount}>
|
||||
<span className="font-normal text-th-fgd-4">{t('max')}:</span>
|
||||
<span className="mx-1 text-th-fgd-3 underline">
|
||||
{maxAmount < 1 ? maxAmount.toFixed(decimals) : maxAmount}
|
||||
{maxAmount.toFixed()}
|
||||
</span>
|
||||
</LinkButton>
|
||||
)
|
||||
|
@ -456,20 +456,20 @@ const PercentageSelectButtons = ({
|
|||
amountIn: string
|
||||
decimals: number
|
||||
setAmountIn: (x: string) => any
|
||||
tokenMax: number
|
||||
tokenMax: Decimal
|
||||
}) => {
|
||||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (tokenMax > 0 && Number(amountIn) === tokenMax) {
|
||||
if (tokenMax.gt(0) && tokenMax.eq(amountIn)) {
|
||||
setSizePercentage('100')
|
||||
}
|
||||
}, [amountIn, tokenMax])
|
||||
|
||||
const handleSizePercentage = (percentage: string) => {
|
||||
setSizePercentage(percentage)
|
||||
if (tokenMax > 0) {
|
||||
let amount = new Decimal(tokenMax).mul(percentage).div(100)
|
||||
if (tokenMax.gt(0)) {
|
||||
let amount = tokenMax.mul(percentage).div(100)
|
||||
if (percentage !== '100') {
|
||||
amount = floorToDecimal(amount, decimals)
|
||||
}
|
||||
|
|
|
@ -17,12 +17,12 @@ type useJupiterPropTypes = {
|
|||
|
||||
type RouteParams = {
|
||||
routes: RouteInfo[]
|
||||
amountOut: number
|
||||
amountOut: Decimal
|
||||
}
|
||||
|
||||
const defaultComputedInfo = {
|
||||
routes: [],
|
||||
amountOut: 0,
|
||||
amountOut: new Decimal(0),
|
||||
}
|
||||
|
||||
const useJupiter = ({
|
||||
|
@ -96,9 +96,8 @@ const useJupiter = ({
|
|||
|
||||
setComputedInfo({
|
||||
routes: routesInfosWithoutRaydium,
|
||||
amountOut: toUiDecimals(
|
||||
JSBI.toNumber(bestRoute.outAmount),
|
||||
outputTokenInfo.decimals!
|
||||
amountOut: new Decimal(bestRoute.outAmount.toString()).div(
|
||||
10 ** outputTokenInfo.decimals!
|
||||
),
|
||||
})
|
||||
}
|
||||
|
|
|
@ -2,7 +2,8 @@ import { Bank, Group, MangoAccount } from '@blockworks-foundation/mango-v4'
|
|||
import Decimal from 'decimal.js'
|
||||
import { useMemo } from 'react'
|
||||
import mangoStore from '../../store/mangoStore'
|
||||
import { floorToDecimal, formatDecimal } from '../../utils/numbers'
|
||||
import { floorToDecimal } from '../../utils/numbers'
|
||||
import useMangoAccount from '../shared/useMangoAccount'
|
||||
|
||||
export const getMaxWithdrawForBank = (
|
||||
group: Group,
|
||||
|
@ -22,49 +23,52 @@ export const getMaxWithdrawForBank = (
|
|||
}
|
||||
|
||||
export const useTokenMax = (useMargin = true) => {
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const inputBank = mangoStore((s) => s.swap.inputBank)
|
||||
const outputBank = mangoStore((s) => s.swap.outputBank)
|
||||
const slippage = mangoStore((s) => s.swap.slippage)
|
||||
|
||||
const tokenInMax = useMemo(() => {
|
||||
const group = mangoStore.getState().group
|
||||
if (!group || !inputBank || !mangoAccount || !outputBank)
|
||||
return { amount: 0.0, decimals: 6, amountWithBorrow: 0.0 }
|
||||
return {
|
||||
amount: new Decimal(0.0),
|
||||
decimals: 6,
|
||||
amountWithBorrow: new Decimal(0.0),
|
||||
}
|
||||
|
||||
const inputBankFromGroup = group.getFirstBankByMint(inputBank.mint)
|
||||
const tokenBalance = parseFloat(
|
||||
formatDecimal(
|
||||
mangoAccount?.getTokenBalanceUi(inputBankFromGroup),
|
||||
inputBankFromGroup.mintDecimals
|
||||
)
|
||||
const tokenBalance = floorToDecimal(
|
||||
mangoAccount?.getTokenBalanceUi(inputBankFromGroup),
|
||||
inputBankFromGroup.mintDecimals
|
||||
)
|
||||
|
||||
const inputBankVaultBalance = group.getTokenVaultBalanceByMintUi(
|
||||
inputBank.mint
|
||||
)
|
||||
const maxAmountWithoutMargin = tokenBalance > 0 ? tokenBalance : 0
|
||||
const maxAmountWithoutMargin = tokenBalance.gt(0)
|
||||
? tokenBalance
|
||||
: new Decimal(0)
|
||||
|
||||
const maxUiAmountWithBorrow = floorToDecimal(
|
||||
mangoAccount?.getMaxSourceUiForTokenSwap(
|
||||
group,
|
||||
inputBank.mint,
|
||||
outputBank.mint,
|
||||
0.98 - slippage / 10
|
||||
1
|
||||
)!,
|
||||
inputBank.mintDecimals
|
||||
)
|
||||
|
||||
const maxAmount = useMargin
|
||||
? Math.min(
|
||||
? Decimal.min(
|
||||
maxAmountWithoutMargin,
|
||||
inputBankVaultBalance,
|
||||
maxUiAmountWithBorrow!.toNumber()
|
||||
maxUiAmountWithBorrow!
|
||||
)
|
||||
: Math.min(maxAmountWithoutMargin, inputBankVaultBalance)
|
||||
: Decimal.min(maxAmountWithoutMargin, inputBankVaultBalance)
|
||||
|
||||
const maxAmountWithBorrow = Math.min(
|
||||
maxUiAmountWithBorrow!.toNumber(),
|
||||
const maxAmountWithBorrow = Decimal.min(
|
||||
maxUiAmountWithBorrow!,
|
||||
inputBankVaultBalance
|
||||
)
|
||||
|
||||
|
@ -73,7 +77,7 @@ export const useTokenMax = (useMargin = true) => {
|
|||
amountWithBorrow: maxAmountWithBorrow,
|
||||
decimals: inputBank.mintDecimals,
|
||||
}
|
||||
}, [inputBank, mangoAccount, outputBank, slippage, useMargin])
|
||||
}, [inputBank, mangoAccount, outputBank, useMargin])
|
||||
|
||||
return tokenInMax
|
||||
}
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
"react": "18.0.0",
|
||||
"react-dom": "18.0.0",
|
||||
"react-flip-numbers": "^3.0.5",
|
||||
"react-number-format": "4.5.4",
|
||||
"react-number-format": "^4.9.2",
|
||||
"react-window": "^1.8.7",
|
||||
"recharts": "^2.1.12",
|
||||
"zustand": "^4.1.1"
|
||||
|
|
14
yarn.lock
14
yarn.lock
|
@ -1014,9 +1014,9 @@
|
|||
tweetnacl "^1.0.0"
|
||||
|
||||
"@solana/web3.js@^1.17.0", "@solana/web3.js@^1.21.0", "@solana/web3.js@^1.22.0", "@solana/web3.js@^1.32.0", "@solana/web3.js@^1.36.0", "@solana/web3.js@^1.44.3":
|
||||
version "1.56.0"
|
||||
resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.56.0.tgz#312bccde0ddeeffa7a48af16a945cc4d1f863395"
|
||||
integrity sha512-YfQAIvsllVP3Y5QSs/TdJJFwTgFQuXybg+ouwyNE8cmq3+r2Nmvsj69DGWGbN41jy0is8foZf0yruuLQfWxOmQ==
|
||||
version "1.56.2"
|
||||
resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.56.2.tgz#5212e8b147ebc216ea5a7aa99d5b555ebe41f9bd"
|
||||
integrity sha512-ByWfNA8H/1EB4g0749uhkQ0zZZAQealzRmmT3UMIv3xe0DeHwnrzQUavBtAlHNMrKqLHu8kd+XtPci6zreMjjA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@noble/ed25519" "^1.7.0"
|
||||
|
@ -4318,10 +4318,10 @@ react-native-url-polyfill@^1.3.0:
|
|||
dependencies:
|
||||
whatwg-url-without-unicode "8.0.0-3"
|
||||
|
||||
react-number-format@4.5.4:
|
||||
version "4.5.4"
|
||||
resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.5.4.tgz#b644d79a90fcad2f1009eb0b9a14eb0ddd6c0083"
|
||||
integrity sha512-DZm4YhJ7B+bbOA+Jgn/ckA9DPcKxrJWHXir4nA1YIeqKZ15XYa/uVLwZohlEcGUKqqx6ZeXppOU4eZczBenHOg==
|
||||
react-number-format@^4.9.2:
|
||||
version "4.9.3"
|
||||
resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.9.3.tgz#338500fe9c61b1ac73c8d6dff4ec97dd13fd2b50"
|
||||
integrity sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
|
|
Loading…
Reference in New Issue