Merge branch 'master' into #29-open-orders

Conflicts:
	build/components.jsx
	build/styles.css
	src/app.jsx
	src/selectors/markets.js
	test/assertions/market.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "augur-ui-react-components",
-  "version": "3.0.14",
+  "version": "3.0.21",
   "description": "Augur UI React Components",
   "author": "Baz (@thinkloop)",
   "license": "AAL",

src/app.jsx

@@ -31,11 +31,6 @@ export default function (appElement, selectors) {
 		accountLinkText: p.loginAccount && p.loginAccount.linkText || undefined
 	};
 
-	if (url !== window.location.pathname + window.location.search) {
-		window.history.pushState(null, null, url);
-		window.scrollTo(0, 0);
-	}
-
 	switch (p.activePage) {
 	case REGISTER:
 	case LOGIN:
@@ -91,9 +86,7 @@ export default function (appElement, selectors) {
 		node = (
 			<MarketPage
 				siteHeader={p.siteHeader}
-				sideOptions={p.sideOptions}
-				updateSelectedOutcome={p.selectedOutcome.updateSelectedOutcome}
-				selectedOutcomeID={p.selectedOutcome.selectedOutcomeID}
+				selectedOutcome={p.selectedOutcome}
 				cancelOrder={p.cancelOrder}
 				market={p.market}
 				numPendingReports={p.marketsTotals.numPendingReports}
@@ -125,4 +118,10 @@ export default function (appElement, selectors) {
 		node,
 		appElement
 	);
+
+
+	if (url !== window.location.pathname + window.location.search) {
+		window.history.pushState(null, null, url);
+		window.scrollTo(0, 0);
+	}
 }

src/assertions.js

@@ -16,7 +16,6 @@ import positionsMarkets from '../test/assertions/positions-markets';
 import positionsSummary from '../test/assertions/positions-summary';
 import searchSort from '../test/assertions/search-sort';
 import selectedOutcome from '../test/assertions/selected-outcome';
-import sideOptions from '../test/assertions/side-options';
 import siteHeader from '../test/assertions/site-header';
 import transactions from '../test/assertions/transactions';
 import transactionsTotals from '../test/assertions/transactions-totals';
@@ -43,7 +42,6 @@ export default {
 	positionsSummary,
 	searchSort,
 	selectedOutcome,
-	sideOptions,
 	siteHeader,
 	transactions,
 	transactionsTotals,

src/components.jsx

@@ -3,11 +3,13 @@ import assertions from './assertions';
 import * as PAGES from './modules/site/constants/pages';
 import * as AUTH_TYPES from './modules/auth/constants/auth-types';
 import * as TRANSACTION_TYPES from './modules/transactions/constants/types';
+import * as TRADE_TYPES from './modules/trade/constants/types';
 
 const constants = {
 	PAGES,
 	AUTH_TYPES,
-	TRANSACTION_TYPES
+	TRANSACTION_TYPES,
+	TRADE_TYPES
 };
 
 const components = {

src/modules/account/components/account-page.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes, Component } from 'react';
+import classnames from 'classnames';
 import SiteHeader from '../../site/components/site-header';
 import SiteFooter from '../../site/components/site-footer';
 import Link from '../../link/components/link';
@@ -16,6 +17,7 @@ export default class AccountPage extends Component {
 			name: this.props.account.name,
 			editName: false,
 			showFullID: false,
+			showFullAddress: false,
 			msg: ''
 		};
 	}
@@ -40,7 +42,7 @@ export default class AccountPage extends Component {
 							<h2 className="heading">Credentials</h2>
 							<table className="account-info">
 								<tbody>
-									<tr className="account-info-item">
+									<tr className={classnames('account-info-item', { displayNone: p.account.localNode })}>
 										<th className="title">Account Name:</th>
 										<td className="item">
 											{s.editName &&
@@ -89,6 +91,30 @@ export default class AccountPage extends Component {
 									</tr>
 
 									<tr className="account-info-item">
+										<th className="title">Account Address:</th>
+										<td className="item">
+											{!s.showFullAddress &&
+												<span>
+													{p.account.prettyAddress}
+												</span>
+											}
+											{s.showFullAddress &&
+												<textarea className="full-secure-login-id" value={p.account.id} readOnly />
+											}
+											<button
+												className="link"
+												title={s.showFullID ? 'Hide full address' : 'Show full address'}
+												onClick={() => {
+													const showHide = !s.showFullAddress;
+													this.setState({ showFullAddress: showHide });
+												}}
+											>
+												{s.showFullAddress ? '(hide address)' : '(show full address)'}
+											</button>
+										</td>
+									</tr>
+
+									<tr className={classnames('account-info-item', { displayNone: p.account.localNode })}>
 										<th className="title">Secure Login ID:</th>
 										<td className="item">
 											{!s.showFullID &&
@@ -114,13 +140,13 @@ export default class AccountPage extends Component {
 								</tbody>
 							</table>
 						</div>
-						<div className="account-section">
+						<div className={classnames('account-section', { displayNone: p.account.localNode })}>
 							<div className="account-info-item">
 								<h2 className="heading">Download Account</h2>
 								<p>
 									If you are running Augur using a local geth node, you can download your account data to login through the node.
 								</p>
-								<button className="button download-account" title="Click here to Download your Account." >
+								<button className="button download-account" title="Click here to Download your Account." onClick={() => p.account.downloadAccount()}>
 									Download Account
 								</button>
 							</div>

src/modules/account/less/account.less

@@ -40,10 +40,6 @@
 		.account-info {
 			padding: 2vmin 0;
 
-			.fade {
-				opacity: .25;
-			}
-
 			.account-info-item {
 				margin: 0.5rem 1vmin;
 

src/modules/bids-asks/components/bids-asks.jsx

@@ -9,7 +9,6 @@ const BidsAsks = (p) => (
 				<OrderBook
 					key={`order-book-${outcome.id}`}
 					outcome={outcome}
-					updateTradeOrder={outcome.trade.updateTradeOrder}
 					bids={outcome.orderBook.bids}
 					asks={outcome.orderBook.asks}
 				/>

src/modules/bids-asks/components/order-book.jsx

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import Clickable from '../../common/components/clickable';
 import ValueDenomination from '../../common/components/value-denomination';
 
 const OrderBook = (p) => (
@@ -9,14 +8,8 @@ const OrderBook = (p) => (
 				if (i !== 0) {
 					return (
 						<article key={bid.price.full} className="bid-ask bid">
-							<Clickable
-								onClick={() => { p.updateTradeOrder(p.outcome.id, bid.shares.value, bid.price.value, 'ask'); }}
-							>
-								<ValueDenomination className="shares" {...bid.shares} />
-							</Clickable>
-							<Clickable onClick={() => { p.updateTradeOrder(p.outcome.id, 0, bid.price.value); }}>
-								<ValueDenomination className="price" {...bid.price} />
-							</Clickable>
+							<ValueDenomination className="shares clickable" {...bid.shares} />
+							<ValueDenomination className="price clickable" {...bid.price} />
 						</article>
 					);
 				}
@@ -34,14 +27,8 @@ const OrderBook = (p) => (
 				if (i !== 0) {
 					return (
 						<article key={ask.price.full} className="bid-ask ask">
-							<Clickable onClick={() => { p.updateTradeOrder(p.outcome.id, 0, ask.price.value); }}>
-								<ValueDenomination className="price" {...ask.price} />
-							</Clickable>
-							<Clickable
-								onClick={() => { p.updateTradeOrder(p.outcome.id, ask.shares.value, ask.price.value, 'bid'); }}
-							>
-								<ValueDenomination className="shares" {...ask.shares} />
-							</Clickable>
+							<ValueDenomination className="price clickable" {...ask.price} />
+							<ValueDenomination className="shares clickable" {...ask.shares} />
 						</article>
 					);
 				}
@@ -59,7 +46,6 @@ const OrderBook = (p) => (
 
 OrderBook.propTypes = {
 	outcome: PropTypes.object,
-	updateTradeOrder: PropTypes.func,
 	bids: PropTypes.array,
 	asks: PropTypes.array
 };

src/modules/common/components/dropdown.jsx

@@ -2,13 +2,13 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
 const Dropdown = (p) => (
-	<span className={classnames('drop-down', p.className)}>
+	<span className={classnames('dropdown', p.className)}>
 		{!!p.selected &&
-			<span className="selected">{p.selected.label}</span>
+			<span className={classnames('selected', p.selected.value)}>{p.selected.label}</span>
 		}
 		<ul className="options">
-			{p.options.filter(option => option.value !== p.selected.value).map(option => (
-				<li key={option.value} className="option" onClick={() => p.onChange(option.value)}>{option.label}</li>
+			{p.options.filter(option => !p.selected || option.value !== p.selected.value).map(option => (
+				<li key={option.value} className={classnames('option', option.value)} onClick={() => p.onChange(option.value)}>{option.label}</li>
 			))}
 		</ul>
 	</span>

src/modules/common/components/input.jsx

@@ -10,11 +10,13 @@ export default class Input extends Component {
 		isMultiline: PropTypes.bool,
 		isClearable: PropTypes.bool,
 		debounceMS: PropTypes.number,
-		onChange: PropTypes.func
+		onChange: PropTypes.func,
+		onBlur: PropTypes.func
 	};
 
 	constructor(props) {
 		super(props);
+		this.finalDebounceMS = this.props.debounceMS > 0 || this.props.debounceMS === 0 ? this.props.debounceMS : 750;
 		this.state = {
 			value: this.props.value || '',
 			timeoutID: ''
@@ -28,34 +30,34 @@ export default class Input extends Component {
 		this.handleOnChange = this.handleOnChange.bind(this);
 		this.handleOnBlur = this.handleOnBlur.bind(this);
 		this.handleClear = this.handleClear.bind(this);
-		this.sendValue = this.sendValue.bind(this);
 	}
 
 	handleOnChange = (e) => {
 		const newValue = e.target.value;
-		if (this.props.debounceMS !== 0) {
+		if (this.finalDebounceMS) {
 			clearTimeout(this.state.timeoutID);
-			this.setState({ timeoutID: setTimeout(() => this.sendValue(newValue), this.props.debounceMS || 750) });
-		} else {
-			this.sendValue(newValue);
+			if (newValue !== this.props.value) {
+				this.setState({ timeoutID: setTimeout(() => this.props.onChange(newValue), this.finalDebounceMS) });
+			}
+		} else if (newValue !== this.props.value) {
+			this.props.onChange(newValue);
 		}
 		this.setState({ value: newValue });
 	}
 
 	handleOnBlur = () => {
-		if (this.props.debounceMS !== 0) {
+		if (this.finalDebounceMS) {
 			clearTimeout(this.state.timeoutID);
-			this.sendValue(this.state.value);
+			if (this.state.value !== this.props.value) {
+				this.props.onChange(this.state.value);
+			}
 		}
+		this.props.onBlur && this.props.onBlur();
 	}
 
 	handleClear = () => {
 		this.setState({ value: '' });
-		this.sendValue('');
-	}
-
-	sendValue = (value) => {
-		this.props.onChange(value);
+		this.props.onChange('');
 	}
 
 	render() {

src/modules/common/components/value-denomination.jsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 const ValueDenomination = (p) => (
 	<span className={classnames('value-denomination', p.className, { positive: p.formattedValue > 0, negative: p.formattedValue < 0 })}>
-		{(p.formatted) &&
+		{p.formatted &&
 			<span className="value">{p.formatted}</span>
 		}
 		{p.denomination &&

src/modules/common/less/drop-down.less → src/modules/common/less/dropdown.less

@@ -1,4 +1,4 @@
-.drop-down {
+.dropdown {
 	display: inline-block; position: relative;
 	color: @color-light-normal;
 	background: @color-dark-hover;
@@ -12,7 +12,7 @@
 
 	.selected {
 		display: block;
-		padding: 0.5rem 1.2rem;
+		padding: 0.5em 1.2em;
 	}
 
 	.options {
@@ -25,17 +25,12 @@
 
 		.option {
 			display: block;
-			padding: 0.5rem 1.4rem;
-			font-size: 0.8em;
+			padding: 0.5em 1.2em;
 
 			&:hover, &:focus, &:active {
 				color: white;
 				background: @color-dark-active;
 			}
-
-			&:last-child {
-				padding-bottom: 1rem;
-			}
 		}
 	}
 }

src/modules/common/less/general.less

@@ -115,3 +115,11 @@ input[type=file] {
 .displayNone {
 	display: none !important;
 }
+
+.fade {
+	opacity: .25;
+}
+
+.unfade {
+	opacity: 1;
+}