blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #27 from ImpossiblePairs/trade-form-ui-bugs 

Updated TradeForm.tsx UI Bugs
This commit is contained in:
Tyler 2021-06-10 19:42:17 -04:00 committed by GitHub
parent 821c24fa45 2f066cb92c
commit 32346a75c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/TradeForm.tsx
View File

@ -9,7 +9,7 @@ import { notify } from '../utils/notifications'
import { placeAndSettle } from '../utils/mango' import { placeAndSettle } from '../utils/mango'
import { calculateMarketPrice, getDecimalCount } from '../utils' import { calculateMarketPrice, getDecimalCount } from '../utils'
import FloatingElement from './FloatingElement' import FloatingElement from './FloatingElement'
import { roundToDecimal } from '../utils/index' import { floorToDecimal } from '../utils/index'
import useMangoStore from '../stores/useMangoStore' import useMangoStore from '../stores/useMangoStore'
import Button from './Button' import Button from './Button'
import TradeType from './TradeType' import TradeType from './TradeType'
@ -52,17 +52,29 @@ export default function TradeForm() {
const setBaseSize = (baseSize) => const setBaseSize = (baseSize) =>
set((s) => { set((s) => {
s.tradeForm.baseSize = parseFloat(baseSize) if (!Number.isNaN(parseFloat(baseSize))) {
s.tradeForm.baseSize = parseFloat(baseSize)
} else {
s.tradeForm.baseSize = baseSize
}
}) })
const setQuoteSize = (quoteSize) => const setQuoteSize = (quoteSize) =>
set((s) => { set((s) => {
s.tradeForm.quoteSize = parseFloat(quoteSize) if (!Number.isNaN(parseFloat(quoteSize))) {
s.tradeForm.quoteSize = parseFloat(quoteSize)
} else {
s.tradeForm.quoteSize = quoteSize
}
}) })
const setPrice = (price) => const setPrice = (price) =>
set((s) => { set((s) => {
s.tradeForm.price = parseFloat(price) if (!Number.isNaN(parseFloat(price))) {
s.tradeForm.price = parseFloat(price)
} else {
s.tradeForm.price = price
}
}) })
const setTradeType = (type) => const setTradeType = (type) =>
@ -106,7 +118,7 @@ export default function TradeForm() {
return return
} }
const rawQuoteSize = baseSize * usePrice const rawQuoteSize = baseSize * usePrice
const quoteSize = baseSize && roundToDecimal(rawQuoteSize, sizeDecimalCount) const quoteSize = baseSize && floorToDecimal(rawQuoteSize, sizeDecimalCount)
setQuoteSize(quoteSize) setQuoteSize(quoteSize)
} }
@ -123,7 +135,7 @@ export default function TradeForm() {
} }
const usePrice = Number(price) || markPrice const usePrice = Number(price) || markPrice
const rawBaseSize = quoteSize / usePrice const rawBaseSize = quoteSize / usePrice
const baseSize = quoteSize && roundToDecimal(rawBaseSize, sizeDecimalCount) const baseSize = quoteSize && floorToDecimal(rawBaseSize, sizeDecimalCount)
setBaseSize(baseSize) setBaseSize(baseSize)
} }
@ -255,8 +267,9 @@ export default function TradeForm() {
<Input.Group className="mt-4"> <Input.Group className="mt-4">
<Input <Input
type="number" type="number"
min="0"
step={market?.tickSize || 1} step={market?.tickSize || 1}
onChange={(e) => onSetPrice(parseFloat(e.target.value))} onChange={(e) => onSetPrice(e.target.value)}
value={price} value={price}
disabled={tradeType === 'Market'} disabled={tradeType === 'Market'}
prefix={'Price'} prefix={'Price'}
@ -274,8 +287,9 @@ export default function TradeForm() {
<Input.Group className="mt-4"> <Input.Group className="mt-4">
<Input <Input
type="number" type="number"
min="0"
step={market?.minOrderSize || 1} step={market?.minOrderSize || 1}
onChange={(e) => onSetBaseSize(parseFloat(e.target.value))} onChange={(e) => onSetBaseSize(e.target.value)}
value={baseSize} value={baseSize}
className="rounded-r-none" className="rounded-r-none"
wrapperClassName="w-3/5" wrapperClassName="w-3/5"
@ -284,8 +298,9 @@ export default function TradeForm() {
/> />
<StyledRightInput <StyledRightInput
type="number" type="number"
min="0"
step={market?.minOrderSize || 1} step={market?.minOrderSize || 1}
onChange={(e) => onSetQuoteSize(parseFloat(e.target.value))} onChange={(e) => onSetQuoteSize(e.target.value)}
value={quoteSize} value={quoteSize}
className="rounded-l-none" className="rounded-l-none"
wrapperClassName="w-2/5" wrapperClassName="w-2/5"
@ -317,7 +332,7 @@ export default function TradeForm() {
'border-th-green hover:border-th-green-dark' 'border-th-green hover:border-th-green-dark'
} text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`} } text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`}
> >
{`Buy ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`} {`${baseSize > 0 ? 'Buy ' + baseSize : 'Set BUY bid >= ' + market?.minOrderSize} ${baseCurrency}`}
</Button> </Button>
) : ( ) : (
<Button <Button
@ -328,7 +343,7 @@ export default function TradeForm() {
'border-th-red hover:border-th-red-dark' 'border-th-red hover:border-th-red-dark'
} text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`} } text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
> >
{`Sell ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`} {`${baseSize > 0 ? 'Sell ' + baseSize : 'Set SELL bid >= ' + market?.minOrderSize} ${baseCurrency}`}
</Button> </Button>
) )
) : ( ) : (