more trade form improvements
This commit is contained in:
parent
86ea7afcff
commit
0af7a8b8ee
|
@ -2,7 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react'
|
|||
import Slider from 'rc-slider'
|
||||
import 'rc-slider/assets/index.css'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { getMarketIndexBySymbol } from '@blockworks-foundation/mango-client'
|
||||
import {
|
||||
getMarketIndexBySymbol,
|
||||
I80F48,
|
||||
PerpMarket,
|
||||
} from '@blockworks-foundation/mango-client'
|
||||
import tw from 'twin.macro'
|
||||
import styled from '@emotion/styled'
|
||||
import 'rc-slider/assets/index.css'
|
||||
|
@ -41,6 +45,7 @@ type SliderProps = {
|
|||
step: number
|
||||
value: number
|
||||
side: string
|
||||
price: number
|
||||
disabled?: boolean
|
||||
max?: number
|
||||
maxButtonTransition?: boolean
|
||||
|
@ -54,6 +59,7 @@ export default function LeverageSlider({
|
|||
disabled,
|
||||
maxButtonTransition,
|
||||
side,
|
||||
price,
|
||||
}: SliderProps) {
|
||||
const [enableTransition, setEnableTransition] = useState(false)
|
||||
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
||||
|
@ -68,35 +74,44 @@ export default function LeverageSlider({
|
|||
marketConfig.baseSymbol
|
||||
)
|
||||
|
||||
const marketInfo = useMemo(() => {
|
||||
if (mangoGroup) {
|
||||
if (marketType === 'perp') {
|
||||
return mangoGroup.perpMarkets[marketIndex]
|
||||
} else {
|
||||
return mangoGroup.spotMarkets[marketIndex]
|
||||
}
|
||||
}
|
||||
}, [marketType, mangoGroup, marketIndex])
|
||||
|
||||
const max = useMemo(() => {
|
||||
if (mangoAccount) {
|
||||
console.log('market', market)
|
||||
if (!mangoAccount) return 0
|
||||
const priceOrDefault = price
|
||||
? I80F48.fromNumber(price)
|
||||
: mangoGroup.getPrice(marketIndex, mangoCache)
|
||||
console.log('price', priceOrDefault.toFixed())
|
||||
|
||||
const maxQuote = mangoAccount
|
||||
.getMaxLeverageForMarket(
|
||||
mangoGroup,
|
||||
mangoCache,
|
||||
marketIndex,
|
||||
marketInfo.initAssetWeight,
|
||||
marketInfo.initLiabWeight,
|
||||
market,
|
||||
side
|
||||
)
|
||||
.toNumber()
|
||||
return maxQuote / mangoGroup.getPrice(marketIndex, mangoCache).toNumber()
|
||||
}
|
||||
return 0
|
||||
}, [mangoAccount, marketInfo, mangoGroup, mangoCache, side, marketIndex])
|
||||
const maxQuote = mangoAccount
|
||||
.getMaxLeverageForMarket(
|
||||
mangoGroup,
|
||||
mangoCache,
|
||||
marketIndex,
|
||||
market,
|
||||
side,
|
||||
priceOrDefault
|
||||
)
|
||||
.toNumber()
|
||||
console.log('max quote :: ', maxQuote)
|
||||
|
||||
if (maxQuote <= 0) return 0
|
||||
// mul by scaler value to account for rounding errors in getMaxLeverageForMarket or fees
|
||||
const maxScaler = market instanceof PerpMarket ? 0.99 : 0.95
|
||||
const max =
|
||||
(maxQuote * maxScaler) /
|
||||
mangoGroup.getPrice(marketIndex, mangoCache).toNumber()
|
||||
|
||||
return max
|
||||
}, [
|
||||
mangoAccount,
|
||||
mangoGroup,
|
||||
mangoCache,
|
||||
marketIndex,
|
||||
market,
|
||||
marketType,
|
||||
side,
|
||||
step,
|
||||
price,
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
if (maxButtonTransition) {
|
||||
|
|
|
@ -226,8 +226,10 @@ const PositionsTable = () => {
|
|||
)}
|
||||
</Td>
|
||||
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{perpMarket.baseLotsToNumber(
|
||||
perpAccount.basePosition
|
||||
{Math.abs(
|
||||
perpMarket.baseLotsToNumber(
|
||||
perpAccount.basePosition
|
||||
)
|
||||
)}
|
||||
</Td>
|
||||
<Th
|
||||
|
|
|
@ -6,7 +6,7 @@ import {
|
|||
PerpMarket,
|
||||
} from '@blockworks-foundation/mango-client'
|
||||
import { notify } from '../utils/notifications'
|
||||
import { calculateMarketPrice, getDecimalCount, sleep } from '../utils'
|
||||
import { calculateTradePrice, getDecimalCount, sleep } from '../utils'
|
||||
import FloatingElement from './FloatingElement'
|
||||
import { floorToDecimal } from '../utils/index'
|
||||
import useMangoStore, { mangoClient } from '../stores/useMangoStore'
|
||||
|
@ -235,9 +235,20 @@ export default function TradeForm() {
|
|||
setSubmitting(true)
|
||||
|
||||
try {
|
||||
let orderPrice = Number(price)
|
||||
if (tradeType === 'Market') {
|
||||
orderPrice = calculateMarketPrice(orderbook, baseSize, side)
|
||||
const orderPrice = calculateTradePrice(
|
||||
tradeType,
|
||||
orderbook,
|
||||
baseSize,
|
||||
side,
|
||||
price
|
||||
)
|
||||
|
||||
if (!orderPrice) {
|
||||
notify({
|
||||
title: 'Price not available',
|
||||
description: 'Please try again',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
const orderType = ioc ? 'ioc' : postOnly ? 'postOnly' : 'limit'
|
||||
|
@ -377,6 +388,13 @@ export default function TradeForm() {
|
|||
step={parseFloat(minOrderSize)}
|
||||
disabled={false}
|
||||
side={side}
|
||||
price={calculateTradePrice(
|
||||
tradeType,
|
||||
orderbook,
|
||||
baseSize ? baseSize : 0,
|
||||
side,
|
||||
price
|
||||
)}
|
||||
/>
|
||||
{tradeType !== 'Market' ? (
|
||||
<div className="flex mt-4">
|
||||
|
|
|
@ -37,9 +37,10 @@ const PerpMarket = () => {
|
|||
state.selectedMarket.kind = 'perp'
|
||||
if (newMarket.name !== marketConfig.name) {
|
||||
state.selectedMarket.config = newMarket
|
||||
state.tradeForm.price = mangoGroup
|
||||
.getPrice(marketIndex, mangoCache)
|
||||
.toFixed(2)
|
||||
state.tradeForm.price =
|
||||
state.tradeForm.tradeType === 'Limit'
|
||||
? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
|
||||
: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -40,9 +40,10 @@ const SpotMarket = () => {
|
|||
state.selectedMarket.kind = 'spot'
|
||||
if (newMarket.name !== marketConfig.name) {
|
||||
state.selectedMarket.config = newMarket
|
||||
state.tradeForm.price = mangoGroup
|
||||
.getPrice(marketIndex, mangoCache)
|
||||
.toFixed(2)
|
||||
state.tradeForm.price =
|
||||
state.tradeForm.tradeType === 'Limit'
|
||||
? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
|
||||
: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -149,11 +149,24 @@ export function isDefined<T>(argument: T | undefined): argument is T {
|
|||
return argument !== undefined
|
||||
}
|
||||
|
||||
export function calculateTradePrice(
|
||||
tradeType: string,
|
||||
orderBook: Orderbook,
|
||||
baseSize: number,
|
||||
side: 'buy' | 'sell',
|
||||
price: string | number
|
||||
): number {
|
||||
if (tradeType === 'Market') {
|
||||
return calculateMarketPrice(orderBook, baseSize, side)
|
||||
}
|
||||
return Number(price)
|
||||
}
|
||||
|
||||
export const calculateMarketPrice = (
|
||||
orderBook: Orderbook,
|
||||
size: number,
|
||||
side: 'buy' | 'sell'
|
||||
) => {
|
||||
): number => {
|
||||
const orders = side === 'buy' ? orderBook.asks : orderBook.bids
|
||||
let acc = 0
|
||||
let selectedOrder
|
||||
|
@ -165,6 +178,11 @@ export const calculateMarketPrice = (
|
|||
}
|
||||
}
|
||||
|
||||
if (!selectedOrder) {
|
||||
console.error('Orderbook empty no market price available')
|
||||
return
|
||||
}
|
||||
|
||||
if (side === 'buy') {
|
||||
return selectedOrder[0] * 1.05
|
||||
} else {
|
||||
|
|
|
@ -995,7 +995,7 @@
|
|||
|
||||
"@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
|
||||
version "3.0.4"
|
||||
resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#29b6d5e35428515e25e91892dc679e8fbcb590a7"
|
||||
resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#b1a52165e65e5557f3233738ec5a0e5a8aba2adc"
|
||||
dependencies:
|
||||
"@project-serum/serum" "0.13.55"
|
||||
"@project-serum/sol-wallet-adapter" "^0.2.0"
|
||||
|
|
Loading…
Reference in New Issue