tinybike / augur-ui-react-components Goto Github PK

If I'm on a market's detail page and then go to the main markets listing, I get the following error:

components.jsx:15: Uncaught Invariant Violation: Minified React error #34; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=34 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

If you follow that link, the full error message is:

React DOM tree root should always have a node reference.

This happens on both https://augur-dev.firebaseapp.com as well as on the latest augur+AURC master branches.

assertions are only used in augur tests so there is no need to send them to browser (i.e. bundle them with UI components).

Instead of
import { assertions } from 'augur-ui-react-components';
we can have something like
import assertions from 'augur-ui-react-components/lib/assertions';

Per last meeting, the leading strategy so far is to create selector tests inside the ui repo that test the shape of the selector, then build another similar test in the augur repo that transforms state into the selector then runs the ui selector to test its shape. We don't want to duplicate any portion of these tests. Let's see if we can implement this nicely.

Once we nail down the strategy we should move the relevant test portions from the augur repo to the ui repo.

After going to market page there is sometimes Cannot read property 'requestAnimationFrame' of undefined error

Add eslint to the react component repo and lint all the components.

The assertions associated with the create-market-form selector need to be updated for congruence to the new assertion approach in AURC.

New registration flow:

name: 
password: 
confirm-password:

[GENERATE ACCOUNT]

next page:

Your account has been generated locally. We do not retain a copy. 
*It is critical that you save this information in a safe place.*

secure login id: XANDWONDWQDNQDOQDJQKDQO
password: ....... (show password)

Next send to login screen to make sure they properly recorded their information (do not auto-login)

Login screen label "username" should be changed to "secure login id".

• Move reports from markets to main site nav
• Show previous reports with results of how others voted, and how it affected income and rep
• Show pending reports requiring reporting

Trading is moving to be limit and order-book based. An initial implementation exists commented in the code. Bring back this implementation, including bids/asks views, completing and fixing any missing or broken pieces.

The selectors file provides the dummy model for the components app to render and do stuff. It is composed of two main parts, the data, and the handlers that allow for interaction.

The data should match the selectors in the core app, visible by inspecting window.selectors.

Handlers are implemented very simply using selectors.update({ statePiece1: newValue }) function. It works by passing in some selector state that needs to be mutated, then the function re-renders the app.

For example, one of our selector keys is activePage. This holds a string specifying which main page we are on. We want to be able to update this key by clicking on various links in the site-header so we can switch pages in the ui. To do this, for the login link, we have: onClick: () => module.exports.update({ activePage: LOGIN }). That basically says, when the login link is clicked, set activePage to LOGIN then re-render the site.

This issue is about filling in all the missing props and handlers to make the components site work similarly to the live site.

More details here: AugurProject/augur#670

In short, need to change the labels and descriptions of the fees, as well as the numerical constraints (passed in from augur).

Add UI to allow users to pick a time (in addition to date) during market creation process. See if the existing widget allows this and that it is nice, or consider another widget for the time:

The disqus implementation we have has two problems:

1. it doesn't run in an iframe opening a vector for attack
2. it is based on an owned augur account in their system

We need a comment solution that uses iframes, and manages conversations based on a provided id, not an account or page url (because ipfs urls will change on version updates)

If after some quick research nothing obvious pops up, implement the facebook comment system (as long as it is confirmed the above is true)

When trying to view the chart for example, the screen will constantly snap back to the top.

If you click on "sell" in the trade panel, the word "buy" appears in the LIMIT column:

If you manually delete the word "buy", then click away from the input box, the word "bid" appears instead.

Probably better to have them enter it as a percent (since trading fee is entered that way)!

Currently the account button on the navbar is blank for unlocked local accounts. It should have something there! My suggestion is to show the unlocked Ethereum account's address.

Currently the charting is below the discussion.

There are many reasons a user might want to see their account's Ethereum address (e.g., so they can ask someone else to send them ether). This should be displayed somewhere on the accounts page.

The create market form can be opened using the "make a market" button:

The "additional market info" page has some elements that are no longer needed, confirm with jack whcih ones need to be removed/changed/added:

Also, some new ui has to be added somewhere to ask the user how much initial liquidity they want to provide, and in what distribution. Ask joey/jack for details on that.

The first part of this issue is researching what the specific requirements are, posted in a comment here, so we can discuss as a team how to proceed.

Right now, generating an initial order book is a required part of market creation. It should be decoupled so that it is available, but not required. Suggested way of doing this is to add a checkbox somewhere in the create market process:

• Set up initial buy/sell orders for this market

If checked, the generateOrderBook form appears. If unchecked, then the market is created without automatically calling augur.generateOrderBook.

• Account page should display the entire address by default (shouldn't be click-to-reveal, shouldn't show the truncated address by default)
• The text for the download account button should be changed to something like: "Download your account data. You should always save a backup of your account data somewhere safe! (Note: running a local Ethereum node? If you download your account data to your keystore folder, you can use your Augur account on your local node.)"

Some suggestions:

• meta comment widget that aloows sign-in to various commenting systems like disqus, fb, etc.
• disqus alone might be less confusing and more usable, but all part of the investigation of this ticket
• some other competing service

Once we agree on a service, we will want to implement it in the ui, tied to market.id, and display in the /market view (market-page.jsx) in all states except reporting

We would like to add an auto-complete type enhancement to the tag inputs during the market creation process, to encourage users to centralize on popular tags people have been choosing. Every market has up to 3 tags, the auto-complete for the first tag input, should use a list generated from the first tag of the markets sorted by popularity and filtered down as they type characters, the second tag input from the second tag in markets, etc. The ideal situation is for users to be encouraged to create hierarchical structures like:

Tag1

Sports
Finance
Law
etc.

Tag2

Football
Soccer
Tennis
etc.

We can't force any of this, so the inputs still have to be free-form and allow any input, but we do want to try to encourage it.

To accomplish this in the UI:

• display tags horizontally so that the drop-down doesn't interfere with the next tags
• add props that represent each list (need 3 lists here, one for each tier of tag (ie tag1Popular, tag2Popular, tag3Popular)
• display the lists under each tag as they type, items should be clickable to select, try to use regular html and not introduce a 3rd party auto-complete component
• try to generalize the auto-complete component like we did for DropDown so we can re-use it

The rest of the logic will be handled in augur repo.

Sending crypto requires two inputs:

• amount to send
• destination address

A cute little form on the right side of the dark header area would be good. Option to send ether or rep.

The current live beta ui located at augur.net has a charts component on every market detail page. We would like to pull out that code from the live ui and put it in this augur2 ui.

1. find component in live project in the 'develop' branch of the main repo: https://github.com/AugurProject/augur/tree/develop
2. simplify it to only include the minimum raw data needed to render it - remove all calculations, processing
3. add selector prop on markets to hold the simplified data to render the chart (ie array of historical prices)
4. make a component for the chart called chart.jsx in /market/components
5. display chart by including component in market-page

I get this warning on the main markets listing:

components.jsx:1251: Warning: Unknown prop `text` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in a (created by Link)
    in Link (created by MarketItem)
    in div (created by MarketItem)
    in div (created by MarketItem)
    in article (created by MarketItem)
    in MarketItem (created by Markets)