augur-ui-react-components - npm Package Compare versions

Comparing version 3.6.7 to 3.6.8

package.json

 {
   "name": "augur-ui-react-components",
-  "version": "3.6.7",
+  "version": "3.6.8",
   "description": "Augur UI React Components",
@@ -5,0 +5,0 @@ "author": "Augur Project",

src/modules/market/components/market-active.jsx

@@ -18,6 +18,8 @@ import React, { Component, PropTypes } from 'react';
 		this.state = {
-			selectedOutcome: this.props.market.outcomes[0]
+			selectedOutcome: this.props.market.outcomes[0],
+			selectedTradeSide: null
 		};
 
 		this.updateSelectedOutcome = this.updateSelectedOutcome.bind(this);
+		this.updateSelectedTradeSide = this.updateSelectedTradeSide.bind(this);
 		this.determineDefaultShareDenomination = this.determineDefaultShareDenomination.bind(this);
@@ -47,2 +49,6 @@ }
 
+	updateSelectedTradeSide(selectedTradeSide) {
+		this.setState({ selectedTradeSide });
+	}
+
 	// NOTE -- only called if a market is of type SCALAR from `componentWillMount`
@@ -95,2 +101,3 @@ determineDefaultShareDenomination() {
 						outcome={s.selectedOutcome}
+						selectedTradeSide={s.selectedTradeSide}
 						selectedShareDenomination={selectedShareDenomination}
@@ -105,2 +112,3 @@ />
 							selectedShareDenomination={selectedShareDenomination}
+							updateSelectedTradeSide={this.updateSelectedTradeSide}
 						/>
@@ -123,2 +131,3 @@ }
 							selectedShareDenomination={selectedShareDenomination}
+							updateSelectedTradeSide={this.updateSelectedTradeSide}
 						/>
@@ -125,0 +134,0 @@ </div>

src/modules/market/components/market-basics.jsx

@@ -35,16 +35,2 @@ import React from 'react';
 				}
-
-				{p.isUpdaterVisible &&
-					<div className="updater">
-						Market data loaded {p.marketDataAge.lastUpdatedBefore}
-						<button
-							className="button"
-							disabled={p.marketDataAge.isMarketDataLoading}
-							data-tip={p.marketDataAge.isMarketDataLoading ? 'Loading' : 'Reload market data'}
-							onClick={() => p.updateData(p.id)}
-						>
-							Reload
-						</button>
-					</div>
-				}
 			</div>
@@ -51,0 +37,0 @@ </div>

src/modules/market/components/market-details.jsx

@@ -5,55 +5,67 @@ import React, { PropTypes } from 'react';
 
-const MarketDetails = p => (
-	<div className="market-details">
-		<ul className="properties">
-			{p.author != null &&
-				<li className="property author">
-					<span className="property-label">author</span>
-					<span className="property-value">{p.author}</span>
+import getValue from 'utils/get-value';
+
+const MarketDetails = (p) => {
+	const outcomeName = getValue(p, 'result.outcomeName');
+
+	return (
+		<div className="market-details">
+			<ul className="properties">
+				{outcomeName &&
+					<li className="property outcome">
+						<span className="property-label">Result</span>
+						<span className="property-value">{outcomeName} (<ValueDenomination {...p.result.proportionCorrect} />)</span>
+					</li>
+				}
+				{p.author != null &&
+					<li className="property author">
+						<span className="property-label">author</span>
+						<span className="property-value">{p.author}</span>
+					</li>
+				}
+				{p.isOpen && p.outstandingShares != null &&
+					<li className="property outstanding-shares">
+						<span className="property-label">outstanding shares</span>
+						<ValueDenomination className="property-value" {...p.outstandingShares} />
+					</li>
+				}
+				{p.extraInfo != null && p.extraInfo !== '' &&
+					<li className="property extra-info">
+						<span className="property-label">extra info</span>
+						<span className="property-value">{p.extraInfo}</span>
+					</li>
+				}
+				{p.resolution &&
+					<li className="property resolution">
+						<span className="property-label">resolution</span>
+						{getResolutionNode(p.resolution)}
+					</li>
+				}
+				{p.type === 'scalar' && p.minValue != null &&
+					<li className="property min-value">
+						<span className="property-label">minimum value</span>
+						<span className="property-value">{p.minValue}</span>
+					</li>
+				}
+				{p.type === 'scalar' && p.maxValue != null &&
+					<li className="property max-value">
+						<span className="property-label">maximum value</span>
+						<span className="property-value">{p.maxValue}</span>
+					</li>
+				}
+				<li className="property creation-date" data-tip={`created: ${p.creationTime.full}`}>
+					<span className="property-label">created</span>
+					<ValueDate className="property-value" {...p.creationTime} />
 				</li>
+			</ul>
+			{!!p.reportedOutcome &&
+				<div className="reported-outcome">
+					<hr />
+					<h4>This market is closed.</h4>
+					Reported outcome: {p.reportedOutcome}
+				</div>
 			}
-			{p.outstandingShares != null &&
-				<li className="property outstanding-shares">
-					<span className="property-label">outstanding shares</span>
-					<ValueDenomination className="property-value" {...p.outstandingShares} />
-				</li>
-			}
-			{p.extraInfo != null && p.extraInfo !== '' &&
-				<li className="property extra-info">
-					<span className="property-label">extra info</span>
-					<span className="property-value">{p.extraInfo}</span>
-				</li>
-			}
-			{p.resolution &&
-				<li className="property resolution">
-					<span className="property-label">resolution</span>
-					{getResolutionNode(p.resolution)}
-				</li>
-			}
-			{p.type === 'scalar' && p.minValue != null &&
-				<li className="property min-value">
-					<span className="property-label">minimum value</span>
-					<span className="property-value">{p.minValue}</span>
-				</li>
-			}
-			{p.type === 'scalar' && p.maxValue != null &&
-				<li className="property max-value">
-					<span className="property-label">maximum value</span>
-					<span className="property-value">{p.maxValue}</span>
-				</li>
-			}
-			<li className="property creation-date" data-tip={`created: ${p.creationTime.full}`}>
-				<span className="property-label">created</span>
-				<ValueDate className="property-value" {...p.creationTime} />
-			</li>
-		</ul>
-		{!!p.reportedOutcome &&
-			<div className="reported-outcome">
-				<hr />
-				<h4>This market is closed.</h4>
-				Reported outcome: {p.reportedOutcome}
-			</div>
-		}
-	</div>
-);
+		</div>
+	);
+};
 
@@ -60,0 +72,0 @@ MarketDetails.propTypes = {

src/modules/market/components/market-header.jsx

@@ -15,3 +15,3 @@ import React from 'react';
 		<div className="market-header-actions">
-			{p.marketType === SCALAR && !p.isPendingReport &&
+			{p.type === SCALAR && !p.isPendingReport &&
 				<Dropdown
@@ -18,0 +18,0 @@ default={p.selectedShareDenomination}

src/modules/market/components/market-positions-row.jsx

@@ -17,3 +17,3 @@ import React from 'react';
 	const purchasePrice = getValue(p, 'outcome.position.purchasePrice.formatted');
-	const lastPrice = getValue(p, 'outcome.position.lastPrice.formatted');
+	const lastPrice = getValue(p, 'outcome.lastPrice.formatted');
 	const realizedNet = getValue(p, 'outcome.position.realizedNet.formatted');
@@ -20,0 +20,0 @@ const unrealizedNet = getValue(p, 'outcome.position.unrealizedNet.formatted');

src/modules/market/components/market-properties.jsx

@@ -9,3 +9,3 @@ import React from 'react';
 	<ul className="market-properties">
-		{!!p.endDate &&
+		{p.endDate &&
 			<li className="property end-date">
@@ -17,3 +17,3 @@ <a
 				>
-					<span className="property-label">{p.endDateLabel || 'End Date'}:</span>
+					<span className="property-label">{(p.isOpen && !p.isPendingReport ? (p.endDateLabel || 'End Date') : 'Ended')}:</span>
 					<ValueDate className="property-value" {...p.endDate} />
@@ -20,0 +20,0 @@ </a>

src/modules/market/components/market-reported.jsx

@@ -8,10 +8,14 @@ import React from 'react';
 	<article className="market-reported">
-		<MarketBasics
-			{...p.market}
-			isUpdaterVisible
-			marketDataAge={p.marketDataAge}
-			updateData={p.marketDataUpdater.update}
-			updateIntervalSecs={p.marketDataUpdater.updateIntervalSecs}
-		/>
-		<MarketDetails key="market-info" {...p.market} />
+		<div className="market-group">
+			<article className="market-reported-details">
+				<MarketBasics
+					{...p.market}
+					isUpdaterVisible
+					marketDataAge={p.marketDataAge}
+					updateData={p.marketDataUpdater.update}
+					updateIntervalSecs={p.marketDataUpdater.updateIntervalSecs}
+				/>
+				<MarketDetails key="market-info" {...p.market} />
+			</article>
+		</div>
 	</article>
@@ -18,0 +22,0 @@ );

src/modules/market/components/market-view.jsx

@@ -20,4 +20,4 @@ import React from 'react';
 			{!isAvailable && <NullStateMessage message={nullMessage} />}
+			{isAvailable && isOpen && !isPendingReport && <MarketActive {...p} />}
 			{isAvailable && isPendingReport && <MarketReporting {...p} />}
-			{isAvailable && isOpen && !isPendingReport && <MarketActive {...p} />}
 			{isAvailable && !isOpen && !isPendingReport && <MarketReported {...p} />}
@@ -24,0 +24,0 @@ </section>

src/modules/order-book/components/order-book-row-side.jsx

@@ -9,8 +9,12 @@ import React from 'react';
 
+import { BUY, SELL } from 'modules/outcomes/constants/trade-types';
+import { BID } from 'modules/transactions/constants/types';
+
 const OrderBookRowSide = (p) => {
 	const orders = getValue(p, 'orders');
 	const nullMessage = 'No Orders';
+	const shouldHighlight = (p.type === BID && p.selectedTradeSide === SELL) || (p.type !== BID && p.selectedTradeSide === BUY);
 
 	return (
-		<article className="order-book-row-side">
+		<article className={`order-book-row-side ${shouldHighlight ? 'order-book-row-side-trading' : ''}`}>
 			{!orders || !orders.length ?
@@ -28,4 +32,4 @@ <NullStateMessage message={nullMessage} /> :
 							>
-								<ValueDenomination formatted={shares} />
-								<ValueDenomination formatted={price} />
+								<ValueDenomination formatted={p.type === BID ? shares : price} />
+								<ValueDenomination formatted={p.type === BID ? price : shares} />
 							</div>
@@ -32,0 +36,0 @@ );

src/modules/order-book/components/order-book-rows.jsx

@@ -5,7 +5,11 @@ import React from 'react';
 
+import { BID } from 'modules/transactions/constants/types';
+
 const OrderBookRows = p => (
 	<article className="order-book-rows">
 		<OrderBookRowSide
+			type={BID}
 			orders={p.bids}
 			selectedShareDenomination={p.selectedShareDenomination}
+			selectedTradeSide={p.selectedTradeSide}
 		/>
@@ -15,2 +19,3 @@ <OrderBookRowSide
 			selectedShareDenomination={p.selectedShareDenomination}
+			selectedTradeSide={p.selectedTradeSide}
 		/>
@@ -17,0 +22,0 @@ </article>

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

@@ -13,3 +13,3 @@ import React from 'react';
 	<article className="order-book">
-		{!p.marketType === SCALAR ?
+		{p.marketType !== SCALAR ?
 			<h3>Order Book <EmDash /> {p.outcome.name}</h3> :
@@ -22,2 +22,3 @@ <h3>Order Book</h3>
 			asks={p.outcome.orderBook.asks}
+			selectedTradeSide={p.selectedTradeSide}
 			selectedShareDenomination={p.selectedShareDenomination}
@@ -24,0 +25,0 @@ />

src/modules/outcomes/components/outcome-trade.jsx

@@ -47,2 +47,4 @@ import React, { Component, PropTypes } from 'react';
 		this.setState({ selectedNav });
+		console.log('this -- ', this);
+		this.props.updateSelectedTradeSide(selectedNav);
 
@@ -74,3 +76,3 @@ const trade = getValue(this.props, 'selectedOutcome.trade');
 			<article className="outcome-trade">
-				{!p.marketType === SCALAR ?
+				{p.marketType !== SCALAR ?
 					<h3>Create Order <EmDash /> {name && name}</h3> :
@@ -98,2 +100,3 @@ <h3>Create Order</h3>
 								max={s.maxSharesDenominated}
+								step="0.1"
 								onChange={(value) => { this.handleSharesInput(value); }}
@@ -106,2 +109,4 @@ />
 								value={trade.limitPrice}
+								step="0.1"
+								max={p.maxValue}
 								onChange={(value) => { trade.updateTradeOrder(null, value, trade.side); }}
@@ -131,3 +136,4 @@ />
 OutcomeTrade.propTypes = {
-	selectedShareDenomination: PropTypes.string
+	selectedShareDenomination: PropTypes.string,
+	updateSelectedTradeSide: PropTypes.function
 };
@@ -134,0 +140,0 @@

src/selectors/markets.js

@@ -50,4 +50,4 @@ import makeNumber from 'utils/make-number';
 			numPendingReports: 10,
-			// isPendingReport: index > 0 && index % 4 === 0,
-			isPendingReport: true,
+			isPendingReport: index > 0 && index % 4 === 0,
+			// isOpen: false,
 			marketLink: {
@@ -62,2 +62,9 @@ href: `/?m=${id}`,
 
+		// result
+		m.result = {
+			outcomeID: '1',
+			outcomeName: 'Testing',
+			proportionCorrect: makeNumber(1)
+		};
+
 		// tags
@@ -64,0 +71,0 @@ m.tags = makeTags();

No alert changes

Improved metrics

Total package byte prevSize

2306922

increased by0.15%

Lines of code

43081

increased by0.15%

No dependency changes