originprotocol / origin Goto Github PK

Slack discussion here: https://originprotocol.slack.com/archives/C72PD95H9/p1514907594000432

Basically change radio button look to a filled rectangle look, i.e. when a category is selected then the rectangle gets solid-filled.

Should look like this:

Right now we only show photos, title, description, and price.

We should at least show the other fields if present.

Right now we have a hacky timer.

Correct way would be something like step 3 on this tutorial:
https://hackernoon.com/tips-and-tricks-for-adding-metamask-to-your-ui-32728b437194

if (typeof web3 == 'undefined') {
  return (
    <NoMetamask/>
  );
} else if (web3.version.network == 'loading') {
  return (
    <WrongNetwork/>
  );
} else {
  return (
    <Landing/>
  );
}

We can't be English/America-only. Let's get this DApp global!

Overall plan is:

Step 1: Choose localization library. Default choice for React would seem to be: react-localization

Step 2: Break apart current english strings and replace with appropriate l10n calls.

Step 3: Get translations for different languages.

If you have an opinion on 1, or want to do some research, that'd be very useful. Step 2 will be the bulk of this issue.

Sub-tasks created:

• #245
• #246
• #247
• #248
• #249
• #255
• #263

May be related to the earlier bug where it reverse direction on each reload.

Add a create timestamp to Listing contract. Have it populated when listing is created. Display date on listing-detail page.

We want to do this for security reasons so that people cannot host malicious content on the gateway.

They get appended to URL when clicked, e.g. https://demo.originprotocol.com/https://www.originprotocol.com/product-brief

On blockchain transactions, e.g. posting listing here:
https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/demo-step-4.js#L12

Determine if we are on mainnet, testnet, or local
https://ethereum.stackexchange.com/a/23905/20332

And then link to page transaction tx on network's etherscan, e.g.
https://rinkeby.etherscan.io/tx/0xfa2108102935c48eac0869c901ea36588704110eac6fdb79f958841d1821fc28

Of course not possible for local testrpc network.

Currently using version 0.18.4 when latest is >1.0.

Noticed when interacting with utils:
https://web3js.readthedocs.io/en/1.0/web3-utils.html

Upon first run the app has no listings, so its hard to get a feel of what we're going for.

We need some sample listings to be included upon start. I can see two ways of doing this

1. Have script that adds listings, ideally integrated to part of truffle deploy process
2. Include a pre-populated chain database that is used by truffle develop/testrpc

The right choice I think is (1) if we can make it work.

Now that we have our IPFS gateway (soon with auto-pinning), we can rely on the IPFS data already being there.

For actual content of sample listings (images, copy, prices), consult in @matthewliu and @aure

This is surprisingly hard, as web3 doesn't give any info returned from a contract method.

We'll probably need to modify our code that waits for transaction to finish, and then fetch the listing id (index) from there.

Aure's design calls for images to be uploaded via a slick UI with thumbnails:

We're using react-json-schema-form, which does only old-school style file uploads. (Click a button to open native OS file selector.)

So there are multiple ways to go:

1. Break image uploading into its own step in listing-create.js. (One idea would be to use the same react-json-schema-form, but hide the image part when entering details, and hide everything BUT the image step when uploading photos.)
2. Perhaps use a natve FileReader() to do the upload, and inject the results into the react-json-schema-form. (Docs)
3. Use HTML5 image uploader to show preview of uploaded images, and possibly even resize them.

We need to show when a listing was made.

The create() method of our contract should add the timestamp from the now global.
http://solidity.readthedocs.io/en/develop/units-and-global-variables.html#block-and-transaction-properties

The listingStruct would need a createTimestamp property too.

And then this needs to be shown in the app when the listing is displayed.

potential security vulnerability

Right now we have duplicated logic on listing-card and listing-detail. This should be abstracted away, possibly into origin-service.js, as this pattern will show up a lot.

We should only use HTTPS for the IPFS gateway. This prevents eavesdropping which listings are being viewed, and prevents data from being modified in transit before it hits the user.

We should prevent us from accidentally using HTTP in the future, as well as help other people building DAPs. I think the best way to do this is to not allow the gateway to be used over HTTP at all. It should be HTTPS only.

Now that we have our own IPFS gateway and the dapp running on Rinkeby, we need to update the readme.

• No need to run local IPFS daemon anymore
• Explanation of using local testrpc chain vs Rinkeby testnet

Gateway is at gateway.originprotocol.com

Discussion on slack begins about here: https://originprotocol.slack.com/archives/C7XHKV6TG/p1513282908000115

We should to force photos be embedded data urls.

Currently, you could just include an http or https image url in the pictures json, and it would be used instead of a data url. This would allow someone to track when their image is viewed, or who is viewing it, or change the image during or after the sale, with no way of knowing about this during a later dispute.

This is probably best done as part of a validation/migration step when loading listing data.

We have lots of repeated instances of colors, fonts, and dimensions that should be abstracted to css variables.

Details:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Data coming from IPFS is completely outside our DAP's control. It can be safely assumed to be as maliciously formed as possible. It could also be in an outdated schema.

We can't have react components responsible for parsing and validating IPFS data.

When we are loading information about a listing, we need to:

• Create a new object, and only copy over whitelisted fields
• Migrate any schema differences between the data loaded and the current version
• Validate each field
• Discard invalid listings

We also need to start keeping some kind of schema version in our IPFS data.

If user does not have Metamask, or is on wrong network, the demo silently fails.

We should detect these conditions and guide user to take the right actions to fix.

With No Metamask, Chrome gives:

Mixed Content: The page at 'https://demo.originprotocol.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:8545/'. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ VM37:1

With Metamask on wrong network (E.g. not on Rinkeby for web demo dapp), Chrome gives:

Uncaught (in promise) Error: Contract has not been deployed to detected network (network/artifact mismatch)
    at contract.js:419
    at <anonymous>
(anonymous) @ contract.js:419
Promise rejected (async)
(anonymous) @ contract-service.js:83
getAllListings @ contract-service.js:81
(anonymous) @ demo-step-0.js:24
setTimeout (async)
DemoStep0 @ demo-step-0.js:21
_constructComponentWithoutOwner @ ReactCompositeComponent.js:297
_constructComponent @ ReactCompositeComponent.js:284
mountComponent @ ReactCompositeComponent.js:187
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:143
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
(anonymous) @ index.js:5
__webpack_require__ @ bootstrap bc5f07193d906f601ba9:555
fn @ bootstrap bc5f07193d906f601ba9:86
(anonymous) @ bootstrap bc5f07193d906f601ba9:578
__webpack_require__ @ bootstrap bc5f07193d906f601ba9:555
(anonymous) @ bootstrap bc5f07193d906f601ba9:578
(anonymous) @ bootstrap bc5f07193d906f601ba9:578

Back button behavior is broken on listings-grid.js (homepage) because we don't change the URL.

We need to use react-router Route and Link to do it right. I think the right way is:
/ = homepage
/page/1 = page 1
/page/2 = page 2
etc...
Where the page corresponds with activePage from Pagination component.

Would be great to add a Dockerfile to make it easier for people using Docker to get up and running with the demo app.

Using this library:
https://www.npmjs.com/package/cryptocompare

React does eliminate most XSS concerns. It does not look like the current code base is vulnerable to any know React XSS attack.

The possible future attack is if user supplied data was used in a link href. For example:

<a href={data.link_to_site}>Web/a>

In this case, the evil user could do a "javascipt:evilcode..", which would run when clicked on. I've checked the codebase, and this isn't currently a problem. However, we'd want to put something in place proactively to prevent us from doing this in the future.

The Content-Security-Policy header allows us to block inline javascript, such as inserted "javascript:" links.

We can add this line to the nginx config for demo.originprotocol.com

add_header Content-Security-Policy "default-src https:; img-src https: data:"

Alternate, you can do the metatag equivalent, and place it in the HTML header for the page.

This will

• Block all inline javascript from being run, preventing an injection attack
• Block any page content not loaded over HTTPS
• Still allow our listing images to be pulled from the data urls

This is a pretty basic CSP. At some point we could explicitly whitelist the domains that we are allowed to run javascript from.

@ryana

Would love to see Demo DApp in Toshi Dev mobile ethereum browser, which uses the Ropstpen test network.

Installation instructions for Toshi Dev:
https://developers.toshi.org/docs/android
https://developers.toshi.org/docs/ios

@ryana is on this.

In step 10 of the local DApp installation, there are no obvious errors during npm install. However, upon npm run start, I get the following error:

Failed to compile.

Error in ./src/components/app.js
Module not found: 'react-web3' in /.../Solidity/origin-demo-dapp/src/components

 @ ./src/components/app.js 20:16-37

Sure enough, the node_modules/react-web3 folder only contains README.md and package.json. It is missing the dist folder and the package code. If I remove the installed branch of the package and edit the package.json dependency to "react-web3": "0.4.3", then the app boots up fine. I have tried a variety of removals and reinstalls to no avail. Let me know what else I can tell you.

When a new listing is created, and user returns to listing-grid page, the new listing sometimes doesn't appear right away but will after another page reload.

We wait for the transaction to be confirmed in blockchain here.

Possibilities:

• React caching results
• Metamask caching contract results
• Web3 not updating -- even though we know the transaction has been mined, perhaps there is delay before the contract method listingsLength() "knows" about the new listing?
• Hack in a [2 second] pause to give time for it to settle?

10 results per page breaks weird w/ the current layout. Can we use 12 instead?

react-web3 package is slick, but doesn't do the reccomended swapping in of local version of web3, as described here:
https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#partly_sunny-web3---ethereum-browser-environment-check

We're already using my patched version of react-web3. I'm in contact with the developer of it, though he is slow to respond.

Add map to listing-detail showing listing location. Probably using openstreetmaps

IPFS responses will never change, so we should maximize caching.

It's unclear how well ipfs js library uses caching, but here is the line where we read from the gateway:
https://github.com/OriginProtocol/demo-dapp/blob/master/src/services/ipfs-service.js#L59

Andrew is having trouble submitting new listings, with Metamask saying to increase the gas price. We currently have hardcoded gaslimit (in another open issue). Need to figure this out.

There's a conversion missing (or doubly applied?) where 0.01 ETH turns into 16 million ETH. :)

• This means one less dependency. (Only need to install truffle)
• Deterministic accounts are standards, so no need for --mnemonic flag

Detailed information here: https://github.com/trufflesuite/truffle/releases/tag/v4.0.0
with update on mnemonic here: https://github.com/trufflesuite/truffle/releases/tag/v4.0.1

On listing-detail, show the eth address that created the listing.

It was quick'n'dirty to get purchasing working, with gas for the purchase hard-coded. This needs to be done right.
https://github.com/OriginProtocol/demo-dapp/blob/master/src/services/contract-service.js#L131
https://github.com/OriginProtocol/demo-dapp/blob/master/src/services/contract-service.js#L129

There are places where we use the page domain to detect if we are on the testnet installation.

• https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/listings-grid.js#L23
  This should probably be done via an environment variable.

• Current url of the hidelist is hard-coded, but should also be an env var
  https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/listings-grid.js#L27

• Maximum size of upload is hardcoded. Should be env var: https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/listing-create.js#L19

Lots of weird stuff. Changing hour can change the day. Different value than typed appears.

We have some nested promises, which is bad form. Example:
https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/listing-create.js#L106

All the then()s and catch()s should be lined up.
https://javascript.info/promise-chaining

If the ipfs payload is too large, the node will reject it with a 413 HTTP response.

POST https://gateway.originprotocol.com:5002/api/v0/add?recursive=true&stream-channels=true 413 (Request Entity Too Large)

For example:

At the moment, all we do is alert() the error, here:
https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/listing-detail.js#L76

We should give message and reset page back to normal.

Listings may disappear from IPFS. (Unpinned and garbage collected, or whatever reason.) We should handle this gracefully. I suggest we show some mention at bottom of everything that listing exists on blockchain, but is invalid without IPFS.

We're using this awesome React library to load & validate our JSONSchema forms:
https://github.com/mozilla-services/react-jsonschema-form

Unfortunately, this library does not currently support loading sub-schemas by URL. This functionality is supported in the JSONSchema spec but it's not in the React implementation that we're using. We're going to need this to be able to have schemas inherit common reusable components like mailing addresses or phone numbers.

Read up on $refs and the id properties of JSONSchema for more context:
https://spacetelescope.github.io/understanding-json-schema/structuring.html

Defaults from react-webe are pretty ugly and not in our style.

Current messaging:

Web3 unavailable

Web3 Not Found'
It seems that you are using a browser without Web3 capabilities. Please
make sure that you are using a web3-capable browser like mist or parity.
If you are using MetaMask or Parity extension, make sure that it is
enabled.

Account unavailable

No ETH Account Available
It seems that you don't have an ETH account selected. If using
MetaMask, please make sure that your wallet is unlocked and that
you have at least one account in your accounts list.

Readme still shows old screenshot.

This is new one:

We need a way to show non-modal messages/errors to user.

overlay.js can show a message and prevent any user interaction (modal).

But we need a way to show other messages but allow continued user action on the page. For example, when the selected listing upload is too large: https://github.com/OriginProtocol/demo-dapp/blob/master/src/components/listing-create.js#L90
There will surely be more of these.

Aure will work on a design, though something like the design here would get us started:
https://codeburst.io/displaying-error-messages-in-react-with-a-higher-order-component-hoc-fe2de074bf64

Zeppelin docs:
http://zeppelin-solidity.readthedocs.io/en/latest/

We should be using at least Ownable and Migrations.