diff --git a/web/src/actions/walletActions.js b/web/src/actions/walletActions.js index 5698ae3708..f98bb89721 100644 --- a/web/src/actions/walletActions.js +++ b/web/src/actions/walletActions.js @@ -7,6 +7,9 @@ export const ACTION_KEYS = { USER_TRADES_PENDING: 'USER_TRADES_PENDING', USER_TRADES_FULFILLED: 'USER_TRADES_FULFILLED', USER_TRADES_REJECTED: 'USER_TRADES_REJECTED', + ORDER_HISTORY_PENDING: 'ORDER_HISTORY_PENDING', + ORDER_HISTORY_FULFILLED: 'ORDER_HISTORY_FULFILLED', + ORDER_HISTORY_REJECTED: 'ORDER_HISTORY_REJECTED', USER_DEPOSITS_PENDING: 'USER_DEPOSITS_PENDING', USER_DEPOSITS_FULFILLED: 'USER_DEPOSITS_FULFILLED', USER_DEPOSITS_REJECTED: 'USER_DEPOSITS_REJECTED', @@ -178,6 +181,59 @@ export const getUserOrders = ({ }; }; +export const getOrdersHistory = ({ + symbol, + limit = 50, + page = 1, + start_date, + end_date, + open, + ...rest +}) => { + let dataParams = { page, limit }; + if (symbol) { + dataParams.symbol = symbol; + } + + if (start_date) { + dataParams.start_date = start_date; + } + + if (end_date) { + dataParams.end_date = end_date; + } + + if (open !== undefined) { + dataParams.open = open; + } + const query = querystring.stringify(dataParams); + + return (dispatch) => { + dispatch({ type: ACTION_KEYS.ORDER_HISTORY_PENDING, payload: { page } }); + axios + .get(`${ENDPOINTS.TRADES}?${query}`) + .then((body) => { + dispatch({ + type: ACTION_KEYS.ORDER_HISTORY_FULFILLED, + payload: { + ...body.data, + page, + isRemaining: body.data.count > page * limit, + }, + }); + // if (body.data.count > page * limit) { + // dispatch(getUserTrades({ symbol, limit, page: page + 1 })); + // } + }) + .catch((err) => { + dispatch({ + type: ACTION_KEYS.ORDER_HISTORY_REJECTED, + payload: err.response, + }); + }); + }; +}; + export const downloadUserTrades = (key) => { const query = querystring.stringify({ format: 'csv', diff --git a/web/src/components/Form/TradeFormFields/Clear.js b/web/src/components/Form/TradeFormFields/Clear.js index cbc233317f..5fea333416 100644 --- a/web/src/components/Form/TradeFormFields/Clear.js +++ b/web/src/components/Form/TradeFormFields/Clear.js @@ -5,7 +5,7 @@ const Clear = (props) => { const { onClick } = props; return ( -
+
{STRINGS['CLEAR']} diff --git a/web/src/containers/OperatorControls/components/AddTheme.js b/web/src/containers/OperatorControls/components/AddTheme.js index fa2aceb439..fcc2713506 100644 --- a/web/src/containers/OperatorControls/components/AddTheme.js +++ b/web/src/containers/OperatorControls/components/AddTheme.js @@ -6,6 +6,7 @@ import { UndoOutlined, BgColorsOutlined, CaretDownOutlined, + QuestionCircleOutlined, } from '@ant-design/icons'; import Color from 'color'; import initialLightTheme, { @@ -268,19 +269,29 @@ class AddTheme extends Component {
+ Use separated base - Use separated base + + Use single base - Use single base + diff --git a/web/src/containers/Trade/components/ActiveOrders.js b/web/src/containers/Trade/components/ActiveOrders.js index 17e76db646..85d0d08045 100644 --- a/web/src/containers/Trade/components/ActiveOrders.js +++ b/web/src/containers/Trade/components/ActiveOrders.js @@ -119,7 +119,7 @@ const generateHeaders = (pairData = {}, onCancel, onCancelAll, ICONS) => [ stop && formatToCurrency(stop, pairData.increment_price), renderCell: ({ stop }, key, index) => { return ( - + {stop && formatToCurrency(stop, pairData.increment_price)} ); diff --git a/web/src/containers/Trade/components/_TradeBlock.scss b/web/src/containers/Trade/components/_TradeBlock.scss index f0fcf2d84c..e557319d79 100644 --- a/web/src/containers/Trade/components/_TradeBlock.scss +++ b/web/src/containers/Trade/components/_TradeBlock.scss @@ -96,10 +96,10 @@ $tabs-title--margin: 2rem; &:after { content: ''; - height: 6px; + height: 4px; width: 100%; background-color: $trade_title-border--color; - top: -2px; + top: 0; left: 0; right: 0; position: absolute; diff --git a/web/src/containers/TradeTabs/components/MarketCard.js b/web/src/containers/TradeTabs/components/MarketCard.js index d79cf499cf..2bee9b6569 100644 --- a/web/src/containers/TradeTabs/components/MarketCard.js +++ b/web/src/containers/TradeTabs/components/MarketCard.js @@ -5,17 +5,24 @@ import SparkLine from './SparkLine'; import { /*formatAverage,*/ formatToCurrency } from 'utils/currency'; class MarketCard extends Component { - state = { - inProp: false, - }; + constructor(props) { + super(props); + const { market: { priceDifference = 0 } = {} } = this.props; + this.state = { + tickerDiff: priceDifference, + inProp: false, + }; + } UNSAFE_componentWillUpdate(nextProp) { const { - market: { priceDifference }, + market: { ticker }, } = this.props; - if (priceDifference !== nextProp.market.priceDifference) { + if (nextProp.market.ticker.close !== ticker.close) { + const tickerDiff = nextProp.market.ticker.close - ticker.close; this.setState((prevState) => ({ ...prevState, + tickerDiff, inProp: !prevState.inProp, })); } @@ -23,7 +30,7 @@ class MarketCard extends Component { render() { const { icons: ICONS, market, chartData, handleClick, index } = this.props; - const { inProp } = this.state; + const { inProp, tickerDiff } = this.state; const { key, @@ -33,7 +40,6 @@ class MarketCard extends Component { fullname, ticker, increment_price, - priceDifference, priceDifferencePercent, } = market; @@ -87,7 +93,7 @@ class MarketCard extends Component {
({ ...prevState, + tickerDiff, inProp: !prevState.inProp, })); } @@ -23,7 +30,7 @@ class MarketRow extends Component { render() { const { icons: ICONS, market, chartData, handleClick } = this.props; - const { inProp } = this.state; + const { inProp, tickerDiff } = this.state; const { key, @@ -32,7 +39,6 @@ class MarketRow extends Component { pairTwo, ticker, increment_price, - priceDifference, priceDifferencePercent, } = market; @@ -73,7 +79,7 @@ class MarketRow extends Component {
{ +const Filters = ({ coins = {}, onSearch, formName }) => { const [form] = Form.useForm(); useEffect(() => { @@ -36,7 +36,7 @@ const Filters = ({ coins = {}, onSearch }) => { return (
{ +const Filters = ({ pairs, onSearch, formName }) => { const [form] = Form.useForm(); useEffect(() => { @@ -31,7 +31,7 @@ const Filters = ({ pairs, onSearch }) => { return ( { const { params, activeTab } = this.state; - const { getUserTrades, getUserDeposits, getUserWithdrawals } = this.props; + const { + getOrdersHistory, + getUserTrades, + getUserDeposits, + getUserWithdrawals, + } = this.props; switch (activeTab) { case 0: - getUserTrades(RECORD_LIMIT, 1, { ...params, open: false }); + getOrdersHistory(RECORD_LIMIT, 1, { ...params, open: false }); break; case 1: getUserTrades(RECORD_LIMIT, 1, params); @@ -128,6 +134,12 @@ class TransactionsHistory extends Component { }; onSearch = ({ range = [], ...rest }) => { + const { jumpToPage } = this.state; + if (jumpToPage !== 0) { + this.setState({ + jumpToPage: 0, + }); + } const [startDate, endDate] = range; const start_date = startDate ? moment.utc(startDate).format() : undefined; const end_date = endDate ? moment.utc(endDate).format() : undefined; @@ -142,7 +154,7 @@ class TransactionsHistory extends Component { const { pairs } = this.props; this.setState({ headers: { - orderHistory: isMobile + orders: isMobile ? generateTradeHeadersMobile(symbol, pairs, coins, discount) : generateTradeHeaders(symbol, pairs, coins, discount), trades: isMobile @@ -158,22 +170,40 @@ class TransactionsHistory extends Component { const { pairs, coins } = this.props; this.setState({ filters: { - orderHistory: ( - + orders: ( + + ), + trades: ( + ), - trades: , deposits: ( - + ), withdrawals: ( - + ), }, }); }; setActiveTab = (activeTab = 0) => { - const { symbol, trades, withdrawals, deposits } = this.props; + const { symbol, orders, trades, withdrawals, deposits } = this.props; const { jumpToPage } = this.state; if (jumpToPage !== 0) { this.setState({ @@ -182,6 +212,7 @@ class TransactionsHistory extends Component { } this.setState({ activeTab }, () => { if ( + (orders.page === 1 && orders.fetched === false) || (trades.page === 1 && trades.fetched === false) || (withdrawals.page === 1 && withdrawals.fetched === false) || (deposits.page === 1 && deposits.fetched === false) @@ -221,12 +252,25 @@ class TransactionsHistory extends Component { }; handleNext = (pageCount, pageNumber) => { - const { trades, deposits, withdrawals } = this.props; + const { orders, trades, deposits, withdrawals } = this.props; const { params } = this.state; const pageTemp = pageNumber % 2 === 0 ? 2 : 1; const apiPageTemp = Math.floor((pageNumber + 1) / 2); switch (this.state.activeTab) { case 0: + if ( + RECORD_LIMIT === pageCount * pageTemp && + apiPageTemp >= orders.page && + orders.isRemaining + ) { + this.props.getOrdersHistory(RECORD_LIMIT, orders.page + 1, { + ...params, + open: false, + }); + this.setState({ jumpToPage: pageNumber }); + } + break; + case 1: if ( RECORD_LIMIT === pageCount * pageTemp && apiPageTemp >= trades.page && @@ -239,7 +283,7 @@ class TransactionsHistory extends Component { this.setState({ jumpToPage: pageNumber }); } break; - case 1: + case 2: if ( RECORD_LIMIT === pageCount * pageTemp && apiPageTemp >= deposits.page && @@ -249,7 +293,7 @@ class TransactionsHistory extends Component { this.setState({ jumpToPage: pageNumber }); } break; - case 2: + case 3: if ( RECORD_LIMIT === pageCount * pageTemp && apiPageTemp >= withdrawals.page && @@ -269,6 +313,7 @@ class TransactionsHistory extends Component { renderActiveTab = () => { const { + orders, trades, deposits, withdrawals, @@ -290,13 +335,13 @@ class TransactionsHistory extends Component { props.stringId = 'ORDER_HISTORY'; props.title = `${STRINGS['ORDER_HISTORY']}`; props.headers = headers.trades; - props.data = trades; + props.data = orders; props.filename = `order-history-${moment().unix()}`; props.withIcon = false; props.handleNext = this.handleNext; props.jumpToPage = jumpToPage; props.handleDownload = downloadUserTrades; - props.filters = filters.orderHistory; + props.filters = filters.orders; break; case 1: props.stringId = 'TRANSACTION_HISTORY.TITLE_TRADES'; @@ -482,6 +527,7 @@ const mapStateToProps = (store) => ({ pairs: store.app.pairs, coins: store.app.coins, id: store.user.id, + orders: store.wallet.orderHistory, trades: store.wallet.trades, deposits: store.wallet.deposits, withdrawals: store.wallet.withdrawals, @@ -493,6 +539,8 @@ const mapStateToProps = (store) => ({ }); const mapDispatchToProps = (dispatch) => ({ + getOrdersHistory: (limit, page = 1, params) => + dispatch(getOrdersHistory({ limit, page, ...params })), getUserTrades: (limit, page = 1, params) => dispatch(getUserTrades({ limit, page, ...params })), getUserDeposits: (limit, page = 1, params) => diff --git a/web/src/index.css b/web/src/index.css index 5f8229130f..e1d64519fc 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1689,10 +1689,10 @@ table th { position: relative; } .trade_block_tabs-wrapper .trade_block-title .trade_block-title-items .active:after { content: ''; - height: 6px; + height: 4px; width: 100%; background-color: var(--calculated_important-border); - top: -2px; + top: 0; left: 0; right: 0; position: absolute; } diff --git a/web/src/reducers/walletReducer.js b/web/src/reducers/walletReducer.js index 9a37df0631..8c94e28095 100644 --- a/web/src/reducers/walletReducer.js +++ b/web/src/reducers/walletReducer.js @@ -35,6 +35,7 @@ const joinData = (stateData = [], payloadData = []) => stateData.concat(payloadData); const INITIAL_STATE = { + orderHistory: INITIAL_API_OBJECT, trades: INITIAL_API_OBJECT, latestUserTrades: [], deposits: INITIAL_API_OBJECT, @@ -83,6 +84,42 @@ export default function reducer(state = INITIAL_STATE, { type, payload }) { }, }; + case ACTION_KEYS.ORDER_HISTORY_PENDING: { + const { page = 1 } = payload; + const data = page > 1 ? state.orderHistory.data : INITIAL_API_OBJECT.data; + return { + ...state, + orderHistory: { + ...INITIAL_API_OBJECT, + loading: true, + data, + }, + }; + } + case ACTION_KEYS.ORDER_HISTORY_REJECTED: + return { + ...state, + orderHistory: { + ...INITIAL_API_OBJECT, + loading: false, + fetched: true, + error: payload, + }, + }; + case ACTION_KEYS.ORDER_HISTORY_FULFILLED: + return { + ...state, + orderHistory: { + ...INITIAL_API_OBJECT, + loading: false, + fetched: true, + count: payload.count, + page: payload.page, + isRemaining: payload.isRemaining, + data: joinData(state.orderHistory.data, payload.data), + }, + }; + case ACTION_KEYS.ADD_USER_TRADES: { // check if we have trades from DB const tradesData = joinData(payload.trades, state.trades.data);