Fix order slider + info text optimization

src/components/TradeForm.jsx

@@ -59,26 +59,25 @@ export default function TradeForm({ style, setChangeOrderRef }) {
   const [size, setSize] = useState(null);
   const [price, setPrice] = useState(null);
   const [submitting, setSubmitting] = useState(false);
+  const [sizeFraction, setSizeFraction] = useState(0);
 
   const availableQuote = openOrdersAccount
     ? market.quoteSplSizeToNumber(openOrdersAccount.quoteTokenFree)
     : 0;
 
-  const maxQuoteSize = quoteCurrencyBalances + availableQuote;
-
-  const sizeFraction =
-    (price && size && maxQuoteSize && baseCurrencyBalances && side === 'buy'
-      ? ((price * size) / Math.floor(maxQuoteSize)) * 100
-      : (size / baseCurrencyBalances) * 100) || 0;
+  let quoteBalance = (quoteCurrencyBalances || 0) + (availableQuote || 0);
+  let baseBalance = baseCurrencyBalances || 0;
+  let sizeDecimalCount =
+    market?.minOrderSize && getDecimalCount(market.minOrderSize);
 
   useEffect(() => {
     setChangeOrderRef && setChangeOrderRef(doChangeOrder);
   }, [setChangeOrderRef]);
 
-  // useEffect(() => {
-  //   sizeFraction && onSliderChange(sizeFraction);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [side, sizeFraction]);
+  useEffect(() => {
+    sizeFraction && onSliderChange(sizeFraction);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [side, sizeFraction]);
 
   const doChangeOrder = ({ size, price }) => {
     size && setSize(size);
@@ -86,10 +85,6 @@ export default function TradeForm({ style, setChangeOrderRef }) {
   };
 
   const onSliderChange = (value) => {
-    if (!maxQuoteSize || !baseCurrencyBalances) {
-      return;
-    }
-
     if (!price) {
       markPrice && setPrice(markPrice);
     }
@@ -97,18 +92,19 @@ export default function TradeForm({ style, setChangeOrderRef }) {
     let newSize;
     if (side === 'buy') {
       if (price || markPrice) {
-        newSize =
-          ((Math.floor(maxQuoteSize) / (price || markPrice)) * value) / 100;
+        newSize = ((quoteBalance / (price || markPrice)) * value) / 100;
       }
     } else {
-      newSize = (Math.floor(baseCurrencyBalances) * value) / 100;
+      newSize = (baseBalance * value) / 100;
     }
 
-    setSize(
-      market?.minOrderSize
-        ? newSize.toFixed(getDecimalCount(market.minOrderSize))
-        : newSize,
-    );
+    // round down to minOrderSize increment
+    let formatted = sizeDecimalCount
+      ? Math.floor(newSize * 10 ** sizeDecimalCount) / 10 ** sizeDecimalCount
+      : newSize;
+
+    setSize(formatted);
+    setSizeFraction(value);
   };
 
   const postOnChange = (checked) => {
@@ -203,12 +199,12 @@ export default function TradeForm({ style, setChangeOrderRef }) {
           step={market?.minOrderSize || 1}
           onChange={(e) => setSize(e.target.value)}
         />
-        {/*<Slider*/}
-        {/*  value={sizeFraction}*/}
-        {/*  tipFormatter={(value) => `${value}%`}*/}
-        {/*  marks={sliderMarks}*/}
-        {/*  onChange={onSliderChange}*/}
-        {/*/>*/}
+        <Slider
+          value={sizeFraction}
+          tipFormatter={(value) => `${value}%`}
+          marks={sliderMarks}
+          onChange={onSliderChange}
+        />
         <div style={{ paddingTop: 18 }}>
           {'POST '}
           <Switch

src/components/UserInfoTable/index.jsx

@@ -1,25 +1,27 @@
 import BalancesTable from './BalancesTable';
 import OpenOrderTable from './OpenOrderTable';
 import React from 'react';
-import { Tabs, Typography } from 'antd';
+import { Tabs, Typography, Col, Row } from 'antd';
 import FillsTable from './FillsTable';
 import FloatingElement from '../layout/FloatingElement';
 import { useOpenOrders, useBalances } from '../../utils/markets';
+import { InfoCircleOutlined } from '@ant-design/icons';
 
+const { Paragraph } = Typography;
 const { TabPane } = Tabs;
 
 export default function Index() {
   return (
-    <FloatingElement style={{ flex: 1, paddingTop: 10 }}>
+    <FloatingElement style={{ flex: 1, paddingTop: 20 }}>
       <Typography>
-        Make sure to go to Balances and click Settle to send out your funds
+        <Paragraph style={{ color: 'rgba(255,255,255,0.5)' }}>
+          Make sure to go to Balances and click Settle to send out your funds.
+        </Paragraph>
+        <Paragraph style={{ color: 'rgba(255,255,255,0.5)' }}>
+          To fund your wallet, use sollet.io. You can get SOL from FTX, Binance,
+          BitMax, and others. You can get other tokens from FTX.{' '}
+        </Paragraph>
       </Typography>
-      <br />
-      <Typography>
-        To fund your wallet, use sollet.io. You can get SOL from FTX, Binance,
-        BitMax, and others. You can get other tokens from FTX.
-      </Typography>
-      <br />
       <Tabs defaultActiveKey="orders">
         <TabPane tab="Open Orders" key="orders">
           <OpenOrdersTab />