finish up spot slider
This commit is contained in:
parent
cd75f5c3f5
commit
bb50f35806
|
@ -10,8 +10,11 @@ import Tooltip from '@components/shared/Tooltip'
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import Decimal from 'decimal.js'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import NumberFormat, { NumberFormatValues } from 'react-number-format'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import NumberFormat, {
|
||||
NumberFormatValues,
|
||||
SourceInfo,
|
||||
} from 'react-number-format'
|
||||
import { notify } from 'utils/notifications'
|
||||
import SpotSlider from './SpotSlider'
|
||||
import { calculateMarketPrice } from 'utils/tradeForm'
|
||||
|
@ -41,18 +44,51 @@ const AdvancedTradeForm = () => {
|
|||
)
|
||||
|
||||
const handlePriceChange = useCallback(
|
||||
(e: NumberFormatValues) => {
|
||||
(e: NumberFormatValues, info: SourceInfo) => {
|
||||
if (info.source !== 'event') return
|
||||
set((s) => {
|
||||
s.tradeForm.price = e.value
|
||||
if (s.tradeForm.baseSize && Number(e.value)) {
|
||||
s.tradeForm.quoteSize = (
|
||||
parseFloat(e.value) * parseFloat(s.tradeForm.baseSize)
|
||||
).toString()
|
||||
}
|
||||
})
|
||||
},
|
||||
[set]
|
||||
)
|
||||
|
||||
const handleBaseSizeChange = useCallback(
|
||||
(e: NumberFormatValues) => {
|
||||
(e: NumberFormatValues, info: SourceInfo) => {
|
||||
if (info.source !== 'event') return
|
||||
console.log('ho')
|
||||
|
||||
set((s) => {
|
||||
s.tradeForm.baseSize = e.value
|
||||
|
||||
if (s.tradeForm.price && Number(e.value)) {
|
||||
s.tradeForm.quoteSize = (
|
||||
parseFloat(s.tradeForm.price) * parseFloat(e.value)
|
||||
).toString()
|
||||
}
|
||||
})
|
||||
},
|
||||
[set]
|
||||
)
|
||||
|
||||
const handleQuoteSizeChange = useCallback(
|
||||
(e: NumberFormatValues, info: SourceInfo) => {
|
||||
if (info.source !== 'event') return
|
||||
console.log('hi')
|
||||
|
||||
set((s) => {
|
||||
s.tradeForm.quoteSize = e.value
|
||||
|
||||
if (Number(s.tradeForm.price)) {
|
||||
s.tradeForm.baseSize = (
|
||||
parseFloat(e.value) / parseFloat(s.tradeForm.price)
|
||||
).toString()
|
||||
}
|
||||
})
|
||||
},
|
||||
[set]
|
||||
|
@ -91,6 +127,20 @@ const AdvancedTradeForm = () => {
|
|||
[set]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const group = mangoStore.getState().group
|
||||
if (!group || !selectedMarket) return
|
||||
const baseBank = group?.getFirstBankByTokenIndex(
|
||||
selectedMarket.baseTokenIndex
|
||||
)
|
||||
if (baseBank.uiPrice) {
|
||||
const price = baseBank.uiPrice.toString()
|
||||
set((s) => {
|
||||
s.tradeForm.price = price
|
||||
})
|
||||
}
|
||||
}, [set, selectedMarket])
|
||||
|
||||
const handlePlaceOrder = useCallback(async () => {
|
||||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
|
@ -202,7 +252,7 @@ const AdvancedTradeForm = () => {
|
|||
<div className="mb-2 mt-4 flex items-center justify-between">
|
||||
<p className="text-xs text-th-fgd-3">Limit Price</p>
|
||||
</div>
|
||||
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-3 text-sm font-bold text-th-fgd-1 md:py-2 md:text-lg md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2">
|
||||
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
|
||||
<NumberFormat
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
|
@ -216,7 +266,7 @@ const AdvancedTradeForm = () => {
|
|||
value={tradeForm.price}
|
||||
onValueChange={handlePriceChange}
|
||||
/>
|
||||
<div className="ml-2 text-sm font-normal text-th-fgd-4">
|
||||
<div className="text-xs font-normal text-th-fgd-4">
|
||||
{quoteSymbol}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -225,22 +275,42 @@ const AdvancedTradeForm = () => {
|
|||
<div className="my-2 flex items-center justify-between">
|
||||
<p className="text-xs text-th-fgd-3">{t('amount')}</p>
|
||||
</div>
|
||||
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-3 text-sm font-bold text-th-fgd-1 md:py-2 md:text-lg md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2">
|
||||
<NumberFormat
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={6}
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
className="w-full bg-transparent font-mono focus:outline-none"
|
||||
placeholder="0.00"
|
||||
value={tradeForm.baseSize}
|
||||
onValueChange={handleBaseSizeChange}
|
||||
/>
|
||||
<div className="ml-2 text-sm font-normal text-th-fgd-4">
|
||||
{baseSymbol}
|
||||
<div className="flex flex-col">
|
||||
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
|
||||
<NumberFormat
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={6}
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
className="w-full bg-transparent font-mono focus:outline-none"
|
||||
placeholder="0.00"
|
||||
value={tradeForm.baseSize}
|
||||
onValueChange={handleBaseSizeChange}
|
||||
/>
|
||||
<div className="text-xs font-normal text-th-fgd-4">
|
||||
{baseSymbol}
|
||||
</div>
|
||||
</div>
|
||||
<div className="default-transition mt-1 flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
|
||||
<NumberFormat
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={6}
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
className="w-full bg-transparent font-mono focus:outline-none"
|
||||
placeholder="0.00"
|
||||
value={tradeForm.quoteSize}
|
||||
onValueChange={handleQuoteSizeChange}
|
||||
/>
|
||||
<div className="text-xs font-normal text-th-fgd-4">
|
||||
{quoteSymbol}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -158,7 +158,6 @@ const Orderbook = () => {
|
|||
// const [openOrderPrices, setOpenOrderPrices] = useState<any[]>([])
|
||||
const [isScrolled, setIsScrolled] = useState(false)
|
||||
const [orderbookData, setOrderbookData] = useState<any | null>(null)
|
||||
const [displayCumulativeSize, setDisplayCumulativeSize] = useState(false)
|
||||
const [grouping, setGrouping] = useState(0.01)
|
||||
const [showBuys, setShowBuys] = useState(true)
|
||||
const [showSells, setShowSells] = useState(true)
|
||||
|
@ -438,17 +437,9 @@ const Orderbook = () => {
|
|||
// )}
|
||||
key={orderbookData?.asks[index].price}
|
||||
price={orderbookData?.asks[index].price}
|
||||
size={
|
||||
displayCumulativeSize
|
||||
? orderbookData?.asks[index].cumulativeSize
|
||||
: orderbookData?.asks[index].size
|
||||
}
|
||||
size={orderbookData?.asks[index].size}
|
||||
side="sell"
|
||||
sizePercent={
|
||||
displayCumulativeSize
|
||||
? orderbookData?.asks[index].maxSizePercent
|
||||
: orderbookData?.asks[index].sizePercent
|
||||
}
|
||||
sizePercent={orderbookData?.asks[index].sizePercent}
|
||||
grouping={grouping}
|
||||
/>
|
||||
) : null}
|
||||
|
@ -482,17 +473,9 @@ const Orderbook = () => {
|
|||
// grouping
|
||||
// )}
|
||||
price={orderbookData?.bids[index].price}
|
||||
size={
|
||||
displayCumulativeSize
|
||||
? orderbookData?.bids[index].cumulativeSize
|
||||
: orderbookData?.bids[index].size
|
||||
}
|
||||
size={orderbookData?.bids[index].size}
|
||||
side="buy"
|
||||
sizePercent={
|
||||
displayCumulativeSize
|
||||
? orderbookData?.bids[index].maxSizePercent
|
||||
: orderbookData?.bids[index].sizePercent
|
||||
}
|
||||
sizePercent={orderbookData?.bids[index].sizePercent}
|
||||
grouping={grouping}
|
||||
/>
|
||||
) : null}
|
||||
|
@ -538,26 +521,29 @@ const OrderbookRow = ({
|
|||
() =>
|
||||
element.current?.classList.contains(`${flashClassName}`) &&
|
||||
element.current?.classList.remove(`${flashClassName}`),
|
||||
250
|
||||
500
|
||||
)
|
||||
return () => clearTimeout(id)
|
||||
}, [price, size])
|
||||
|
||||
const formattedSize =
|
||||
minOrderSize && !isNaN(size)
|
||||
const formattedSize = useMemo(() => {
|
||||
return minOrderSize && !isNaN(size)
|
||||
? floorToDecimal(size, getDecimalCount(minOrderSize))
|
||||
: new Decimal(size)
|
||||
}, [size, minOrderSize])
|
||||
|
||||
const formattedPrice =
|
||||
tickSize && !isNaN(price)
|
||||
const formattedPrice = useMemo(() => {
|
||||
return tickSize && !isNaN(price)
|
||||
? floorToDecimal(price, getDecimalCount(tickSize))
|
||||
: new Decimal(price)
|
||||
}, [price, tickSize])
|
||||
|
||||
// const handlePriceClick = () => {
|
||||
// set((state) => {
|
||||
// state.tradeForm.price = Number(formattedPrice)
|
||||
// })
|
||||
// }
|
||||
const handlePriceClick = useCallback(() => {
|
||||
const set = mangoStore.getState().set
|
||||
set((state) => {
|
||||
state.tradeForm.price = formattedPrice.toFixed()
|
||||
})
|
||||
}, [formattedPrice])
|
||||
|
||||
// const handleSizeClick = () => {
|
||||
// set((state) => {
|
||||
|
@ -580,6 +566,7 @@ const OrderbookRow = ({
|
|||
<div
|
||||
className={`relative flex h-[24px] cursor-pointer justify-between border-b border-b-th-bkg-1 text-sm`}
|
||||
ref={element}
|
||||
onClick={handlePriceClick}
|
||||
>
|
||||
<>
|
||||
<div className="flex w-full items-center justify-between hover:bg-th-bkg-2">
|
||||
|
@ -596,7 +583,6 @@ const OrderbookRow = ({
|
|||
</div>
|
||||
<div
|
||||
className={`z-10 w-full pr-4 text-right font-mono text-xs leading-5 md:leading-6`}
|
||||
// onClick={handlePriceClick}
|
||||
>
|
||||
{formattedPrice.toFixed(groupingDecimalCount)}
|
||||
</div>
|
||||
|
|
|
@ -4,12 +4,12 @@ import Decimal from 'decimal.js'
|
|||
import { useCallback, useMemo, useState } from 'react'
|
||||
|
||||
const SpotSlider = () => {
|
||||
const [amount, setAmount] = useState<string>()
|
||||
const side = mangoStore((s) => s.tradeForm.side)
|
||||
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
const tradeForm = mangoStore((s) => s.tradeForm)
|
||||
|
||||
const leverageMax = useMemo(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
const group = mangoStore.getState().group
|
||||
const set = mangoStore.getState().set
|
||||
if (!mangoAccount || !group || !selectedMarket) return 100
|
||||
|
@ -28,20 +28,42 @@ const SpotSlider = () => {
|
|||
|
||||
return new Decimal(maxBase.toString()).toNumber()
|
||||
}
|
||||
}, [side, selectedMarket])
|
||||
}, [side, selectedMarket, mangoAccount])
|
||||
|
||||
const handleSlide = useCallback((val: string) => {
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
set((s) => {
|
||||
s.tradeForm.baseSize = val
|
||||
if (s.tradeForm.side === 'buy') {
|
||||
s.tradeForm.quoteSize = val
|
||||
|
||||
if (Number(s.tradeForm.price)) {
|
||||
s.tradeForm.baseSize = (
|
||||
parseFloat(val) / parseFloat(s.tradeForm.price)
|
||||
).toString()
|
||||
} else {
|
||||
s.tradeForm.baseSize = ''
|
||||
}
|
||||
} else if (s.tradeForm.side === 'sell') {
|
||||
s.tradeForm.baseSize = val
|
||||
|
||||
if (Number(s.tradeForm.price)) {
|
||||
s.tradeForm.quoteSize = (
|
||||
parseFloat(val) * parseFloat(s.tradeForm.price)
|
||||
).toString()
|
||||
}
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
<LeverageSlider
|
||||
amount={0}
|
||||
amount={
|
||||
tradeForm.side === 'buy'
|
||||
? parseFloat(tradeForm.quoteSize)
|
||||
: parseFloat(tradeForm.baseSize)
|
||||
}
|
||||
leverageMax={leverageMax}
|
||||
onChange={handleSlide}
|
||||
/>
|
||||
|
|
|
@ -32,6 +32,12 @@ export const handleWalletConnect = async (wallet: Wallet) => {
|
|||
type: 'error',
|
||||
description: `Please install ${wallet.adapter.name} and then reload this page.`,
|
||||
})
|
||||
} else {
|
||||
notify({
|
||||
title: `${wallet.adapter.name} Error`,
|
||||
type: 'error',
|
||||
description: `${wallet.adapter.name} not available.`,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue