diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index 14c24575..230f77aa 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -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 = () => {
-
+
{
value={tradeForm.price}
onValueChange={handlePriceChange}
/>
-
@@ -225,22 +275,42 @@ const AdvancedTradeForm = () => {
-
-
-
diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx
index a3d607a8..5a6e1e72 100644
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@@ -158,7 +158,6 @@ const Orderbook = () => {
// const [openOrderPrices, setOpenOrderPrices] = useState
([])
const [isScrolled, setIsScrolled] = useState(false)
const [orderbookData, setOrderbookData] = useState(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 = ({
<>
@@ -596,7 +583,6 @@ const OrderbookRow = ({
{formattedPrice.toFixed(groupingDecimalCount)}
diff --git a/components/trade/SpotSlider.tsx b/components/trade/SpotSlider.tsx
index 73211848..4072fd14 100644
--- a/components/trade/SpotSlider.tsx
+++ b/components/trade/SpotSlider.tsx
@@ -4,12 +4,12 @@ import Decimal from 'decimal.js'
import { useCallback, useMemo, useState } from 'react'
const SpotSlider = () => {
- const [amount, setAmount] = useState
()
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 (
diff --git a/components/wallet/ConnectWalletButton.tsx b/components/wallet/ConnectWalletButton.tsx
index 9a758385..3263ba09 100644
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@@ -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.`,
+ })
}
}
}