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

Comparing version 3.6.10 to 3.6.11

package.json

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

src/modules/app/components/routes.jsx

@@ -93,3 +93,4 @@ import React, { Component } from 'react';
 				viewProps = {
-					createMarketForm: p.createMarketForm
+					createMarketForm: p.createMarketForm,
+					scalarShareDenomination: p.scalarShareDenomination
 				};
@@ -129,3 +130,4 @@ viewComponent = <CreateMarketView {...viewProps} />;
 					keywords: p.keywords,
-					branch: p.branch
+					branch: p.branch,
+					scalarShareDenomination: p.scalarShareDenomination,
 				};
@@ -132,0 +134,0 @@ viewComponent = <MarketsView {...viewProps} />;

src/modules/create-market/components/create-market-form.jsx

@@ -8,5 +8,11 @@ import React, { PropTypes } from 'react';
 
+import { SHARE } from 'modules/market/constants/share-denominations';
+
+import getValue from 'utils/get-value';
+
 const CreateMarketForm = (p) => {
 	let form;
 
+	const shareDenominations = getValue(p, 'scalarShareDenomination.denominations');
+
 	switch (p.step) {
@@ -27,3 +33,7 @@ case 1:
 		case 5:
-			form = <Form5 {...p} />;
+			form = (<Form5
+				{...p}
+				selectedShareDenomination={SHARE}
+				shareDenominations={shareDenominations}
+			/>);
 			break;
@@ -30,0 +40,0 @@ }

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

@@ -16,2 +16,3 @@ import React, { PropTypes } from 'react';
 				{...p.createMarketForm}
+				scalarShareDenomination={p.scalarShareDenomination}
 			/>
@@ -18,0 +19,0 @@ </div>

src/modules/login-message/components/login-message-view.jsx

@@ -56,2 +56,32 @@ import React, { PropTypes } from 'react';
 			<h2>Technical updates:</h2>
+			<h3>November 12, 2016</h3>
+			<ol>
+				<li>
+					Added rescaling logic for categorical and scalar reports to augur.js fixReport and (new) unfixReport methods, and updated event / report loaders in UI accordingly.
+				</li>
+				<li>
+					Full reset of network 9000 (test chain) contracts.
+				</li>
+			</ol>
+			<h3>November 11, 2016</h3>
+			<ol>
+				<li>
+					Merged augur-core develop into master branch.
+				</li>
+				<li>
+					Changed tick size to tenths on trade page.
+				</li>
+				<li>
+					Added highlighting of the matching side of the order book when user clicks buy/sell.
+				</li>
+				<li>
+					Fixed abnormally high CPU utilization on markets listing page.
+				</li>
+				<li>
+					The trade page for scalar markets now properly displays the unit selection drop-down menu.  The share amounts on the page are updated automatically when a new unit is chosen.
+				</li>
+				<li>
+					Fixed scalar market labels (no longer improperly labeled as categorical markets).
+				</li>
+			</ol>
 			<h3>November 10, 2016</h3>
@@ -58,0 +88,0 @@ <ol>

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

@@ -57,3 +57,7 @@ import React, { Component } from 'react';
 				{s.selectedNav === MARKET_DATA_NAV_DETAILS &&
-					<MarketDetails {...p.market} />
+					<MarketDetails
+						{...p.market}
+						selectedShareDenomination={p.selectedShareDenomination}
+						shareDenominations={p.shareDenominations}
+					/>
 				}
@@ -60,0 +64,0 @@ </article>

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

@@ -5,3 +5,6 @@ import React, { PropTypes } from 'react';
 
+import { SHARE, MICRO_SHARE, MILLI_SHARE } from 'modules/market/constants/share-denominations';
+
 import getValue from 'utils/get-value';
+import setShareDenomination from 'utils/set-share-denomination';
 
@@ -11,2 +14,15 @@ const MarketDetails = (p) => {
 
+	const outstandingShares = setShareDenomination(getValue(p, 'outstandingShares.formatted'), p.selectedShareDenomination);
+	const shareDenomination = () => {
+		switch (p.selectedShareDenomination) {
+			case (MICRO_SHARE):
+				return p.shareDenominations.find(denomination => denomination.value === MICRO_SHARE).label;
+			case (MILLI_SHARE):
+				return p.shareDenominations.find(denomination => denomination.value === MILLI_SHARE).label;
+			default:
+			case (SHARE):
+				return p.shareDenominations.find(denomination => denomination.value === SHARE).label;
+		}
+	};
+
 	return (
@@ -30,3 +46,3 @@ <div className="market-details">
 						<span className="property-label">outstanding shares</span>
-						<ValueDenomination className="property-value" {...p.outstandingShares} />
+						<ValueDenomination className="property-value" formatted={outstandingShares} denomination={shareDenomination()} />
 					</li>
@@ -33,0 +49,0 @@ }

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

@@ -19,3 +19,3 @@ import React from 'react';
 					options={p.shareDenominations}
-					onChange={(denomination) => { p.updateSelectedShareDenomination(p.marketID, denomination); }}
+					onChange={(denomination) => { p.updateSelectedShareDenomination(p.id, denomination); }}
 				/>
@@ -22,0 +22,0 @@ }

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

@@ -7,16 +7,57 @@ import React from 'react';
 
-const MarketProperties = p => (
-	<ul className="market-properties">
-		{p.endDate &&
-			<li className="property end-date">
+import { SHARE, MICRO_SHARE, MILLI_SHARE } from 'modules/market/constants/share-denominations';
+
+import getValue from 'utils/get-value';
+import setShareDenomination from 'utils/set-share-denomination';
+
+const MarketProperties = (p) => {
+	const shareVolume = setShareDenomination(getValue(p, 'volume.rounded'), p.selectedShareDenomination);
+	const shareDenomination = () => {
+		switch (p.selectedShareDenomination) {
+			case (MICRO_SHARE):
+				return p.shareDenominations.find(denomination => denomination.value === MICRO_SHARE).label;
+			case (MILLI_SHARE):
+				return p.shareDenominations.find(denomination => denomination.value === MILLI_SHARE).label;
+			default:
+			case (SHARE):
+				return p.shareDenominations.find(denomination => denomination.value === SHARE).label;
+		}
+	};
+
+	return (
+		<ul className="market-properties">
+			{p.endDate &&
+				<li className="property end-date">
+					<a
+						data-tip
+						data-for={`${p.id}-end-date-tooltip`}
+						data-event="click focus"
+					>
+						<span className="property-label">{(p.isOpen && !p.isPendingReport ? (p.endDateLabel || 'End Date') : 'Ended')}:</span>
+						<ValueDate className="property-value" {...p.endDate} />
+					</a>
+					<ReactTooltip
+						id={`${p.id}-end-date-tooltip`}
+						type="light"
+						effect="solid"
+						place="top"
+						globalEventOff="click"
+					>
+						<span className="tooltip-text">
+							The outcome of this event will be known on or before {p.endDate.full}.
+						</span>
+					</ReactTooltip>
+				</li>
+			}
+			<li className="property fee">
 				<a
 					data-tip
-					data-for={`${p.id}-end-date-tooltip`}
+					data-for={`${p.id}-maker-fee-tooltip`}
 					data-event="click focus"
 				>
-					<span className="property-label">{(p.isOpen && !p.isPendingReport ? (p.endDateLabel || 'End Date') : 'Ended')}:</span>
-					<ValueDate className="property-value" {...p.endDate} />
+					<span className="property-label">Maker Fee:</span>
+					<ValueDenomination className="property-value" {...p.makerFeePercent} />
 				</a>
 				<ReactTooltip
-					id={`${p.id}-end-date-tooltip`}
+					id={`${p.id}-maker-fee-tooltip`}
 					type="light"
@@ -28,82 +69,17 @@ effect="solid"
 					<span className="tooltip-text">
-						The outcome of this event will be known on or before {p.endDate.full}.
+						{p.makerFeePercent.full} discounted fee for placing bids or asks on the books
 					</span>
 				</ReactTooltip>
 			</li>
-		}
-		<li className="property fee">
-			<a
-				data-tip
-				data-for={`${p.id}-maker-fee-tooltip`}
-				data-event="click focus"
-			>
-				<span className="property-label">Maker Fee:</span>
-				<ValueDenomination className="property-value" {...p.makerFeePercent} />
-			</a>
-			<ReactTooltip
-				id={`${p.id}-maker-fee-tooltip`}
-				type="light"
-				effect="solid"
-				place="top"
-				globalEventOff="click"
-			>
-				<span className="tooltip-text">
-					{p.makerFeePercent.full} discounted fee for placing bids or asks on the books
-				</span>
-			</ReactTooltip>
-		</li>
-		<li className="property fee">
-			<a
-				data-tip
-				data-for={`${p.id}-taker-fee-tooltip`}
-				data-event="click focus"
-			>
-				<span className="property-label">Taker Fee:</span>
-				<ValueDenomination className="property-value" {...p.takerFeePercent} />
-			</a>
-			<ReactTooltip
-				id={`${p.id}-taker-fee-tooltip`}
-				type="light"
-				effect="solid"
-				place="top"
-				globalEventOff="click"
-			>
-				<span className="tooltip-text">
-					{p.takerFeePercent.full} fee for taking bids or asks from the books
-				</span>
-			</ReactTooltip>
-		</li>
-		<li className="property volume">
-			<a
-				data-tip
-				data-for={`${p.id}-volume-tooltip`}
-				data-event="click focus"
-			>
-				<span className="property-label">Volume:</span>
-				<ValueDenomination className="property-value" {...p.volume} formatted={p.volume.rounded} />
-			</a>
-			<ReactTooltip
-				id={`${p.id}-volume-tooltip`}
-				type="light"
-				effect="solid"
-				place="top"
-				globalEventOff="click"
-			>
-				<span className="tooltip-text">
-					{p.volume.fullPrecision || p.volume.formatted} total {p.volume.denomination} traded
-				</span>
-			</ReactTooltip>
-		</li>
-		{p.numPendingReports && p.isPendingReport &&
-			<li className="property pending-reports">
+			<li className="property fee">
 				<a
 					data-tip
-					data-for={`${p.id}-pending-reports-tooltip`}
+					data-for={`${p.id}-taker-fee-tooltip`}
 					data-event="click focus"
 				>
-					<span className="property-label">Pending Reports:</span>
-					<span> <strong>{p.numPendingReports}</strong></span>
+					<span className="property-label">Taker Fee:</span>
+					<ValueDenomination className="property-value" {...p.takerFeePercent} />
 				</a>
 				<ReactTooltip
-					id={`${p.id}-pending-reports-tooltip`}
+					id={`${p.id}-taker-fee-tooltip`}
 					type="light"
@@ -115,10 +91,56 @@ effect="solid"
 					<span className="tooltip-text">
-						{p.numPendingReports} reports submitted on this market thus far
+						{p.takerFeePercent.full} fee for taking bids or asks from the books
 					</span>
 				</ReactTooltip>
 			</li>
-		}
-	</ul>
-);
+			{shareVolume &&
+				<li className="property volume">
+					<a
+						data-tip
+						data-for={`${p.id}-volume-tooltip`}
+						data-event="click focus"
+					>
+						<span className="property-label">Volume:</span>
+						<ValueDenomination className="property-value" formatted={shareVolume} denomination={shareDenomination()} />
+					</a>
+					<ReactTooltip
+						id={`${p.id}-volume-tooltip`}
+						type="light"
+						effect="solid"
+						place="top"
+						globalEventOff="click"
+					>
+						<span className="tooltip-text">
+							{shareVolume} total {p.volume.denomination} traded
+						</span>
+					</ReactTooltip>
+				</li>
+			}
+			{p.numPendingReports && p.isPendingReport &&
+				<li className="property pending-reports">
+					<a
+						data-tip
+						data-for={`${p.id}-pending-reports-tooltip`}
+						data-event="click focus"
+					>
+						<span className="property-label">Pending Reports:</span>
+						<span> <strong>{p.numPendingReports}</strong></span>
+					</a>
+					<ReactTooltip
+						id={`${p.id}-pending-reports-tooltip`}
+						type="light"
+						effect="solid"
+						place="top"
+						globalEventOff="click"
+					>
+						<span className="tooltip-text">
+							{p.numPendingReports} reports submitted on this market thus far
+						</span>
+					</ReactTooltip>
+				</li>
+			}
+		</ul>
+	);
+};
 
 export default MarketProperties;

src/modules/markets/components/markets-list.jsx

@@ -5,12 +5,20 @@ import React from 'react';
 
+import getValue from 'utils/get-value';
+
 const MarketsList = p => (
 	<article className="markets-list">
-		{(p.markets || []).map(market =>
-			<MarketPreview
-				key={market.id}
-				loginAccount={p.loginAccount}
-				{...market}
-			/>
-		)}
+		{(p.markets || []).map((market) => {
+			const selectedShareDenomination = getValue(p, `scalarShareDenomination.markets.${market.id}`);
+			const shareDenominations = getValue(p, 'scalarShareDenomination.denominations');
 
+			return (
+				<MarketPreview
+					key={market.id}
+					loginAccount={p.loginAccount}
+					{...market}
+					selectedShareDenomination={selectedShareDenomination}
+					shareDenominations={shareDenominations}
+				/>
+			);
+		})}
 		{!!p.pagination && !!p.pagination.numUnpaginated &&
@@ -17,0 +25,0 @@ <MarketsPagination pagination={p.pagination} />

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

@@ -23,2 +23,3 @@ import React, { PropTypes } from 'react';
 			pagination={p.pagination}
+			scalarShareDenomination={p.scalarShareDenomination}
 		/>
@@ -25,0 +26,0 @@ </section>

src/modules/my-reports/components/my-report.jsx

@@ -26,3 +26,3 @@ import React from 'react';
 						>
-							{p.reported}
+							{p.reported || '-'}
 						</span>
@@ -32,7 +32,7 @@ }
 						<span className="report-revealed">
-							{p.reported}
+							{p.reported || '-'}
 						</span>
 					}
 					{!p.isRevealed && !p.isCommitted &&
-						<span>{p.reported}</span>
+						<span>{p.reported || '-'}</span>
 					}
@@ -39,0 +39,0 @@ {!!p.outcome && p.isReportEqual &&

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

@@ -20,3 +20,3 @@ import React, { Component, PropTypes } from 'react';
 		this.state = {
-			timestamp: Date.now(), // Utilized to force a re-render and subsequent update of the input fields' values
+			timestamp: Date.now(), // Utilized to force a re-render and subsequent update of the input fields' values on `selectedOutcome` change
 			selectedNav: BUY,
@@ -38,3 +38,2 @@ shareInputPlaceholder: generateShareInputPlaceholder(this.props.selectedShareDenomination),
 			this.setState({
-				timestamp: Date.now(),
 				shareInputPlaceholder: generateShareInputPlaceholder(nextProps.selectedShareDenomination),
@@ -45,2 +44,9 @@ maxSharesDenominated: denominateShares(getValue(nextProps, 'selectedOutcome.trade.maxNumShares.value', SHARE, nextProps.selectedShareDenomination)),
 		}
+
+		const oldID = getValue(this.props, 'selectedOutcome.id');
+		const newID = getValue(nextProps, 'selectedOutcome.id');
+
+		if (oldID !== newID) {
+			this.setState({ timestamp: Date.now() }); // forces re-render of trade component via key value
+		}
 	}
@@ -50,3 +56,2 @@
 		this.setState({ selectedNav });
-		console.log('this -- ', this);
 		this.props.updateSelectedTradeSide(selectedNav);
@@ -53,0 +58,0 @@

src/selectors/markets.js

@@ -38,4 +38,3 @@ import makeNumber from 'utils/make-number';
 			extraInfo: 'some extraInfo for this market',
-			// type: types[randomInt(0, types.length - 1)],
-			type: types[1],
+			type: types[randomInt(0, types.length - 1)],
 			description: `Will the dwerps achieve a mwerp by the end of zwerp ${(index + 1)}?`,
@@ -52,3 +51,2 @@ endDate: makeDate(d),
 			isPendingReport: index > 0 && index % 4 === 0,
-			// isOpen: false,
 			marketLink: {
@@ -55,0 +53,0 @@ href: `/?m=${id}`,

src/utils/set-share-denomination.js

@@ -21,3 +21,3 @@ import { SHARE, MILLI_SHARE, MICRO_SHARE } from 'modules/market/constants/share-denominations';
 
-function formatValue(value, amount) { // BIG assumption here re: amount is that the formatted value is always displayed out to hundreths
+function formatValue(value, amount) {
 	const valueArray = value.split('');
@@ -27,3 +27,8 @@
 	const dotIndex = valueArray.indexOf('.');
-	valueArray.splice(dotIndex, 1);
+	let zeroPadAmount = amount;
+	if (dotIndex !== -1) {
+		valueArray.splice(dotIndex, 1);
+	} else {
+		zeroPadAmount += 2;
+	}
 
@@ -45,9 +50,9 @@ // Strip leading 0's
 	// Append 0's
-	for (let i = 0; i < amount; i++) {
+	for (let i = 0; i < zeroPadAmount; i++) {
 		valueArray.push('0');
 	}
 
-	return valueArray.join(''); // return joined string
+	return valueArray.join('').replace(/\B(?=(\d{3})+(?!\d))/g, ','); // return joined string w/ comma separating thousands, BIG assumption here is that we're always rounding to TWO decimal places
 }
 
 export default setShareDenomination;

No alert changes

Improved metrics

Total package byte prevSize

2321264

increased by0.43%

Lines of code

43382

increased by0.52%

No dependency changes