Merge pull request #504 from bitholla/web-2.0

Web 2.0

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',

web/src/components/Form/TradeFormFields/Clear.js

@@ -5,7 +5,7 @@ const Clear = (props) => {
 	const { onClick } = props;
 
 	return (
-		<div className="d-flex justify-content-end">
+		<div className="d-flex justify-content-end mb-0">
 			<span className="pointer text-uppercase blue-link" onClick={onClick}>
 				{STRINGS['CLEAR']}
 			</span>

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 {
 						<div className="mb-5">
 							<Group onChange={this.handleBaseMode} value={isSingleBase}>
 								<Radio value={false}>
+									Use separated base
 									<Tooltip
-										overlayStyle={{ zIndex: 10001 }}
+										overlayStyle={{ zIndex: 10001, maxWidth: '350px' }}
 										title="Edit multiple colors in the theme separately"
+										placement="right"
 									>
-										Use separated base
+										<QuestionCircleOutlined
+											style={{ color: '#ffffff' }}
+											className="ml-2"
+										/>
 									</Tooltip>
 								</Radio>
 								<Radio value={true}>
+									Use single base
 									<Tooltip
-										overlayStyle={{ zIndex: 10001 }}
+										overlayStyle={{ zIndex: 10001, maxWidth: '300px' }}
 										title="Easily edit the whole theme through a single base background color"
+										placement="right"
 									>
-										Use single base
+										<QuestionCircleOutlined
+											style={{ color: '#ffffff' }}
+											className="ml-2"
+										/>
 									</Tooltip>
 								</Radio>
 							</Group>

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 (
-				<td key={index}>
+				<td key={index} className="px-2">
 					{stop && formatToCurrency(stop, pairData.increment_price)}
 				</td>
 			);

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;

web/src/containers/TradeTabs/components/MarketCard.js

@@ -5,25 +5,32 @@ 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,
 			}));
 		}
 	}
 
 	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 {
 										<div className="d-flex">
 											<div
 												className={
-													priceDifference < 0
+													tickerDiff < 0
 														? `title-font price-diff-down trade-tab-price_diff_down ${state}`
 														: `title-font price-diff-up trade-tab-price_diff_up ${state}`
 												}

web/src/containers/TradeTabs/components/MarketRow.js

@@ -5,25 +5,32 @@ import SparkLine from './SparkLine';
 import { formatToCurrency } from 'utils/currency';
 
 class MarketRow 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,
 			}));
 		}
 	}
 
 	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 {
 							<div className="d-flex">
 								<div
 									className={
-										priceDifference < 0
+										tickerDiff < 0
 											? `title-font price-diff-down trade-tab-price_diff_down ${state}`
 											: `title-font price-diff-up trade-tab-price_diff_up ${state}`
 									}

web/src/containers/TransactionsHistory/components/DepositAndWithdrawlFilters.js

@@ -20,7 +20,7 @@ const STATUS_OPTIONS = {
 	},
 };
 
-const Filters = ({ coins = {}, onSearch }) => {
+const Filters = ({ coins = {}, onSearch, formName }) => {
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -36,7 +36,7 @@ const Filters = ({ coins = {}, onSearch }) => {
 	return (
 		<Form
 			form={form}
-			name="deposit-and-withdrawal-filters"
+			name={`${formName}-filters`}
 			className="ant-advanced-search-form"
 			onFinish={onFinish}
 			initialValues={{

web/src/containers/TransactionsHistory/components/TradeAndOrderFilters.js

@@ -6,7 +6,7 @@ import { dateFilters } from '../filterUtils';
 const { Option } = Select;
 const { RangePicker } = DatePicker;
 
-const Filters = ({ pairs, onSearch }) => {
+const Filters = ({ pairs, onSearch, formName }) => {
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -31,7 +31,7 @@ const Filters = ({ pairs, onSearch }) => {
 	return (
 		<Form
 			form={form}
-			name="trade-and-order-filters"
+			name={`${formName}-filters`}
 			className="ant-advanced-search-form"
 			onFinish={onFinish}
 			onValuesChange={onValuesChange}