diff --git a/components/Input.tsx b/components/Input.tsx index 4497fd8e..29379a70 100644 --- a/components/Input.tsx +++ b/components/Input.tsx @@ -41,14 +41,16 @@ const Input = ({ type={type} value={value} onChange={onChange} - className={`bg-transparent font-light tracking-wider w-full focus:outline-none ${ - disabled && 'opacity-20 cursor-not-allowed' - } ${type === 'number' ? 'text-right' : ''}`} + className={`bg-transparent font-light tracking-wider w-full h-full focus:outline-none ${ + disabled ? 'opacity-20 cursor-not-allowed' : '' + } ${type === 'number' ? 'text-right' : ''} ${ + value.toString().length > 9 ? 'text-xs' : '' + }`} disabled={disabled} {...props} /> {suffix ? ( - + {suffix} ) : null} diff --git a/components/Orderbook.tsx b/components/Orderbook.tsx index 68589aa5..6f602e93 100644 --- a/components/Orderbook.tsx +++ b/components/Orderbook.tsx @@ -96,12 +96,16 @@ export default function Orderbook({ depth = 7 }) { }, [orderbook]) const handlePriceClick = (price) => { + console.log('price click') + setMangoStore((state) => { state.tradeForm.price = price }) } const handleSizeClick = (size) => { + console.log('size click') + setMangoStore((state) => { state.tradeForm.baseSize = size }) @@ -169,11 +173,7 @@ const OrderbookRow = React.memo( : price return ( -
+
{invert ? ( <>
@@ -185,11 +185,16 @@ const OrderbookRow = React.memo( />
{formattedPrice}
-
{formattedSize}
+
+ {formattedSize} +
) : ( <> -
+
{formattedSize}
diff --git a/components/TopBar.tsx b/components/TopBar.tsx index bcb81db8..5c9b158c 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -146,7 +146,9 @@ const TopBar = () => {
- Connect Wallet + + Connect Wallet + {WALLET_PROVIDERS.filter( (p) => p.url === savedProviderUrl diff --git a/components/TradeForm.tsx b/components/TradeForm.tsx index 71d8d728..43dd68c7 100644 --- a/components/TradeForm.tsx +++ b/components/TradeForm.tsx @@ -80,9 +80,13 @@ export default function TradeForm() { market?.minOrderSize && getDecimalCount(market.minOrderSize) // const priceDecimalCount = market?.tickSize && getDecimalCount(market.tickSize) - useEffect(() => { - onSetBaseSize(baseSize) - }, [price, baseSize]) + const onSetPrice = (price: number | '') => { + setPrice(price) + if (!price) return + if (baseSize) { + onSetBaseSize(baseSize) + } + } const onSetBaseSize = (baseSize: number | '') => { setBaseSize(baseSize) @@ -106,12 +110,12 @@ export default function TradeForm() { setBaseSize('') return } - const usePrice = Number(price) || markPrice - if (!usePrice) { + if (!Number(price) && tradeType === 'Limit') { setBaseSize('') return } + const usePrice = Number(price) || markPrice const rawBaseSize = quoteSize / usePrice const baseSize = quoteSize && roundToDecimal(rawBaseSize, sizeDecimalCount) setBaseSize(baseSize) @@ -242,7 +246,7 @@ export default function TradeForm() { setPrice(parseFloat(e.target.value))} + onChange={(e) => onSetPrice(parseFloat(e.target.value))} value={price} disabled={tradeType === 'Market'} prefix={'Price'} diff --git a/hooks/useMarket.tsx b/hooks/useMarket.tsx index 4b344e81..83ef8fe4 100644 --- a/hooks/useMarket.tsx +++ b/hooks/useMarket.tsx @@ -33,7 +33,7 @@ const useMarket = () => { TOKEN_MINTS.find((token) => token.address.equals(market.baseMintAddress) )?.name) || - 'UNKNOWN', + '...', [market, TOKEN_MINTS] ) @@ -43,7 +43,7 @@ const useMarket = () => { TOKEN_MINTS.find((token) => token.address.equals(market.quoteMintAddress) )?.name) || - 'UNKNOWN', + '...', [market, TOKEN_MINTS] )