From bb50f35806fe3edc3c549d1c72e891f591d86948 Mon Sep 17 00:00:00 2001 From: tjs Date: Mon, 26 Sep 2022 15:56:06 -0400 Subject: [PATCH] finish up spot slider --- components/trade/AdvancedTradeForm.tsx | 114 +++++++++++++++++----- components/trade/Orderbook.tsx | 50 ++++------ components/trade/SpotSlider.tsx | 32 +++++- components/wallet/ConnectWalletButton.tsx | 6 ++ 4 files changed, 143 insertions(+), 59 deletions(-) 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 = () => {

Limit Price

-
+
{ value={tradeForm.price} onValueChange={handlePriceChange} /> -
+
{quoteSymbol}
@@ -225,22 +275,42 @@ const AdvancedTradeForm = () => {

{t('amount')}

-
- -
- {baseSymbol} +
+
+ +
+ {baseSymbol} +
+
+
+ +
+ {quoteSymbol} +
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.`, + }) } } }