Merge pull request #732 from bitholla/develop

Develop

web/src/_customVariables.css

@@ -162,4 +162,14 @@
 	--coin-tusd-text: #ffffff;
 	--coin-dai: #f3c27a;
 	--coin-dai-text: #000000;
+	--coin-ama: #fa2902;
+	--coin-ama-text: #ffffff;
+	--coin-xtz: #2c7df7;
+	--coin-xtz-text: #ffffff;
+	--coin-doge: #c3a634;
+	--coin-doge-text: #ffffff;
+	--coin-uni: #ff4dab;
+	--coin-uni-text: #ffffff;
+	--coin-dot: #d80579;
+	--coin-dot-text: #ffffff;
 }

web/src/_variables.scss

@@ -299,6 +299,21 @@ $coin-tusd-text: var(--coin-tusd-text);
 $coin-dai: var(--coin-dai);
 $coin-dai-1: var(--coin-dai);
 $coin-dai-text: var(--coin-dai-text);
+$coin-ama: var(--coin-ama);
+$coin-ama-1: var(--coin-ama);
+$coin-ama-text: var(--coin-ama-text);
+$coin-xtz: var(--coin-xtz);
+$coin-xtz-1: var(--coin-xtz);
+$coin-xtz-text: var(--coin-xtz-text);
+$coin-doge: var(--coin-doge);
+$coin-doge-1: var(--coin-doge);
+$coin-doge-text: var(--coin-doge-text);
+$coin-uni: var(--coin-uni);
+$coin-uni-1: var(--coin-uni);
+$coin-uni-text: var(--coin-uni-text);
+$coin-dot: var(--coin-dot);
+$coin-dot-1: var(--coin-dot);
+$coin-dot-text: var(--coin-dot-text);
 
 $content-display-width: 100rem;
 $app-content-display-width: 75rem;

web/src/components/AppBar/index.js

@@ -178,6 +178,7 @@ class AppBar extends Component {
 			activePath,
 			onMenuChange,
 			menuItems,
+			router,
 		} = this.props;
 		const { securityPending, verificationPending, walletPending } = this.state;
 
@@ -223,9 +224,9 @@ class AppBar extends Component {
 						/>
 						<div
 							className="login-container"
-							onClick={() => this.props.router.push('/login')}
+							onClick={() => router.push('/login')}
 						>
-							{STRINGS['SIGN_IN'].toUpperCase()}
+							{STRINGS['LOGIN_TEXT'].toUpperCase()}
 						</div>
 					</div>
 				)}

web/src/components/CurrencyBall/_CurrencyBall.scss

@@ -264,6 +264,31 @@ $large-modifier: 2.25;
 		border: none !important;
 		color: $coin-dai-text !important;
 	}
+	&.ama {
+		background-color: $coin-ama;
+		border: none !important;
+		color: $coin-ama-text !important;
+	}
+	&.xtz {
+		background-color: $coin-xtz;
+		border: none !important;
+		color: $coin-xtz-text !important;
+	}
+	&.doge {
+		background-color: $coin-doge;
+		border: none !important;
+		color: $coin-doge-text !important;
+	}
+	&.uni {
+		background-color: $coin-uni;
+		border: none !important;
+		color: $coin-uni-text !important;
+	}
+	&.dot {
+		background-color: $coin-dot;
+		border: none !important;
+		color: $coin-dot-text !important;
+	}
 
 	&.s {
 		font-size: $small-font;

web/src/components/MobileBar/MobileBarTabs.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { MobileBarWrapper } from '.';
 import MarketSelector from 'components/AppBar/MarketSelector';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import Image from 'components/Image';
 
 const renderMobileTab = ({
 	title,
@@ -42,6 +43,7 @@ export const MobileBarTabs = ({
 	pair,
 	goToPair,
 	goToMarkets,
+	icons: ICONS,
 }) => {
 	const [isMarketSelectorOpen, setIsMarketSelectorOpen] = useState(false);
 
@@ -53,6 +55,12 @@ export const MobileBarTabs = ({
 		setIsMarketSelectorOpen(false);
 	};
 
+	let pair_base = '';
+	if (pair) {
+		const pairArray = pair.split('-');
+		pair_base = pairArray[0];
+	}
+
 	return (
 		<Fragment>
 			<MobileBarWrapper className="d-flex justify-content-between">
@@ -82,6 +90,16 @@ export const MobileBarTabs = ({
 						className="d-flex align-items-center ml-2"
 						onClick={toggleMarketSelector}
 					>
+						{pair_base && (
+							<Image
+								icon={
+									ICONS[`${pair_base.toUpperCase()}_ICON`]
+										? ICONS[`${pair_base.toUpperCase()}_ICON`]
+										: ICONS.DEFAULT_ICON
+								}
+								wrapperClassName="mobile-tab_market-indicator pt-3"
+							/>
+						)}
 						<span className="pt-2 trade-tab__market-selector pr-2">{pair}</span>
 						{isMarketSelectorOpen ? (
 							<CaretUpOutlined style={{ fontSize: '14px' }} />

web/src/config/lang/en.js

@@ -1465,6 +1465,7 @@ const nestedContent = {
 	UNDEFINED_ERROR_TITLE: 'You’ve Encountered an Unidentified Error',
 	UNDEFINED_ERROR:
 		'Wow! An unknown error has occurred. This could be a connection issue or a number of other things. You can try again later or try refreshing.',
+	POST_ONLY_TOOLTIP: 'Post only orders only execute as a limit order.', // new
 	REFRESH: 'Refresh',
 };
 

web/src/containers/Admin/General/index.js

@@ -18,6 +18,7 @@ import { upload, updateConstants } from './action';
 import { getGeneralFields } from './utils';
 import { publish } from 'actions/operatorActions';
 import merge from 'lodash.merge';
+import { clearFileInputById } from 'helpers/vanilla';
 
 import './index.css';
 import { handleUpgrade } from 'utils/utils';
@@ -151,6 +152,7 @@ class General extends Component {
 								icons[themeKey][key] = path;
 								this.setState({ currentIcon: {} });
 							} catch (error) {
+								clearFileInputById(`admin-file-input__${themeKey},${key}`);
 								message.error('Something went wrong!');
 								return;
 							}
@@ -355,6 +357,7 @@ class General extends Component {
 						accept="image/*"
 						onChange={this.handleChangeFile}
 						name={`${theme},${id}`}
+						id={`admin-file-input__${theme},${id}`}
 					/>
 				</label>
 			</div>

web/src/containers/Admin/SetupWizard/TradingInterface.js

@@ -129,9 +129,9 @@ const Features = ({ initialValues = {}, handleNext, updateConstants, kit }) => {
 					<div className="btn-container">
 						<Button htmlType="submit">Proceed</Button>
 					</div>
-					<span className="step-link" onClick={() => handleNext(4)}>
+					{/* <span className="step-link" onClick={() => handleNext(4)}>
 						Skip this step
-					</span>
+					</span> */}
 				</div>
 			</Form>
 		</div>

web/src/containers/Admin/SetupWizard/index.js

@@ -28,6 +28,12 @@ export default class SetupWizard extends Component {
 				timezone: 'UTC',
 				language: 'en',
 			},
+			tradeInitialvalues: {
+				pro_trade: true,
+				quick_trade: true,
+				chat: false,
+				home_page: true,
+			},
 		};
 	}
 
@@ -61,6 +67,7 @@ export default class SetupWizard extends Component {
 					? secrets.captcha.secret_key
 					: '',
 		};
+		let tradeInitialvalues = { ...this.state.tradeInitialvalues };
 		if (secrets.emails) {
 			emailInitialvalues = {
 				...emailInitialvalues,
@@ -85,10 +92,17 @@ export default class SetupWizard extends Component {
 				password: secrets.smtp.password !== 'null' ? secrets.smtp.password : '',
 			};
 		}
+		if (kit.features) {
+			tradeInitialvalues = {
+				...tradeInitialvalues,
+				...kit.features,
+			};
+		}
 		this.setState({
 			constants: data,
 			emailInitialvalues,
 			timeZoneInitialValues,
+			tradeInitialvalues,
 		});
 	};
 
@@ -112,12 +126,18 @@ export default class SetupWizard extends Component {
 	};
 
 	renderStep = () => {
-		const { currentTab, constants } = this.state;
+		const {
+			currentTab,
+			constants,
+			tradeInitialvalues,
+			timeZoneInitialValues,
+			emailInitialvalues,
+		} = this.state;
 		switch (currentTab) {
 			case 0:
 				return (
 					<TimeZone
-						initialValues={this.state.timeZoneInitialValues}
+						initialValues={timeZoneInitialValues}
 						handleNext={this.onTabChange}
 						updateConstants={this.updateConstants}
 					/>
@@ -135,7 +155,7 @@ export default class SetupWizard extends Component {
 			case 3:
 				return (
 					<TradingInterface
-						initialValues={constants.kit.features}
+						initialValues={tradeInitialvalues}
 						handleNext={this.onTabChange}
 						updateConstants={this.updateConstants}
 						kit={constants.kit}
@@ -147,7 +167,7 @@ export default class SetupWizard extends Component {
 						handleNext={this.onTabChange}
 						updateConstants={this.updateConstants}
 						setPreview={this.setPreview}
-						initialValues={this.state.emailInitialvalues}
+						initialValues={emailInitialvalues}
 					/>
 				);
 			default:

web/src/containers/App/App.js

@@ -628,6 +628,7 @@ class App extends Component {
 							<div className="d-flex flex-column f-1">
 								{!isHome && (
 									<AppBar
+										router={router}
 										menuItems={menuItems}
 										activePath={this.state.activeMenu}
 										onMenuChange={this.handleMenuChange}

web/src/containers/Trade/_Trade.scss

@@ -236,3 +236,45 @@ $order_entry-column--width-lg: 20rem;
 		}
 	}
 }
+
+.mobile-tab_market-indicator {
+	width: 2.5rem !important;
+	margin: 0.3rem 0.3rem 0 0.3rem;
+
+	svg {
+		.btc0,
+		.btc1,
+		.eth0,
+		.eth1,
+		.bch-icon,
+		.xrp-icon,
+		.xht-icon,
+		.xmr-icon,
+		.xlm-icon,
+		.eos-icon,
+		.trx-icon,
+		.ada-icon,
+		.bnb-icon,
+		.tusd-icon,
+		.dai-icon,
+		.ltc-icon,
+		.default-icon {
+			fill: $app-bar-menu-list-color !important;
+		}
+		.plus,
+		.minus {
+			stroke: $app-bar-menu-list-color !important;
+			stroke-width: 0.2rem;
+		}
+		.st0 {
+			fill: $base_top-bar-navigation_text;
+			stroke-width: 0rem;
+		}
+		.icon-check-1 {
+			stroke: $base_top-bar-navigation_text;
+		}
+		.xht-icon-1 {
+			fill: $dark-app-background-color !important;
+		}
+	}
+}

web/src/containers/Trade/components/OrderEntry.js

@@ -28,7 +28,7 @@ import {
 	step,
 	normalizeFloat,
 } from '../../../components/Form/validations';
-import { Loader } from '../../../components';
+import { Loader, Tooltip } from '../../../components';
 import { takerFee, DEFAULT_COIN_DATA } from '../../../config/constants';
 
 import STRINGS from '../../../config/localizedStrings';
@@ -500,7 +500,11 @@ class OrderEntry extends Component {
 			},
 			postOnly: {
 				name: 'post_only',
-				label: <span className="px-1 post-only-txt">{STRINGS['POST_ONLY']}</span>,
+				label: (
+					<Tooltip text={STRINGS['POST_ONLY_TOOLTIP']} className="light-theme">
+						<span className="px-1 post-only-txt">{STRINGS['POST_ONLY']}</span>
+					</Tooltip>
+				),
 				type: 'checkbox',
 				className: 'align-start my-0',
 			},

web/src/containers/Trade/components/_OrderEntry.scss

@@ -129,6 +129,7 @@
 	.post-only-txt {
 		font-size: 1rem;
 		color: $colors-deactivate-color2;
+		cursor: pointer;
 	}
 }
 

web/src/containers/Trade/index.js

@@ -38,6 +38,7 @@ import { Loader, MobileBarTabs, SidebarHub } from '../../components';
 
 import STRINGS from '../../config/localizedStrings';
 import { playBackgroundAudioNotification } from '../../utils/utils';
+import withConfig from 'components/ConfigProvider/withConfig';
 
 class Trade extends PureComponent {
 	constructor(props) {
@@ -294,6 +295,7 @@ class Trade extends PureComponent {
 			coins,
 			discount,
 			fees,
+			icons,
 		} = this.props;
 		const { chartHeight, symbol, activeTab, orderbookFetched } = this.state;
 
@@ -382,6 +384,7 @@ class Trade extends PureComponent {
 							pair={pair}
 							goToPair={this.goToPair}
 							goToMarkets={() => this.setActiveTab(3)}
+							icons={icons}
 						/>
 						<div className="content-with-bar d-flex">
 							{mobileTabs[activeTab].content}
@@ -568,4 +571,4 @@ const mapDispatchToProps = (dispatch) => ({
 	setOrderbooks: bindActionCreators(setOrderbooks, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Trade);
+export default connect(mapStateToProps, mapDispatchToProps)(withConfig(Trade));

web/src/containers/TransactionsHistory/_Filters.scss

@@ -83,5 +83,28 @@
 			color: $colors-main-black;
 			border-color: $colors-main-black;
 		}
+
+		&.active_search_button {
+			animation: shine 2s linear infinite alternate;
+			animation-fill-mode: both;
+			color: $colors-black;
+			box-shadow: 0 0 8px 0.1px $app-sidebar-background;
+			position: relative;
+		}
+	}
+}
+
+@keyframes shine {
+	10% {
+		color: $colors-black;
+		box-shadow: 0 0 8px 0.1px $app-sidebar-background;
+		transition-property: color, box-shadow;
+		transition-duration: 0.7s, 0.7s;
+		transition-timing-function: ease;
+	}
+	100% {
+		color: $colors-main-black;
+		box-shadow: 0 0 8px 0.1px $colors-black;
+		transition-property: color, box-shadow;
 	}
 }