project-serum
/
serum-dex-ui
mirror of https://github.com/project-serum/serum-dex-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix order slider + info text optimization

This commit is contained in:
Philippe Maes 2020-08-30 16:30:23 +02:00
parent da33ecace3
commit bfc89cf61d
2 changed files with 35 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/TradeForm.jsx
View File

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

18
src/components/UserInfoTable/index.jsx
View File

@ -1,25 +1,27 @@
import BalancesTable from './BalancesTable'; import BalancesTable from './BalancesTable';
import OpenOrderTable from './OpenOrderTable'; import OpenOrderTable from './OpenOrderTable';
import React from 'react'; import React from 'react';
import { Tabs, Typography } from 'antd'; import { Tabs, Typography, Col, Row } from 'antd';
import FillsTable from './FillsTable'; import FillsTable from './FillsTable';
import FloatingElement from '../layout/FloatingElement'; import FloatingElement from '../layout/FloatingElement';
import { useOpenOrders, useBalances } from '../../utils/markets'; import { useOpenOrders, useBalances } from '../../utils/markets';
import { InfoCircleOutlined } from '@ant-design/icons';
const { Paragraph } = Typography;
const { TabPane } = Tabs; const { TabPane } = Tabs;
export default function Index() { export default function Index() {
return ( 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
</Typography>
<br />
<Typography> <Typography>
<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, To fund your wallet, use sollet.io. You can get SOL from FTX, Binance,
BitMax, and others. You can get other tokens from FTX. BitMax, and others. You can get other tokens from FTX.{' '}
</Paragraph>
</Typography> </Typography>
<br />
<Tabs defaultActiveKey="orders"> <Tabs defaultActiveKey="orders">
<TabPane tab="Open Orders" key="orders"> <TabPane tab="Open Orders" key="orders">
<OpenOrdersTab /> <OpenOrdersTab />