New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

augur-ui-react-components

Package Overview
Dependencies
Maintainers
5
Versions
221
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

3.5.25
to
3.5.26

src/modules/branch/components/branch.jsx
src/modules/branch/less/branch.less

5

package.json
{
"name": "augur-ui-react-components",
"version": "3.5.25",
"version": "3.5.26",
"description": "Augur UI React Components",

@@ -58,3 +58,4 @@ "author": "Augur Project",

"react-dom": "15.2.1",
"react-highcharts": "9.0.0"
"react-highcharts": "9.0.0",
"react-tooltip": "3.2.1"
},

@@ -61,0 +62,0 @@ "devDependencies": {

47

src/modules/account/components/account-view.jsx
import React, { PropTypes, Component } from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';

@@ -56,3 +57,3 @@ import Link from '../../link/components/link';

} catch (err) {
console.log(err);
console.error(err);
}

@@ -86,3 +87,3 @@ };

{!s.editName &&
<span title="Click here to add a name to your account.">
<span data-tip data-for="edit-name-tooltip">
{p.account.name || 'Click here to add a name.'}

@@ -93,4 +94,4 @@ </span>

<button
data-tip data-for="change-name-tooltip"
className="link" onClick={() => this.setState({ editName: true })}
title="Click here to change your Account Name"
>

@@ -103,4 +104,4 @@ (change name)

className="button"
data-tip data-for="cancel-edit-name-tooltip"
onClick={() => this.setState({ name: '', editName: false })}
title="Cancel without saving new name"
>

@@ -113,2 +114,3 @@ cancel

className="button make"
data-tip data-for="save-name-tooltip"
onClick={() => {

@@ -118,3 +120,2 @@ p.account.editName(s.name);

}}
title="Save new account name"
>

@@ -148,3 +149,2 @@ save change

className="display-full-login-id"
title="Click here to copy your Login ID."
value={p.account.loginID}

@@ -157,3 +157,2 @@ readOnly

className="link"
title={s.showFullID ? 'Hide full id' : 'Show full id'}
onClick={() => {

@@ -166,3 +165,8 @@ this.setState({ showFullID: !s.showFullID });

{s.showFullID &&
<button className="button" title="Click here to copy your Login ID." onClick={this.loginIDCopy}>Copy Login ID</button>
<button
className="button"
onClick={this.loginIDCopy}
>
Copy Login ID
</button>
}

@@ -214,3 +218,3 @@ </td>

placeholder="Amount to transfer"
title="Amount to transfer"
data-tip data-for="amount-to-transfer-tooltip"
value={this.state.sendAmount}

@@ -221,7 +225,7 @@ onChange={sendAmount => this.setState({ sendAmount: sendAmount.target.value })}

className="currency-selector"
title="Currency Type"
data-tip data-for="select-currency-tooltip"
onChange={currency => this.setState({ currency: currency.target.value })}
>
<option value="eth">ether (eth)</option>
<option value="realEth">Real Ether (eth)</option>
<option value="ETH">Ether (ETH)</option>
<option value="real ETH">Real Ether (ETH)</option>
<option value="REP">REP (REP)</option>

@@ -235,3 +239,3 @@ </select>

placeholder="Recipient Address"
title="Recipient Address"
data-tip data-for="recipient-address-tooltip"
value={this.state.recipientAddress}

@@ -242,3 +246,2 @@ onChange={recipientAddress => this.setState({ recipientAddress: recipientAddress.target.value })}

className="button make"
title="Click to Send Currency"
onClick={this.handleTransfer}

@@ -261,5 +264,4 @@ >

download={p.account.downloadAccountFileName}
title="Click here to Download your Account Key File."
>
Download Account Key File
Download Account Key File
</a>

@@ -272,8 +274,15 @@ </div>

<p>
Read <Link {...p.loginMessageLink}>
important information
</Link> about Augur
Read <Link {...p.loginMessageLink}> important information</Link> about Augur
</p>
</div>
</div>
<ReactTooltip id="edit-name-tooltip" type="light" effect="solid" place="top">
<span className="tooltip-text">Click here to add a name to your account</span>
</ReactTooltip>
<ReactTooltip id="change-name-tooltip" type="light" effect="solid" place="top">
<span className="tooltip-text">Click here to change your account name</span>
</ReactTooltip>
<ReactTooltip id="recipient-address-tooltip" type="light" effect="solid" place="top">
<span className="tooltip-text">Recipient&#39;s Ethereum address</span>
</ReactTooltip>
</section>

@@ -280,0 +289,0 @@ </main>

11

src/modules/auth/components/auth-form.jsx
import React, { Component, PropTypes } from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';

@@ -207,3 +208,3 @@ import Link from '../../link/components/link';

className={classnames({ displayNone: !p.isVisibleRememberMe })}
title="Click Here to remember your account information locally."
data-tip data-for="remember-me-tooltip"
text="Remember Me"

@@ -229,3 +230,3 @@ isChecked={s.rememberMe}

className="button x-button unstyled"
title="Back to Markets Page"
data-tip data-for="close-link-tooltip"
href={p.closeLink.href}

@@ -236,2 +237,8 @@ onClick={p.closeLink.onClick}

</Link>
<ReactTooltip id="remember-me-tooltip" type="light" effect="solid" place="top">
<span className="tooltip-text">Click here to save your account information in your browser&#39;s local storage.</span>
</ReactTooltip>
<ReactTooltip id="close-link-tooltip" type="light" effect="solid" place="top">
<span className="tooltip-text">Back to Markets Page</span>
</ReactTooltip>
</form>

@@ -238,0 +245,0 @@ );

25

src/modules/chat/components/chat-view.jsx
import React, { Component } from 'react';
import ReactTooltip from 'react-tooltip';
import ValueTimestamp from '../../common/components/value-timestamp';

@@ -40,7 +41,17 @@

const key = `${payload.address}_${payload.timestamp.full}_${messageCount}`;
let displayName;
let tooltipID;
if (payload.name === '') {
displayName = payload.address;
} else if (payload.name === 'Anonymous Coward') {
displayName = payload.name;
} else {
displayName = payload.name;
tooltipID = `${key}-address-tooltip`;
}
messageCount += 1;
if (payload.name === '') {
if (!tooltipID) {
return (
<li key={key}>
<span>{payload.address}</span> [<small><ValueTimestamp {...payload.timestamp} /></small>]: {payload.message}
<span>{displayName}</span> [<small><ValueTimestamp {...payload.timestamp} /></small>]: {payload.message}
</li>

@@ -51,3 +62,6 @@ );

<li key={key}>
<span title={payload.address}>{payload.name}</span> [<small><ValueTimestamp {...payload.timestamp} /></small>]: {decodeURIComponent(payload.message)}
<span data-tip data-for={tooltipID}>{displayName}</span> [<small><ValueTimestamp {...payload.timestamp} /></small>]: {decodeURIComponent(payload.message)}
<ReactTooltip id={tooltipID} type="light" effect="solid" place="top">
<span className="tooltip-text">{payload.address}</span>
</ReactTooltip>
</li>

@@ -63,3 +77,3 @@ );

className="unstyled close-chat-button"
title="Close chat window"
data-tip data-for="close-chat-tooltip"
onClick={p.toggleChat}

@@ -89,2 +103,5 @@ >

</div>
<ReactTooltip id="close-chat-tooltip" type="error" effect="solid" place="top">
<span className="tooltip-text">Close chat window</span>
</ReactTooltip>
</section>

@@ -91,0 +108,0 @@ );

34

src/modules/common/components/checkbox.jsx
import React, { PropTypes } from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';
const Checkbox = p => (
<button
className={classnames('checkbox unstyled', p.className, { checked: p.isChecked })}
type="button"
title={p.title}
onClick={p.onClick}
>
<span className="checkbox-box" />
<span className="checkbox-label" tabIndex={p.tabIndex} >
{p.text}
</span>
{p.text2 != null &&
<span className="checkbox-label2" >
{p.text2}
<span>
<button
className={classnames('checkbox unstyled', p.className, { checked: p.isChecked })}
type="button"
data-tip={p.title}
onClick={p.onClick}
>
<span className="checkbox-box" />
<span className="checkbox-label" tabIndex={p.tabIndex} >
{p.text}
</span>
}
</button>
{p.text2 != null &&
<span className="checkbox-label2" >
{p.text2}
</span>
}
</button>
<ReactTooltip type="light" effect="solid" place="top" />
</span>
);

@@ -22,0 +26,0 @@

7

src/modules/common/components/core-stats.jsx

@@ -16,3 +16,8 @@ import React, { PropTypes } from 'react';

>
<span className="core-stat-label">{p.coreStats[i][stat].label}:</span>
<span
className="core-stat-label"
data-tip={p.coreStats[i][stat].title}
>
{p.coreStats[i][stat].label}:
</span>
{p.coreStats[i][stat].value && p.coreStats[i][stat].value.value ?

@@ -19,0 +24,0 @@ <ValueDenomination

17

src/modules/common/components/tab-navigation.jsx
import React from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';
import Link from '../../link/components/link';

@@ -25,10 +25,9 @@ import ValueDenomination from '../../../modules/common/components/value-denomination';

<ValueDenomination
title={navItem.leadingTitle ? `${navItem.leadingTitle}: ${navItem.leadingValue.full}` : ''}
data-tip data-for={`tab-${i}-leading-tooltip`}
{...navItem.leadingValue || {}}
/>
}
{navItem.trailingValue &&
<ValueDenomination
title={navItem.trailingTitle ? `${navItem.trailingTitle}: ${navItem.trailingValue.full}` : ''}
data-tip data-for={`tab-${i}-trailing-tooltip`}
className="colorize"

@@ -38,2 +37,12 @@ {...navItem.trailingValue || {}}

}
<ReactTooltip id={`tab-${i}-leading-tooltip`} type="light" effect="solid" place="top">
<span className="tooltip-text">
{navItem.leadingTitle ? `${navItem.leadingTitle}: ${navItem.leadingValue.full}` : ''}
</span>
</ReactTooltip>
<ReactTooltip id={`tab-${i}-trailing-tooltip`} type="light" effect="solid" place="top">
<span className="tooltip-text">
{navItem.trailingTitle ? `${navItem.trailingTitle}: ${navItem.trailingValue.full}` : ''}
</span>
</ReactTooltip>
</section>

@@ -40,0 +49,0 @@ }

41

src/modules/common/components/value-denomination.jsx
import React, { PropTypes } from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';
const ValueDenomination = p => (
<span
className={classnames('value-denomination', p.className, { positive: p.formattedValue > 0, negative: p.formattedValue < 0 })}
title={(p.title && p.title) || ''}
>
{p.prefix &&
<span className="prefix">{p.prefix}</span>
}
{p.formatted &&
<span className="value" title={p.fullPrecision}>{p.formatted}</span>
}
{p.denomination &&
<span className="denomination">{p.denomination}</span>
}
{p.postfix &&
<span className="postfix">{p.postfix}</span>
}
<span>
<span
className={classnames('value-denomination', p.className, { positive: p.formattedValue > 0, negative: p.formattedValue < 0 })}
>
{p.prefix &&
<span className="prefix">{p.prefix}</span>
}
{p.formatted && p.fullPrecision &&
<span className="value pointer" data-tip={p.fullPrecision} data-event="click focus">{p.formatted}</span>
}
{p.formatted && !p.fullPrecision &&
<span className="value">{p.formatted}</span>
}
{p.denomination &&
<span className="denomination">{p.denomination}</span>
}
{p.postfix &&
<span className="postfix">{p.postfix}</span>
}
</span>
<ReactTooltip type="light" effect="solid" place="top" />
</span>

@@ -32,6 +38,5 @@ );

prefix: PropTypes.string,
postfix: PropTypes.string,
title: PropTypes.string
postfix: PropTypes.string
};
export default ValueDenomination;

107

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

@@ -58,120 +58,35 @@ import React, { PropTypes } from 'react';

<h2>Technical updates:</h2>
<h3>November 2, 2016</h3>
<h3>November 4, 2016</h3>
<ol>
<li>
Added reporting cycle info and progress bar display at the top of the markets listing if you are logged in.
Changed the tooltips in the market preview panel (in the main markets listing) to use click-to-show-and-hide tooltips, instead of hover-to-show, since hover is not available on mobile. If these tooltips have the desired feel, the remainder of the tooltips can be converted to this form as well. (There are only a few exceptions, in the case of elements that have both a tooltip and a click function.)
</li>
</ol>
<h3>November 1, 2016</h3>
<ol>
<li>
Added support for <a href="https://github.com/AugurProject/augur-core/commit/7daf6441e3ba652aa7f19e1ec9e5587d90cd718e" className="link" target="_blank" rel="noopener noreferrer">off-chain orders</a> to the back-end. Off chain trading will allow users to place orders for the low low cost of zero! This means you can place limit orders on the book to buy and sell and update them at no cost and effectively instantly without waiting for blocks. The largest cost in trading on Augur was actually placing orders, not taking them interestingly enough, so this solves that problem. It will make the experience cheaper and faster. Trades taking orders off the book [or in other words filling them] however will still occur on chain until state channels progress further.
<br />
The off chain order book can be stored anywhere, so something like Whisper [which has a PoW to mitigate DDoS] or IPFS or even using logs on Ethereum [which is still about 100x cheaper than the original on chain orderbook system].
<br />
Off chain order placement allows people to trade more like they&#39;re used to, being able to add, remove, and update orders easily and quickly as opposed to waiting for their transaction to be mined as they have to do now.
Market titles in the main markets listing now link to the trade page.
</li>
<li>
Fixed the logged return value (error code -3) in submitReport on-contract function that is generated when the computed report hash does not match the stored report hash.
Clicking on tags in the market preview panel (in the main markets listing) now works correctly.
</li>
<li>
Completed full contract re-upload to the public testnet (Morden).
Added Real ETH (i.e., testnet Ether) balance display to the sub-navbar. Previously this was displayed as a popup when hovering over the transactions button on the main navbar, which did not make sense. Real ETH is an important value for users to know and to distinguish from the play-money &quot;ETH&quot; used for trading (i.e., Ether IOU tokens which will be tradeable one-to-one for Ether when Augur is live, but which are simply play-money during beta).
</li>
</ol>
<h3>October 31, 2016</h3>
<h3>November 3, 2016</h3>
<ol>
<li>
Added <a href="https://crypto.stanford.edu/sjcl/" className="link" target="_blank" rel="noopener noreferrer">SJCL</a> to <a href="https://github.com/ethereumjs/keythereum" className="link" target="_blank" rel="noopener noreferrer">keythereum</a> as a fallback implementation of PBKDF2, for cases where a build/browserify error deletes the built-in Node.js&#39;s built-in <a href="https://nodejs.org/api/crypto.html" className="link" target="_blank" rel="noopener noreferrer">crypto module&#39;s</a> pbkdf2 and pbkdf2Sync methods. Note: SJCL&#39;s <a href="https://github.com/bitwiseshiftleft/sjcl/blob/master/core/pbkdf2.js" className="link" target="_blank" rel="noopener noreferrer">PBKDF2 implementation</a> is significantly slower than the crypto module&#39;s implementation, so keythereum will use the crypto module methods if they are available.
Added <a href="https://github.com/wwayne/react-tooltip" className="link" target="_blank" rel="noopener noreferrer">react-tooltip</a> module, and converted all &quot;title&quot; fields in the UI to instead use proper tooltips. (Values in title fields are not viewable on mobile.)
</li>
<li>
The transaction display for reports on scalar events now shows the numerical outcome reported.
Only add market description tooltips to the transactions display if a market description is truncated (to 100 characters).
</li>
<li>
After submitting a report, you are now automatically taken to the next available event for reporting (instead of to the associated market detail page). After submitting your final report, you end up at the markets listing.
Changed currency abbreviations on the Account page to match those used elsewhere in the UI (REP for Reputation, real ETH for real Ether, and ETH for Ether).
</li>
<li>
Added (actual) gas fees to the commit report transaction display, and properly labeled the estimated gas fees as an estimate.
Changed the units for reporting cycle length display (was seconds).
</li>
<li>
Report ethicality is now stored on-chain (with the encrypted report and salt), and is automatically looked up for events the user is required to report on. The ethics field is simply added to submitReportHash as an extra argument. (This way writing it to chain does not require an extra transaction, and reading it back can be done at the same time as looking up the encrypted report and salt, which would be done anyway.)
Moved the Branch component to its own module.
</li>
<li>
Reset the private testing chain (private.augur.net, as well as temporarily augur-dev.firebaseapp.com and local.augur.net) due to minor contract changes.
</li>
<li>
Stored reports are now loaded directly from the blockchain, if available.
</li>
<li>
Added a new &quot;rootBranch&quot; setting to the front-end config file (src/env.json). If rootBranch is set to false, you start on the most recently created created branch (instead of the root branch 1010101, which is normally the default). This can be useful for reporting testing because the test sequence spawns a new branch when it is run, so it can be used to continue an aborted reporting test.
</li>
</ol>
<h3>October 30, 2016</h3>
<ol>
<li>
Market ID is now looked up automatically when getting events that you are required to report on. All reports you are required to fill out are now loaded during the initial markets loading (rather than only after you happen to browse to the page containing the associated markets).
</li>
<li>
Updated/fixed the middleware and UI reporting user-test setup functions, and successfully completed a run-thru of the UI reporting setup.
</li>
</ol>
<h3>October 29, 2016</h3>
<ol>
<li>
Fully automated to-fixed-point parameter conversions and from-fixed-point return value conversions. Fixed-point parameter names (will) start with &quot;fxp&quot;, and functions with fixed-point return values have &quot;# @return fxp&quot; on the line prior to the function definition. To support these changes, I added fixed-point conversions to the auto-generated API (as well as the associated static API data and back-end API maker script).
</li>
<li>
Added result parser method names to the auto-generated API. In combination with automatic fixed-point conversion, nearly all the API will now be dynamically generated and can be updated automatically when new contracts are uploaded. The only remaining manual API endpoints will be a handful of bindings that do a significant amount of pre- or post-request processing: the &quot;big getters&quot;, the primary trading methods (buy, ask, and trade on the develop contracts), and a couple of the reporting methods.
</li>
<li>
Full remove-and-resync of the Augur geth public testnet node (eth3.augur.net and ws.augur.net) as well as the separate geth instance on our faucet server.
</li>
<li>
Market detail page now displays market creation and ending date and time (instead of just the date). Hovering displays the full UTC timestamp, including milliseconds and day of the week.
</li>
<li>
Removed deprecated onConfirmed callbacks from augur.js.
</li>
<li>
Normalized market IDs received from get-market-ID-from-event-ID methods getMarket and getMarkets.
</li>
</ol>
<h3>October 28, 2016</h3>
<ol>
<li>
Re-organized this technical updates list a bit :)
</li>
<li>
If you cannot afford to make a trade, the Place Trade button will be disabled. (If you hover over it, a popup will inform you that you do not have enough funds to make the trade.)
</li>
<li>
Re-introduced Doorbell.io &quot;Feedback&quot; button in the lower left-hand corner.
</li>
<li>
Pointed <a className="link" rel="noopener noreferrer" target="_blank" href="https://augur-dev.firebaseapp.com">augur-dev</a> and <a className="link" rel="noopener noreferrer" target="_blank" href="http://local.augur.net">local.augur.net</a> at our private testing chain (geth JSON RPC endpoints: <a className="link" rel="noopener noreferrer" target="_blank" href="https://eth9000.augur.net">HTTPS</a>, <a className="link" rel="noopener noreferrer" target="_blank" href="wss://ws9000.augur.net">websockets</a>). The public (Morden) testnet has been almost unusable for the past several weeks due to excessive network congestion. Once things are moving on Morden again, our test instances will switch back. (Note: <a className="link" rel="noopener noreferrer" target="_blank" href="https://app.augur.net">app.augur.net</a> remains pointed at the Morden testnet for now, although we may redirect that as well soon.)
</li>
<li>
There is now a popup displaying the &quot;maximum number of shares&quot; you can buy at a particular limit price (only visible after you have entered a limit price).
</li>
<li>
Increased the lifetime of chat messages (Whisper TTL) to 1 week; plan is to decrease this if/when the chatbox starts seeing more use.
</li>
</ol>
<h3>October 27, 2016</h3>
<ol>
<li>
Percent fee now always displays as a positive number.
</li>
<li>
Finished fixing/updating the integration tests for augur.js.
</li>
<li>
Upgraded our private chain geth instance server (Linode) to support an expanded testing group.
</li>
<li>
Added extra blocknumber check and catch-up for missed blocks due to dropped websocket connections.
</li>
<li>
augur.js unit tests have been fixed/updated and are now working properly.
</li>
</ol>
{p.marketsLink &&

@@ -178,0 +93,0 @@ <Link className="lets-do-this-button" {...p.marketsLink} >{`Let's do this!`}</Link>

107

src/modules/market/components/market-basics.jsx
import React from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';
import ValueDenomination from '../../common/components/value-denomination';
import ValueDate from '../../common/components/value-date';
import Link from '../../link/components/link';

@@ -14,3 +15,3 @@ const MarketBasics = p => (

{p.tags.map((tag, i) => (
<li key={i} className={classnames('tag', { link: !!tag.name })} >
<li key={i} className={classnames('tag', 'pointer', { link: !!tag.name })} >
<button

@@ -43,3 +44,3 @@ className="unstyled"

disabled={p.marketDataAge.isMarketDataLoading}
title={p.marketDataAge.isMarketDataLoading ? 'Loading' : 'Reload market data'}
data-tip={p.marketDataAge.isMarketDataLoading ? 'Loading' : 'Reload market data'}
onClick={() => p.updateData(p.id)}

@@ -54,22 +55,96 @@ >

<span className="market-description" title={p.description}>{p.description}</span>
<Link
{...p.marketLink}
onClick={p.marketLink.onClick}
className="market-description"
>
{p.description}
</Link>
<ul className="market-properties">
{!!p.endDate &&
<li className="property end-date" title={`${p.endDateLabel}: ${p.endDate.full}`}>
<span className="property-label">{p.endDateLabel}:</span>
<ValueDate className="property-value" {...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.endDateLabel}:</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" title={`${p.makerFeePercent.full} discounted fee for placing bids or asks on the books`}>
<span className="property-label">Maker Fee:</span>
<ValueDenomination className="property-value" {...p.makerFeePercent} />
<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" title={`${p.takerFeePercent.full} fee for taking bids or asks from the books`}>
<span className="property-label">Taker Fee:</span>
<ValueDenomination className="property-value" {...p.takerFeePercent} />
<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" title={`${p.volume.rounded} total ${p.volume.denomination} traded`}>
<span className="property-label">Volume:</span>
<ValueDenomination className="property-value" {...p.volume} formatted={p.volume.rounded} />
<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>

@@ -76,0 +151,0 @@ </ul>

2

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

@@ -44,3 +44,3 @@ import React, { PropTypes } from 'react';

}
<li className="property creation-date" title={`created: ${p.creationTime.full}`}>
<li className="property creation-date" data-tip={`created: ${p.creationTime.full}`}>
<span className="property-label">created</span>

@@ -47,0 +47,0 @@ <ValueDate className="property-value" {...p.creationTime} />

2

src/modules/markets/components/markets-view.jsx
import React, { PropTypes } from 'react';
import MarketsHeaders from '../../markets/components/markets-headers';
import MarketsList from '../../markets/components/markets-list';
import Branch from '../../markets/components/branch';
import Branch from '../../branch/components/branch';

@@ -6,0 +6,0 @@ const MarketsView = p => (

4

src/modules/my-positions/components/my-positions.jsx
import React from 'react';
import ReactTooltip from 'react-tooltip';
import Position from './my-position';

@@ -33,3 +34,3 @@ import Link from '../../link/components/link';

<button
title={p.market.smallestPosition.full}
data-tip={p.market.smallestPosition.full}
className="button"

@@ -46,2 +47,3 @@ onClick={(event) => {

}
<ReactTooltip type="light" effect="solid" place="top" globalEventOff="click" />
</section>

@@ -48,0 +50,0 @@ );

6

src/modules/my-reports/components/my-report.jsx
import React from 'react';
import ReactTooltip from 'react-tooltip';
import ValueDenomination from '../../../modules/common/components/value-denomination';

@@ -24,3 +25,3 @@ import ValueDate from '../../../modules/common/components/value-date';

className="fa report-equal"
title="Your report matches the consensus outcome"
data-tip="Your report matches the consensus outcome"
>

@@ -31,3 +32,3 @@ &#xf058;

className="fa report-unequal"
title="Your report does not match the consensus outcome"
data-tip="Your report does not match the consensus outcome"
>

@@ -60,2 +61,3 @@ &#xf057;

</div>
<ReactTooltip type="light" effect="solid" place="top" />
</div>

@@ -62,0 +64,0 @@ );

28

src/modules/open-orders/components/open-order.jsx
import React from 'react';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';
import ValueDenomination from '../../common/components/value-denomination';

@@ -50,3 +50,3 @@

className="button cancel-order-abort-confirmation"
title="No, don't cancel order"
data-tip="No, don't cancel order"
onClick={(event) => {

@@ -60,3 +60,3 @@ console.log(event);

className="button cancel-order-action"
title="Yes, cancel order"
data-tip="Yes, cancel order"
onClick={(event) => {

@@ -68,2 +68,3 @@ console.log(event);

>Yes</button>
<ReactTooltip type="light" effect="solid" place="top" />
</span>

@@ -79,11 +80,14 @@ );

return (
<button
className="button cancel-order-action"
title="Cancel order"
onClick={(event) => {
showCancelOrderConfirmation(orderID, marketID, type);
}}
>
Cancel
</button>
<span>
<button
className="button cancel-order-action"
data-tip="Cancel order"
onClick={(event) => {
showCancelOrderConfirmation(orderID, marketID, type);
}}
>
Cancel
</button>
<ReactTooltip type="light" effect="solid" place="top" />
</span>
);

@@ -90,0 +94,0 @@ }

6

src/modules/portfolio/components/reports.jsx
import React from 'react';
import ReactTooltip from 'react-tooltip';
import Report from '../../../modules/my-reports/components/my-report';

@@ -15,3 +16,3 @@ import Link from '../../link/components/link';

className="fa outcome-challenged"
title="This outcome is currently being challenged"
data-tip="This outcome is currently being challenged"
>

@@ -24,3 +25,3 @@ &#xf0e3;

className="fa outcome-challengeable"
title="This outcome may be challenged"
data-tip="This outcome is eligible to be challenged"
>

@@ -39,2 +40,3 @@ &#xf06a;

))}
<ReactTooltip type="light" effect="solid" place="top" />
</div>

@@ -41,0 +43,0 @@ );

3

src/modules/site/components/site-header.jsx
import React from 'react';
import classnames from 'classnames';
import { ACCOUNT, MARKETS, TRANSACTIONS, MY_POSITIONS, MY_MARKETS, MY_REPORTS } from '../../site/constants/views';

@@ -65,3 +64,2 @@ import { FAVORITES, PENDING_REPORTS } from '../../markets/constants/markets-headers';

className={classnames('site-nav-link', TRANSACTIONS, { active: p.activeView === TRANSACTIONS }, { working: p.isTransactionsWorking })}
title={p.loginAccount.realEther && `real ether: ${p.loginAccount.realEther.full}`}
{...p.transactionsLink}

@@ -75,3 +73,2 @@ >

className={classnames('site-nav-link', ACCOUNT, { active: p.activeView === ACCOUNT })}
title={p.loginAccount.realEther && `${p.loginAccount.realEther.full} real ETH`}
{...p.accountLink}

@@ -78,0 +75,0 @@ >

35

src/modules/trade/components/trade-builder-bid-ask.jsx
import React from 'react';
import classnames from 'classnames';
import ValueDenomination from '../../../modules/common/components/value-denomination';
const TradeBuilderBidAsk = p => (
<div className={classnames('trade-builder-bid-ask', { 'is-of-current-user': p.bidAsk.isOfCurrentUser }, p.className)} title={classnames({ 'You have an open order at this price': p.bidAsk.isOfCurrentUser })}>
<span>
<div
className={classnames('trade-builder-bid-ask', { 'is-of-current-user': p.bidAsk.isOfCurrentUser }, p.className)}
data-tip={classnames({ 'You have an open order at this price': p.bidAsk.isOfCurrentUser })}
>
<ValueDenomination
{...p.bidAsk.shares}
className={classnames('shares')}
formatted={p.bidAsk.shares.rounded}
fullPrecision={p.bidAsk.shares.fullPrecision}
denomination={undefined}
/>
<ValueDenomination
{...p.bidAsk.shares}
className={classnames('shares')}
formatted={p.bidAsk.shares.rounded}
fullPrecision={p.bidAsk.shares.fullPrecision}
denomination={undefined}
/>
<span className="shares-at">@</span>
<span className="shares-at">@</span>
<ValueDenomination
className={classnames('price')}
{...p.bidAsk.price}
/>
</div>
<ValueDenomination
className={classnames('price')}
{...p.bidAsk.price}
/>
</div>
</span>
);

@@ -25,0 +28,0 @@

4

src/modules/trade/components/trade-builder-row.jsx
import React from 'react';
import classnames from 'classnames';
import TradeBuilderBidAsk from '../../../modules/trade/components/trade-builder-bid-ask';

@@ -8,3 +7,2 @@ import ValueDenomination from '../../../modules/common/components/value-denomination';

import Toggler from '../../../modules/common/components/toggler';
import { SCALAR } from '../../markets/constants/market-types';

@@ -56,3 +54,3 @@

value={p.trade.numShares}
title={p.trade.limitPrice && p.trade.maxNumShares && `${p.trade.maxNumShares.minimized} shares max at this price`}
data-tip={p.trade.limitPrice && p.trade.maxNumShares && `${p.trade.maxNumShares.minimized} shares max at this price`}
min="0"

@@ -59,0 +57,0 @@ max={p.trade.maxNumShares}

2

src/modules/trade/components/trade-panel.jsx

@@ -22,3 +22,3 @@ import React from 'react';

disabled={!(!!p.tradeSummary && !!p.tradeSummary.tradeOrders && !!p.tradeSummary.tradeOrders.length) || p.isTradeCommitLocked || !p.tradeSummary.hasUserEnoughFunds}
title={!p.tradeSummary.hasUserEnoughFunds ? `You don't have enough funds` : null}
data-tip={!p.tradeSummary.hasUserEnoughFunds ? `You don't have enough funds` : null}
onClick={(event) => {

@@ -25,0 +25,0 @@ event.stopPropagation();

30

src/modules/transactions/components/transaction.jsx

@@ -16,15 +16,29 @@ import React from 'react';

const marketDescription = () => {
const description = () => <span className="market-description" title={p.data.description || p.data.marketDescription}>
{p.data.description ? p.data.description.substring(0, 100) + ((p.data.description.length > 100 && '...') || '') : p.data.marketDescription.substring(0, 100) + ((p.data.marketDescription.length > 100 && '...') || '')}
</span>;
if ((p.data.description || p.data.marketDescription) && p.data.marketLink) {
const shortDescription = p.data.description ?
p.data.description.substring(0, 100) + ((p.data.description.length > 100 && '...') || '') :
p.data.marketDescription.substring(0, 100) + ((p.data.marketDescription.length > 100 && '...') || '');
const fullDescription = p.data.description || p.data.marketDescription;
const description = (isShortened) => {
if (isShortened) {
return (
<span className="market-description" data-tip={fullDescription}>
{shortDescription}
</span>
);
}
return (
<span className="market-description">
{shortDescription}
</span>
);
};
const isShortened = shortDescription !== fullDescription;
if (shortDescription && p.data.marketLink) {
return (
<Link href={p.data.marketLink.href} onClick={p.data.marketLink.onClick}>
{description()}
{description(isShortened)}
</Link>
);
}
return <span>{description()}</span>;
return <span>{description(isShortened)}</span>;
};

@@ -31,0 +45,0 @@ 

src/modules/markets/components/branch.jsx
src/modules/markets/less/branch.less
build/components.jsx

Sorry, the diff of this file is too big to display

build/styles.css

Sorry, the diff of this file is not supported yet

src/modules/common/less/common.less

Sorry, the diff of this file is not supported yet

src/styles.less

Sorry, the diff of this file is not supported yet