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

add useMargin to max trade size button

This commit is contained in:
saml33 2023-01-16 14:58:01 +11:00
parent 35cd56b9fc
commit 8736d7991e
2 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/trade/AdvancedTradeForm.tsx
View File

@ -394,6 +394,7 @@ const AdvancedTradeForm = () => {
<MaxSizeButton
minOrderDecimals={minOrderDecimals}
tickDecimals={tickDecimals}
useMargin={useMargin}
/>
<div className="flex flex-col">
<div className="default-transition flex items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 text-sm font-bold text-th-fgd-1 md:hover:z-10 md:hover:border-th-input-border-hover lg:text-base">

109
components/trade/MaxSizeButton.tsx
View File

@ -1,4 +1,4 @@
import { Serum3Market } from '@blockworks-foundation/mango-v4'
import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
import MaxAmountButton from '@components/shared/MaxAmountButton'
import { FadeInFadeOut } from '@components/shared/Transitions'
import mangoStore from '@store/mangoStore'
@ -7,37 +7,33 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
import { useTranslation } from 'next-i18next'
import { useCallback, useMemo } from 'react'
import { floorToDecimal } from 'utils/numbers'
import { useSpotMarketMax } from './SpotSlider'
const MaxSizeButton = ({
minOrderDecimals,
tickDecimals,
useMargin,
}: {
minOrderDecimals: number
tickDecimals: number
useMargin: boolean
}) => {
const { t } = useTranslation(['common', 'trade'])
const { mangoAccount } = useMangoAccount()
const { selectedMarket, price: oraclePrice } = useSelectedMarket()
const { price, side, tradeType } = mangoStore((s) => s.tradeForm)
const spotMax = useSpotMarketMax(
mangoAccount,
selectedMarket,
side,
useMargin
)
const leverageMax = useMemo(() => {
const perpMax = useMemo(() => {
const group = mangoStore.getState().group
if (!mangoAccount || !group || !selectedMarket) return 0
try {
if (selectedMarket instanceof Serum3Market) {
if (side === 'buy') {
return mangoAccount.getMaxQuoteForSerum3BidUi(
group,
selectedMarket.serumMarketExternal
)
} else {
return mangoAccount.getMaxBaseForSerum3AskUi(
group,
selectedMarket.serumMarketExternal
)
}
} else {
if (selectedMarket instanceof PerpMarket) {
try {
if (side === 'buy') {
return mangoAccount.getMaxQuoteForPerpBidUi(
group,
@ -49,60 +45,101 @@ const MaxSizeButton = ({
selectedMarket.perpMarketIndex
)
}
} catch (e) {
console.error('Error calculating max leverage: spot btn group: ', e)
return 0
}
} catch (e) {
console.error('Error calculating max leverage: spot btn group: ', e)
return 0
}
}, [mangoAccount, side, selectedMarket])
// const leverageMax = useMemo(() => {
// const group = mangoStore.getState().group
// if (!mangoAccount || !group || !selectedMarket) return 0
// try {
// if (selectedMarket instanceof Serum3Market) {
// if (side === 'buy') {
// return mangoAccount.getMaxQuoteForSerum3BidUi(
// group,
// selectedMarket.serumMarketExternal
// )
// } else {
// return mangoAccount.getMaxBaseForSerum3AskUi(
// group,
// selectedMarket.serumMarketExternal
// )
// }
// } else {
// if (side === 'buy') {
// return mangoAccount.getMaxQuoteForPerpBidUi(
// group,
// selectedMarket.perpMarketIndex
// )
// } else {
// return mangoAccount.getMaxBaseForPerpAskUi(
// group,
// selectedMarket.perpMarketIndex
// )
// }
// }
// } catch (e) {
// console.error('Error calculating max leverage: spot btn group: ', e)
// return 0
// }
// }, [mangoAccount, side, selectedMarket])
const handleMax = useCallback(() => {
const max = selectedMarket instanceof Serum3Market ? spotMax : perpMax || 0
const set = mangoStore.getState().set
set((state) => {
if (side === 'buy') {
state.tradeForm.quoteSize = floorToDecimal(
leverageMax,
tickDecimals
).toFixed()
state.tradeForm.quoteSize = floorToDecimal(max, tickDecimals).toFixed()
if (tradeType === 'Market' || !price) {
state.tradeForm.baseSize = floorToDecimal(
leverageMax / oraclePrice,
max / oraclePrice,
minOrderDecimals
).toFixed()
} else {
state.tradeForm.baseSize = floorToDecimal(
leverageMax / parseFloat(price),
max / parseFloat(price),
minOrderDecimals
).toFixed()
}
} else {
state.tradeForm.baseSize = floorToDecimal(
leverageMax,
tickDecimals
).toFixed()
state.tradeForm.baseSize = floorToDecimal(max, tickDecimals).toFixed()
if (tradeType === 'Market' || !price) {
state.tradeForm.quoteSize = floorToDecimal(
leverageMax * oraclePrice,
max * oraclePrice,
minOrderDecimals
).toFixed()
} else {
state.tradeForm.quoteSize = floorToDecimal(
leverageMax * parseFloat(price),
max * parseFloat(price),
minOrderDecimals
).toFixed()
}
}
})
}, [leverageMax, price, side, tradeType])
}, [perpMax, spotMax, price, side, tradeType, selectedMarket])
const maxAmount = useMemo(() => {
const max = selectedMarket instanceof Serum3Market ? spotMax : perpMax || 0
const tradePrice = tradeType === 'Market' ? oraclePrice : Number(price)
if (side === 'buy') {
return floorToDecimal(leverageMax / tradePrice, tickDecimals).toFixed()
return floorToDecimal(max / tradePrice, tickDecimals).toFixed()
} else {
return floorToDecimal(leverageMax, minOrderDecimals).toFixed()
return floorToDecimal(max, minOrderDecimals).toFixed()
}
}, [leverageMax, minOrderDecimals, tickDecimals, price, side, tradeType])
}, [
perpMax,
spotMax,
selectedMarket,
minOrderDecimals,
tickDecimals,
price,
side,
tradeType,
])
return (
<div className="mb-2 mt-3 flex items-center justify-between">